/* house.css — eclrey 하우스 키트 (CLUE brief) · 동작(토글·탭·인쇄 꼬리)은 house.js
원본: clue-brief/house/house.css · 게시: https://brief.eclrey.com/house/v2/house.css (v1 은 이미 나간 문서용으로 그대로)
견본: https://brief.eclrey.com/house/ · 버전: house/VERSION · 바뀐 것: house/CHANGELOG.md
부품 목록은 견본 페이지에 이름·쓰임·예시로 있다. 이 파일을 복사해 문서에 넣지 말고 로 부른다. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap");
/* ── 토큰 ───────────────────────────────────────────────
받는 곳에 맞춰 바꿔도 되는 것은 --accent 하나뿐. 나머지 강조 계열은 여기서 파생된다. */
:root {
color-scheme: light;
--paper: #ffffff; /* 종이 */
--soft: #f6f3ee; /* 면 */
--rule: #e4dfd6; /* 선 */
--ink: #1f1d1a; /* 글자 */
--sub: #5f5a52; /* 보조 글자 */
--mute: #736e66; /* 흐린 글자 — 흰 바탕 5.1:1 (v2, 전 #8A857C) */
--accent: #c15f3c; /* 테라코타 — 문서가 바꾸는 유일한 입력 */
--hi: var(--accent); /* 실제로 칠하는 강조색 — 테마마다 계산 (다크에서는 밝게) */
--on-hi: #ffffff; /* 강조색 위 글자 */
--hi-ink: color-mix(in srgb, var(--hi) 86%, #000); /* 작은 글자용 강조색 — 흰 바탕 5.4:1 · 면 4.9:1 (v2) */
--accent-tag: color-mix(in srgb, var(--hi) 13%, var(--paper));
--accent-tint: color-mix(in srgb, var(--hi) 18%, var(--paper));
--accent-2: color-mix(in srgb, var(--hi) 45%, var(--paper));
--accent-ring: color-mix(in srgb, var(--hi) 35%, transparent);
--map-stroke: #d8d1c5; /* 지도 경계 */
--track-hover: #efe8de; /* 막대 칸 hover */
--rule-soft: #e7e1d6; /* 면 위 구분선 */
--gutter: 22px; /* 본문 좌우 여백 (문서) */
--gutter-m: 18px; /* 휴대폰(520px 아래) 좌우 여백 */
--wrap: 720px; /* 본문 최대 폭 — 문서는 한 단 */
--font: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* 문서·보드·아티팩트 모두 같은 글꼴 */
box-sizing: border-box;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body {
background: var(--paper); color: var(--ink);
font-family: var(--font);
font-size: 16px; line-height: 1.7; word-break: keep-all;
padding: 0 var(--gutter) 64px; font-feature-settings: "tnum" 1;
}
.wrap { max-width: var(--wrap); margin: 0 auto; }
/* 사이트(랜딩·서비스 소개): — 여백을 화면 폭에 맞춰 넓히고 본문 폭도 넓힌다 */
:root:has(meta[name="house-layout"][content="site"]) { --gutter: clamp(24px, 6vw, 64px); --gutter-m: 24px; --wrap: 1080px; }
/* 한 장(1~2쪽 브리프·소개서): — A4 한 장처럼 넓은 두 단 (v1.2)
구성: 머리띠 → 표지(두 줄 제목) → .figures → .overview(개요|구조) → .pts(2×2) → .dl.deal(조건) → footer.split */
:root:has(meta[name="house-layout"][content="sheet"]) { --gutter: clamp(20px, 5vw, 48px); --gutter-m: 20px; --wrap: 960px; }
:root:has(meta[name="house-layout"][content="sheet"]) .cover { padding: 30px 0 22px; }
@media (min-width: 521px) {
:root:has(meta[name="house-layout"][content="sheet"]) .cover h1 { font-size: 34px; }
:root:has(meta[name="house-layout"][content="sheet"]) .overview { column-gap: 48px; }
:root:has(meta[name="house-layout"][content="sheet"]) .pts { column-gap: 48px; }
}
:root:has(meta[name="house-layout"][content="sheet"]) .pts { margin-top: 26px; }
a { color: inherit; text-underline-offset: 3px; }
.masthead { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0 12px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--mute); line-height: 1.5; }
.masthead .to { color: var(--hi-ink); font-weight: 700; }
.masthead .right { text-align: right; }
.cover { padding: 34px 0 24px; }
.cover .kind { font-size: 13.5px; color: var(--mute); margin-bottom: 10px; }
.cover h1 { font-weight: 800; font-size: 31px; line-height: 1.32; color: var(--ink); letter-spacing: -.02em; }
.cover h1 span { color: var(--hi); }
.cover .deck { font-size: 16.5px; line-height: 1.65; color: var(--sub); margin-top: 14px; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 6px 0 8px; }
.fig { padding: 16px 12px 14px 0; }
.fig + .fig { padding-left: 14px; border-left: 1px solid var(--rule); }
.fig .v { font-size: 27px; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -.01em; }
.fig .v small { font-size: 14px; font-weight: 700; margin-left: 2px; }
.fig .l { font-size: 13.5px; font-weight: 700; margin-top: 6px; }
.fig .n { font-size: 12px; color: var(--mute); line-height: 1.5; margin-top: 2px; }
/* 변형: 좁은 칸 안의 숫자 타일 — 폭과 상관없이 늘 2×2 (v1.1.5) */
.figures.two { grid-template-columns: repeat(2, 1fr); }
.figures.two .fig:nth-child(3) { padding-left: 0; border-left: none; }
.figures.two .fig:nth-child(n+3) { border-top: 1px solid var(--rule); }
.summary { padding: 30px 0 0; }
.summary h2 { font-size: 13.5px; font-weight: 800; color: var(--hi-ink); margin-bottom: 10px; }
.summary ol { list-style: none; counter-reset: s; }
.summary li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 4px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15.5px; }
.summary li:last-child { border-bottom: 1px solid var(--rule); }
.summary li::before { content: counter(s, decimal-leading-zero); font-size: 12.5px; font-weight: 800; color: var(--hi-ink); padding-top: 3px; }
.summary li b { color: var(--ink); font-weight: 700; }
section.ch { padding: 40px 0 6px; }
.ch-head { display: grid; grid-template-columns: 32px 1fr; gap: 4px; border-top: 2px solid var(--ink); padding-top: 14px; margin-bottom: 16px; }
.ch-no { font-size: 13px; font-weight: 800; color: var(--hi-ink); padding-top: 2px; }
.ch-topic { font-size: 13.5px; font-weight: 800; color: var(--hi-ink); margin-bottom: 4px; }
.ch-title { font-weight: 800; font-size: 21px; line-height: 1.45; color: var(--ink); letter-spacing: -.015em; }
h3 { font-weight: 800; font-size: 17px; color: var(--ink); margin: 26px 0 8px; line-height: 1.5; }
p { color: var(--ink); margin-bottom: 14px; font-size: 16px; }
p.sub { color: var(--sub); }
strong { font-weight: 700; color: var(--ink); }
.hang { list-style: none; margin: 8px 0 14px; }
.hang > li { display: grid; grid-template-columns: 30px 1fr; gap: 4px; padding: 13px 0; border-top: 1px solid var(--ink); }
.hang > li + li { border-top-color: var(--rule); }
.hang > li:last-child { border-bottom: 1px solid var(--rule); }
.hang .m { font-weight: 800; color: var(--hi-ink); font-size: 13px; line-height: 1.9; }
.hang .m.dash::before { content: ""; display: block; width: 10px; height: 2px; background: var(--hi); margin-top: 12px; }
.hang .t { font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.55; }
.hang .d { color: var(--sub); font-size: 15px; margin-top: 3px; line-height: 1.7; }
.hang .tag { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--hi-ink); background: var(--accent-tag); padding: 1px 7px; margin-left: 6px; vertical-align: 2px; border-radius: 3px; }
.pts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 12px 0 18px; }
.pts.three { grid-template-columns: repeat(3, 1fr); column-gap: 26px; }
.pts > li { border-top: 1px solid var(--ink); padding: 12px 0 18px; }
.pts .n { font-size: 12.5px; font-weight: 800; color: var(--hi-ink); }
.pts .t { font-weight: 800; font-size: 16.5px; line-height: 1.45; margin: 4px 0 5px; color: var(--ink); }
.pts .d { color: var(--sub); font-size: 14.5px; line-height: 1.7; }
.pts .rec { font-size: 12.5px; font-weight: 700; color: var(--hi-ink); margin-left: 6px; }
.overview { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding: 30px 0 4px; }
.overview h2 { font-size: 13.5px; font-weight: 800; color: var(--hi-ink); margin-bottom: 8px; }
.ov-rows > div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.6; }
.ov-rows dt { color: var(--mute); font-size: 14px; }
.overview .bars { padding: 2px 0 0; }
.overview .bar { grid-template-columns: 122px 1fr 40px; white-space: nowrap; padding: 6px 0; font-size: 14.5px; }
.overview .note { font-size: 13.5px; color: var(--sub); line-height: 1.65; margin-top: 10px; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
.flow figure { margin: 0; }
.flow img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.flow figcaption { font-size: 13px; color: var(--sub); line-height: 1.6; margin-top: 7px; }
.flow figcaption .n { font-weight: 800; color: var(--hi-ink); margin-right: 6px; font-size: 12px; }
.flow figcaption b { color: var(--ink); font-weight: 700; margin-right: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--sub); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.legend i.a, .seg.a { background: var(--hi); }
.legend i.b, .seg.b { background: var(--accent-2); }
.mbars { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 8px 0; }
.mbar { display: grid; grid-template-columns: 66px 1fr 64px; align-items: center; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.mtrack { display: flex; height: 12px; background: var(--soft); }
.mbar .p { text-align: right; font-weight: 700; font-size: 13px; }
.qfigs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.q { padding: 14px 12px 14px 0; }
.q + .q { padding-left: 14px; border-left: 1px solid var(--rule); }
.qn { font-size: 13px; font-weight: 700; color: var(--hi-ink); }
.qv { font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin-top: 2px; }
.qv small { font-size: 14px; font-weight: 700; margin-left: 2px; }
.qd { font-size: 12px; color: var(--mute); margin-top: 2px; }
.geo { margin-top: 14px; }
.geo-map { max-width: 360px; margin: 0 auto; }
.kmap { display: block; width: 100%; height: auto; }
.kmap .pv { fill: var(--soft); stroke: var(--map-stroke); stroke-width: .8; transition: fill .15s; }
.kmap .pv.on { fill: var(--accent-tint); }
.kmap .bub { cursor: pointer; outline: none; }
.kmap .bub circle.dot { fill: var(--hi); stroke: var(--paper); stroke-width: 1.2; }
.kmap .bub.on circle.dot, .kmap .bub:focus-visible circle.dot { stroke: var(--ink); stroke-width: 2.4; }
.kmap .bl { font-size: 10.5px; font-weight: 800; fill: var(--on-hi); text-anchor: middle; pointer-events: none; }
.geo-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 10px; font-size: 14.5px; }
.gi-r { font-weight: 800; color: var(--hi-ink); }
.gi-s { font-weight: 700; }
.gi-c { color: var(--sub); }
.geo-hint { text-align: center; font-size: 12px; color: var(--mute); margin-top: 4px; }
.kmap .bub circle.ring { fill: none; stroke: var(--hi); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.kmap .bub.pulse circle.ring { animation: ripple 1.1s ease-out 2; }
@keyframes ripple { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.kmap .bub circle.dot, .kmap .bub .bl { transform-box: fill-box; transform-origin: center; }
.geo.pre .kmap .bub circle.dot { transform: scale(0); }
.geo.pre .kmap .bub .bl { opacity: 0; }
.geo.in .kmap .bub circle.dot { transform: scale(1); transition: transform .7s cubic-bezier(.2,1.4,.4,1) var(--d), stroke-width .15s; }
.geo.in .kmap .bub .bl { opacity: 1; transition: opacity .4s ease calc(var(--d) + .45s); }
.kmap .bub:hover circle.dot { transform: scale(1.08); transition: transform .2s ease; }
.gi-s, .gi-c, .gi-r { transition: opacity .2s; }
.geo-info.swap span { opacity: .25; }
@media (prefers-reduced-motion: reduce) {
.geo.pre .kmap .bub circle.dot { transform: none; }
.geo.pre .kmap .bub .bl { opacity: 1; }
.kmap .bub.pulse circle.ring { animation: none; }
}
.exhibit { margin: 22px 0 18px; }
.ex-cap { font-size: 12.5px; color: var(--hi-ink); font-weight: 800; margin-bottom: 2px; }
.ex-title { font-weight: 700; font-size: 15.5px; color: var(--ink); margin-bottom: 10px; line-height: 1.45; }
.ex-src { font-size: 12.5px; color: var(--mute); margin-top: 8px; line-height: 1.6; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 470px; }
thead th { font-size: 12.5px; font-weight: 700; color: var(--mute); text-align: right; padding: 8px 8px 7px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; padding-left: 0; white-space: normal; }
tfoot td { font-weight: 800; border-top: 1px solid var(--ink); border-bottom: none; }
.bars { padding: 4px 0; }
.bar { display: grid; grid-template-columns: 84px 1fr 60px; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
.track { height: 10px; background: var(--soft); }
.fill { height: 100%; background: var(--hi); }
.fill.b { opacity: .74; } .fill.c { opacity: .52; } .fill.d { opacity: .36; } .fill.e { opacity: .24; }
.bar .p { text-align: right; font-weight: 700; font-size: 13.5px; }
/* 도표 5 — 막대 ↔ 지도 연결 */
.bars.link .bar { cursor: pointer; outline: none; border-radius: 3px; }
.bars.link .bar:hover .track { background: var(--track-hover); }
.bars.link .bar:focus-visible { box-shadow: 0 0 0 2px var(--hi); }
.bars.link .bar > span:first-child, .bars.link .bar .p { transition: color .15s; }
.bars.link .bar.on > span:first-child { font-weight: 800; color: var(--hi-ink); }
.bars.link .bar.on .p { color: var(--hi-ink); }
.bars.link .bar.on .track { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.bars.grow .fill { transform: scaleX(0); transform-origin: left center; }
.bars.grow.in .fill { transform: scaleX(1); transition: transform .8s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
@media print { .bars.grow .fill { transform: none; } }
.dl { background: var(--soft); padding: 6px 18px; margin: 10px 0 16px; }
.dl > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-soft); font-size: 15px; }
.dl > div:first-child { border-top: none; }
.dl dt { color: var(--mute); font-size: 14px; }
.dl dd { color: var(--ink); }
/* 조건 상자 — .dl 안 맨 위 제목 (v1.2). 거래 개요·계약 조건처럼 넓은 칸이면 .dl.deal */
.dl > .h { font-size: 13.5px; font-weight: 800; color: var(--hi-ink); padding: 14px 0 4px; }
.dl > .h + div { border-top: none; }
.dl.deal { padding: 8px 26px 12px; margin-top: 24px; }
.dl.deal > div { grid-template-columns: 120px 1fr; }
.dl dd b { font-weight: 800; }
.price { background: var(--soft); padding: 20px 18px; margin: 8px 0 18px; }
.price .amt { font-weight: 800; font-size: 32px; color: var(--ink); letter-spacing: -.015em; line-height: 1.2; }
.price .scope { font-size: 15px; color: var(--sub); margin-top: 6px; }
.contact { border-top: 2px solid var(--ink); padding: 18px 0 4px; margin-top: 40px; }
.contact .h { font-weight: 800; color: var(--hi-ink); font-size: 13.5px; margin-bottom: 8px; }
.contact p { margin: 0; color: var(--ink); font-size: 16px; font-weight: 500; }
footer { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--mute); line-height: 1.6; }
/* 꼬리말 둘로 — 왼쪽 주석(기준·면책), 오른쪽 연락처 (v1.2) */
footer.split { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 32px; flex-wrap: wrap; }
footer.split > :first-child { flex: 1 1 360px; }
footer p { font-size: inherit; color: inherit; margin: 0; line-height: inherit; }
footer.split .who { color: var(--ink); font-weight: 800; font-size: 14px; white-space: nowrap; }
@media (max-width: 520px) {
body { padding: 0 var(--gutter-m) 56px; }
.cover h1 { font-size: 26px; }
.figures { grid-template-columns: repeat(2, 1fr); }
.fig:nth-child(3) { padding-left: 0; border-left: none; }
.fig:nth-child(n+3) { border-top: 1px solid var(--rule); }
.ch-title { font-size: 19px; }
.price .amt { font-size: 28px; }
table { min-width: 0; font-size: 12.5px; }
thead th { font-size: 11.5px; padding: 7px 4px 6px; white-space: normal; line-height: 1.35; vertical-align: bottom; }
td { padding: 8px 4px; }
td:first-child { font-size: 12.5px; line-height: 1.4; }
.bar { grid-template-columns: 74px 1fr 56px; font-size: 13px; }
.dl { padding: 4px 14px; }
.dl > div { grid-template-columns: 70px 1fr; }
.flow { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.mbar { grid-template-columns: 58px 1fr 58px; font-size: 12.5px; }
.qv { font-size: 19px; }
.qv small { font-size: 12px; }
.q + .q { padding-left: 10px; }
.q { padding-right: 8px; }
.flow figcaption { font-size: 12px; }
.flow figcaption b { display: block; margin: 0; }
.pts, .pts.three, .overview { grid-template-columns: 1fr; }
.dl.deal { padding: 6px 16px 10px; }
.dl.deal > div { grid-template-columns: 84px 1fr; }
.overview { row-gap: 28px; }
.overview .bar { grid-template-columns: 100px 1fr 44px; }
}
@media (min-width: 521px) and (max-width: 760px) {
.pts.three { grid-template-columns: 1fr; }
.overview { grid-template-columns: 1fr; row-gap: 28px; }
}
/* ── v1 에서 더한 부품 ─────────────────────────────── */
/* 콜아웃 — 본문 중 한 번만 강조할 말 */
.callout { border-left: 3px solid var(--hi); background: var(--soft); padding: 14px 18px; margin: 14px 0 18px; font-size: 15px; line-height: 1.7; }
.callout .h { font-size: 12.5px; font-weight: 800; color: var(--hi-ink); margin-bottom: 4px; }
.callout p:last-child { margin-bottom: 0; }
/* 타임라인 — 날짜·단계 순서 */
.timeline { list-style: none; margin: 10px 0 18px; border-left: 2px solid var(--rule); padding-left: 0; }
.timeline > li { position: relative; padding: 0 0 16px 20px; }
.timeline > li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule); }
.timeline > li.on::before { background: var(--hi); border-color: var(--hi-ink); }
.timeline .when { font-size: 12.5px; font-weight: 800; color: var(--hi-ink); }
.timeline .t { font-weight: 700; font-size: 15.5px; line-height: 1.5; }
.timeline .d { color: var(--sub); font-size: 14.5px; line-height: 1.65; margin-top: 2px; }
/* 칩 — 종류·상태 표시 */
.chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--sub); border: 1px solid var(--rule); vertical-align: 1px; }
.chip.accent { background: var(--accent-tag); color: var(--hi-ink); border-color: transparent; }
/* ── v1.1 — 다크 모드 ──────────────────────────────────
페이지가 고른다. 기본은 라이트(밖으로 보내는 문서가 받는 사람 기기 설정 때문에 조용히 뒤집히지 않게).
보드·사이트는 (또는 ) — 시스템 설정을 따른다.
토글(.switch[data-house-switch="theme"])·claude.ai 뷰어는 를 찍는다 — 그것이 늘 이긴다.
부품은 토큰만 쓴다. 다크 --mute 도 본문에는 쓰지 않는다. */
:root[data-theme="dark"] {
--paper: #1a1a19; --soft: #242423; --rule: #3a3a38; --rule-soft: #333331;
--ink: #f0ebe3; --sub: #c4bdb2; --mute: #9c968b;
--hi: color-mix(in srgb, var(--accent) 72%, #fff); --hi-ink: var(--hi); --on-hi: #1a1a19;
--map-stroke: #484846; --track-hover: #2b2b2a;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:is([data-theme-mode="auto"], :has(meta[name="house-theme"][content="auto"])):not([data-theme="light"]) {
--paper: #1a1a19; --soft: #242423; --rule: #3a3a38; --rule-soft: #333331;
--ink: #f0ebe3; --sub: #c4bdb2; --mute: #9c968b;
--hi: color-mix(in srgb, var(--accent) 72%, #fff); --hi-ink: var(--hi); --on-hi: #1a1a19;
--map-stroke: #484846; --track-hover: #2b2b2a;
color-scheme: dark;
}
}
/* ── v1.1 — 한·영 ─────────────────────────────────────
두 언어를 한 페이지에: 블록마다 lang="ko" / lang="en" 짝을 둔다 (문장 안이면 span).
이면 영어, 아니면 한국어가 보인다. 토글 .switch[data-house-switch="lang"] · 주소 #en · 선택 기억은 house.js. */
html:not([data-lang="en"]) [lang="en"]:not(html),
html[data-lang="en"] [lang="ko"]:not(html) { display: none !important; }
html[data-lang="en"] body { word-break: normal; overflow-wrap: break-word; }
html[data-lang="en"] .cover h1, html[data-lang="en"] .ch-title { letter-spacing: -.01em; }
/* ── v1.1 — 머리 도구: 테마·언어 토글, 인쇄 ─────────────
페이지 맨 위 한 줄 — .wrap 의 첫 자식으로 머리띠(.masthead) 바로 위에 둔다. 글자 토글: 고른 쪽만 진하게, 강조색 밑줄.
묶음 사이는 가는 세로선. 동작은 house.js. */
.switches { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 0; padding-top: 12px; font-size: 12.5px; line-height: 1; }
.switches > * + * { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--rule); }
.switches + .masthead { padding-top: 10px; }
.switch { display: inline-flex; align-items: center; gap: 10px; }
.switch button, .print-btn { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--sub); background: none; border: 0; padding: 0; min-height: 32px; display: inline-flex; align-items: center; cursor: pointer; } /* 누를 곳 32px */
.switch button:hover, .print-btn:hover { color: var(--ink); }
.switch button[aria-pressed="true"] { color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--hi); }
.switches { padding-top: 6px; }
.switches + .masthead { padding-top: 6px; }
.print-btn { color: var(--hi-ink); font-weight: 700; }
.switch button:focus-visible, .print-btn:focus-visible, .views [role="tab"]:focus-visible, .doc-group button:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
@media (max-width: 520px) { .switches { justify-content: flex-start; } }
/* 변형: 상단바·한 줄 안에 넣는 머리 도구 — 위 여백 없이 세로 가운데 (v1.1.5) */
.switches.inline { padding-top: 0; align-self: center; }
/* ── v1.1 — 보드 부품 (네 보드에서 되풀이되던 것을 하나로) ───────── */
/* 화면 탭 — 현황 ↔ 문서. 버튼은 role="tab" aria-controls="패널 id", 패널은 .view (감출 때 hidden) */
.views { display: flex; flex-wrap: wrap; column-gap: 22px; border-bottom: 1px solid var(--rule); margin-top: 6px; }
.views [role="tab"] { font: inherit; font-size: 15px; font-weight: 800; color: var(--mute); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0 9px; margin-bottom: -1px; cursor: pointer; }
.views [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--hi-ink); }
.view[hidden] { display: none; }
.views.sticky { position: sticky; top: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 5; }
/* 문서 화면 — 왼쪽 목록(묶음 .doc-group) + 본문 .doc, 좁으면 목록 대신 .doc-select */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 24px; }
.docs > * { min-width: 0; }
.doc-list { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); display: grid; gap: 16px; max-height: calc(100vh - 40px); overflow-y: auto; }
.doc-group h4 { font-size: 12.5px; font-weight: 800; color: var(--hi-ink); margin-bottom: 4px; }
.doc-group button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; line-height: 1.45; color: var(--ink); background: none; border: 0; border-left: 2px solid transparent; padding: 6px 10px; cursor: pointer; }
.doc-group button:hover { background: var(--soft); }
.doc-group button[aria-current="true"] { border-left-color: var(--hi-ink); background: var(--soft); font-weight: 700; }
.doc-select { display: none; width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); margin-bottom: 14px; }
.doc { overflow-wrap: anywhere; font-size: 15.5px; }
.doc h1 { font-size: 21px; font-weight: 800; line-height: 1.45; margin: 0 0 12px; }
.doc h2 { font-size: 17px; font-weight: 800; margin: 26px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.doc h3 { font-size: 15.5px; margin: 20px 0 6px; }
.doc ul, .doc ol { margin: 6px 0 14px 20px; }
.doc li { margin: 3px 0; }
.doc blockquote { border-left: 3px solid var(--hi); background: var(--soft); padding: 10px 14px; margin: 12px 0; color: var(--sub); }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; background: var(--soft); padding: 1px 5px; }
.doc pre { background: var(--soft); padding: 12px 14px; overflow-x: auto; margin: 10px 0 16px; }
.doc pre code { background: none; padding: 0; }
.doc table { min-width: 0; }
.doc th, .doc td { text-align: left; white-space: normal; vertical-align: top; } /* md 표는 글 표 — 숫자 표 기본(오른쪽·한 줄)을 풀어 준다 */
.doc th.num, .doc td.num { text-align: right; white-space: nowrap; }
.doc th:first-child, .doc td:first-child { padding-left: 0; }
@media (max-width: 760px) {
.docs { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
.doc-list { display: none; }
.doc-select { display: block; }
}
/* 빈 상태 — 아직 없거나 불러오는 중. 무엇을 하면 채워지는지 한 줄 (굵게 b) */
.empty { color: var(--sub); font-size: 15px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.empty b { color: var(--ink); }
/* 숫자 — 고정폭, 표 칸이면 오른쪽 정렬 */
.num { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; white-space: nowrap; }
/* ── v2.1 — 사이트 부품 (랜딩·서비스 소개) ────────────────────
제목 단계를 고정한다: 첫 화면 44px → 섹션 28px → 항목 17px → 본문 16px (휴대폰 32 → 23). 크기를 화면 폭에 따라 늘리지 않는다.
모서리 없음 · 선으로 나눔 · 버튼도 각진 상자. 와 함께 쓴다. */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; align-items: center; gap: 20px; padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.topbar .name { font-size: 14.5px; font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; font-size: 14px; }
.topbar nav a { color: var(--sub); text-decoration: none; }
.topbar .name, .topbar nav a { display: inline-flex; align-items: center; min-height: 32px; } /* 누를 곳 32px */
.topbar nav a:hover { color: var(--ink); }
.btn { display: inline-block; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; padding: 12px 20px; border: 1px solid var(--hi-ink); background: var(--hi-ink); color: var(--on-hi); text-decoration: none; cursor: pointer; } /* 흰 글자 5.4:1 */
.btn:hover { background: color-mix(in srgb, var(--hi-ink) 82%, #000); border-color: color-mix(in srgb, var(--hi-ink) 82%, #000); }
.btn.line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.small { font-size: 13.5px; padding: 7px 14px; }
.btn:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
.eyebrow { font-size: 13.5px; font-weight: 800; color: var(--hi-ink); margin-bottom: 12px; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding: 56px 0 48px; }
.hero h1 { font-size: 44px; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.hero h1 span { color: var(--hi); }
.hero .lead { font-size: 18px; line-height: 1.65; color: var(--sub); margin: 18px 0 22px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 14px; color: var(--sub); }
.facts b { font-size: 17px; font-weight: 800; color: var(--ink); margin-right: 6px; }
.sec { padding: 64px 0 8px; border-top: 1px solid var(--rule); }
.sec:first-of-type { border-top: 0; }
.sec-title { font-size: 28px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; color: var(--ink); margin-bottom: 12px; }
.sec-lead { font-size: 16.5px; line-height: 1.7; color: var(--sub); max-width: 720px; margin-bottom: 26px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.card { border-top: 2px solid var(--ink); padding-top: 14px; }
.card .tag { font-size: 12.5px; font-weight: 800; color: var(--hi-ink); margin-bottom: 6px; }
.card h3 { font-size: 17px; font-weight: 800; line-height: 1.45; margin: 0 0 6px; }
.card p { font-size: 15px; color: var(--sub); margin-bottom: 0; }
.steps { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.steps > li { counter-increment: st; border-top: 2px solid var(--ink); padding-top: 12px; font-size: 15px; color: var(--sub); }
.steps > li::before { content: counter(st, decimal-leading-zero); display: block; font-size: 13px; font-weight: 800; color: var(--hi-ink); margin-bottom: 4px; }
.steps > li b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; color: var(--hi-ink); }
.faq details[open] summary::after { content: "−"; }
.faq details > :not(summary) { padding: 0 0 16px; font-size: 15px; color: var(--sub); }
.letter { max-width: 640px; }
.letter p { font-size: 16.5px; line-height: 1.95; margin-bottom: 18px; }
.letter .sign { color: var(--sub); font-size: 15px; margin-top: 26px; }
.price.big .amt { font-size: 44px; }
@media (max-width: 760px) {
.hero { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 32px; }
.hero h1 { font-size: 32px; }
.sec { padding: 44px 0 4px; }
.sec-title { font-size: 23px; }
.price.big .amt { font-size: 32px; }
.topbar nav { display: none; }
.topbar .btn { margin-left: auto; } /* 메뉴가 숨으면 버튼을 오른쪽 끝으로 */
}
/* ── v2.1 — 대시보드 부품 ────────────────────────────────
제목 단계는 문서와 같다(표지 31 → 장 21 → 항목 17). 카드도 둥근 상자가 아니라 굵은 윗선 한 줄. */
.entities { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px 32px; margin: 6px 0 8px; }
.entity { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.entity.slot { border-top-style: dashed; border-top-color: var(--rule); color: var(--sub); }
.entity .head { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.mark { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.entity.slot .mark { background: transparent; border: 1px dashed var(--mute); color: var(--mute); }
.entity .name { font-size: 17px; font-weight: 800; line-height: 1.35; }
.entity .name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; } /* 이름이 곧 가게 링크 — 가장 큰 누를 곳 */
.entity .name a:hover { color: var(--hi-ink); }
.entity .name a::after { content: " ↗"; font-size: 13px; color: var(--hi-ink); }
.entity .kind { font-size: 13px; color: var(--sub); }
.linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; font-size: 14px; } /* 구분점 대신 간격 — 줄이 바뀌어도 점이 줄 앞에 오지 않는다 */
.linkrow a { color: var(--hi-ink); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; } /* 누를 곳 32px 이상 */
.linkrow a:hover { text-decoration: underline; }
.linkrow span { color: var(--sub); }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; margin: 0; }
.mini > div { min-width: 0; }
.mini dt { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.mini dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; } /* 이름(17)보다 작게 — 카드 안 위계 */
.mini dd small { font-size: 12px; font-weight: 700; color: var(--mute); margin-left: 4px; }
.entity .next { font-size: 13.5px; line-height: 1.6; color: var(--sub); border-top: 1px solid var(--rule); padding-top: 10px; }
.entity .next b { color: var(--ink); }
.chip.line { background: transparent; border-style: dashed; }
@media (max-width: 420px) { .mini { grid-template-columns: repeat(2, 1fr); } }
/* ── 인쇄 — A4, 늘 라이트, 도구 숨김, 도표·표가 쪽 사이에서 잘리지 않게 ──
쪽 번호는 여기서, 문서 제목·날짜 꼬리와 링크 주소 표기는 house.js 가 더한다. */
@page { size: A4; margin: 16mm 15mm 18mm; }
@page { @bottom-right { content: counter(page) " / " counter(pages); font-family: "Noto Sans KR", sans-serif; font-size: 8.5pt; color: #736e66; } }
@media print {
:root, :root[data-theme] {
--paper: #ffffff; --soft: #f6f3ee; --rule: #e4dfd6; --rule-soft: #e7e1d6;
--ink: #1f1d1a; --sub: #5f5a52; --mute: #736e66;
--hi: var(--accent); --hi-ink: color-mix(in srgb, var(--accent) 86%, #000); --on-hi: #ffffff;
--map-stroke: #d8d1c5; --track-hover: #efe8de;
color-scheme: light;
}
body { padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.switches, .switch, .print-btn, .views, .doc-list, .doc-select, .no-print, .topbar, .btn { display: none !important; }
.view[hidden] { display: block !important; }
.docs { display: block; }
.exhibit, .figures, .qfigs, .price, .callout, .dl, .timeline > li, .pts > li, .hang > li, .empty, tr { break-inside: avoid; }
.ch-head, h3, .doc h2, .ex-title, .sec-title { break-after: avoid; }
.faq details { break-inside: avoid; }
.scroll { overflow: visible; }
.geo.pre .kmap .bub circle.dot { transform: none; }
.geo.pre .kmap .bub .bl { opacity: 1; }
:root:has(meta[name="house-layout"][content="sheet"]) .overview { grid-template-columns: 1fr 1fr; column-gap: 36px; }
:root:has(meta[name="house-layout"][content="sheet"]) .pts { grid-template-columns: 1fr 1fr; }
.overview > div { break-inside: avoid; }
a[data-url]::after { content: " (" attr(data-url) ")"; font-size: .78em; font-weight: 400; color: var(--mute); word-break: break-all; }
}