/* landit — 실제 사이트 스타일. 수치 근거: ../../DESIGN.md, 시안: ../../comps */

@font-face { font-family: "Bricolage"; src: url(../fonts/BricolageGrotesque-Var-latin.woff2) format("woff2"); font-weight: 200 800; font-display: block; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url(../fonts/InstrumentSerif-Italic-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 500; src: url(../fonts/Pretendard-Medium-sub.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 600; src: url(../fonts/Pretendard-SemiBold-sub.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 700; src: url(../fonts/Pretendard-Bold-sub.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 800; src: url(../fonts/Pretendard-ExtraBold-sub.woff2) format("woff2"); font-display: swap; }

:root {
  --paper: #EDEAE3; --ink: #121210; --signal: #C8FF2E; --mute: #8C877D; --soft: #C9C4B9;
  --line-dark: rgba(237,234,227,.2);
  --f-display: "Bricolage", "Pretendard", system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-text: "Pretendard", system-ui, -apple-system, sans-serif;
  /* 8px 격자: 바깥 여백 · 위 · 아래 (안전 영역 포함) · 모서리 요소 높이 */
  --m: max(32px, env(safe-area-inset-left), env(safe-area-inset-right));
  --nt: max(24px, env(safe-area-inset-top));
  --nb: max(24px, env(safe-area-inset-bottom));
  --ch: 44px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vh: 100vh;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
@media (max-width: 768px) { :root { --m: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); --nt: max(16px, env(safe-area-inset-top)); --nb: max(16px, calc(env(safe-area-inset-bottom) + 4px)); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
/* 세로 스크롤 없음: 4쪽을 가로로 넘기는 구조 */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--paper); color: var(--ink); font-family: var(--f-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-break: keep-all; font-kerning: normal; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; -webkit-user-drag: none; user-select: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--signal); color: var(--ink); }
.contact ::selection { background: var(--ink); color: var(--signal); }

/* 모서리 요소 색: 각자 data-theme (자기 아래 깔린 쪽 기준, JS가 매 프레임 판정) */
[data-theme="paper"] { --fg: var(--ink); --bg: var(--paper); --line: var(--ink); }
[data-theme="dark"]  { --fg: var(--paper); --bg: var(--ink); --line: rgba(237,234,227,.42); }
[data-theme="lime"]  { --fg: var(--ink); --bg: var(--signal); --line: var(--ink); }

/* ───────── 상단: 왼쪽 로고 · 오른쪽 선 알약 (모든 크기·모든 쪽 같은 체계) ───────── */
.nav { position: fixed; z-index: 50; left: var(--m); right: var(--m); top: var(--nt); height: var(--ch); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.nav > * { pointer-events: auto; }
.logo { color: var(--fg); font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; font-variation-settings: "opsz" 96; line-height: var(--ch); transition: color .2s, opacity .25s; }
.logo:focus-visible { outline-offset: 2px; }
.pill { position: relative; display: flex; height: var(--ch); padding: 3px; border-radius: 999px; color: var(--fg); background: transparent; box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, box-shadow .2s; }
.pill a { position: relative; z-index: 1; display: grid; place-items: center; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; line-height: 1; transition: color .25s, opacity .25s; }
.pill a.on { color: var(--bg); }
.pill::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--pw, 0px); border-radius: 999px; background: var(--fg); transform: translate3d(var(--px, 4px), 0, 0); opacity: var(--po, 0); transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .25s, background-color .2s; }
.pill a:focus-visible { outline-offset: -2px; border-radius: 999px; }
@media (hover: hover) {
  .logo:hover { opacity: .55; }
  .pill a:not(.on):hover { opacity: .55; }
}

/* ───────── 거대 단어 공용 (폭 맞춤은 JS) ───────── */
.fit { white-space: nowrap; font-family: var(--f-display); font-weight: 800; font-variation-settings: "opsz" 96; line-height: 0.8; font-size: 100px; }
.fit-in { display: inline-block; }
.fit b { display: inline-block; font-weight: inherit; }
/* 마스크: 아래쪽을 기준선 바로 밑에서 자름 → 글자가 그 아래에서 올라옴 (투명도 안 씀) */
.mask { clip-path: inset(-0.4em -0.2em 0 -0.2em); }

/* ───────── 쪽 넘김 판 ───────── */
/* 각 쪽은 화면 크기 그대로, transform으로만 움직인다 */
.pages { position: fixed; inset: 0; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; background: var(--ink); }
.page { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; will-change: transform; transform-origin: 50% 50%; contain: layout paint; }
.page-dim { position: absolute; inset: 0; z-index: 30; background: #000; opacity: 0; pointer-events: none; }

/* ───────── 1. 첫 화면 ───────── */
.hero { background: var(--paper); }
.hero-word { position: absolute; left: 0; right: 0; top: 50%; text-align: center; letter-spacing: -0.02em; transform: translate3d(0, -46%, 0); }
.hero-word b.kn { margin-right: 0.03em; } /* n–d 쌍: 줄기와 볼이 붙지 않게 */
.js .hero-word b { transform: translate3d(0, 105%, 0); }
.js .nav, .js .pg-arrows { opacity: 0; }
/* 입장 로딩: 같은 자리의 연한 회색 단어 (먹색 단어가 그 위로 차오름) */
.hero-word .fit-in.mask { position: relative; z-index: 1; }
.hero-word .hero-ghost { position: absolute; left: 0; top: 0; width: 100%; display: block; color: var(--soft); pointer-events: none; }
.hero-word .hero-ghost b { transform: none; }
/* 모바일: 단어를 세워 메뉴 띠~화살표 띠 사이 높이를 채움 (아래→위로 읽힘) */
.hero-word.vert { left: 50%; right: auto; top: var(--y0, 50%); width: var(--len, 600px); transform: translate3d(-50%, -50%, 0) rotate(-90deg) translate3d(0, 4%, 0); }

/* ───────── 2. 진열대 ───────── */
.showroom { background: var(--paper); }
.sr-inner { position: absolute; inset: 0; transform-origin: 50% 40%; }
.sr-word { position: absolute; left: 0; right: 0; top: 0; text-align: center; letter-spacing: -0.025em; z-index: 1; }
.sr-word .fit-in { transform: translateX(-0.0125em); }
.stage { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.stage.dragging, .stage.dragging .scr { cursor: grabbing; }
/* 화면 두 장의 위치·크기는 JS가 변수로 (--dx·--dy·--dw·--dh = 데스크톱, --mx·--my·--mw·--mh = 모바일) */
.dev { position: absolute; inset: 0; will-change: transform; }
.set { position: absolute; inset: 0; display: block; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.set + .set { opacity: 0; visibility: hidden; } /* JS 전: 첫 작업만 */
.scr { position: absolute; display: block; pointer-events: auto; cursor: pointer; will-change: transform, opacity; }
.scr.desk { left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh); }
.scr.mob { left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); z-index: 1; }
/* 테두리 없는 화면: 작은 모서리 + 바닥에 깔리는 실제 그림자 두 겹 + 가장자리 1px 먹 선(흰 화면도 종이와 구분) */
.face { position: absolute; inset: 0; overflow: hidden; border-radius: var(--dr, 8px); background: #dcd8cf; transform: translateZ(0); isolation: isolate;
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
  box-shadow: 0 1px 2px rgba(18,18,16,.10), 0 10px 24px -12px rgba(18,18,16,.22), 0 40px 80px -40px rgba(18,18,16,.40); }
.mob .face { border-radius: var(--mr, 22px);
  box-shadow: 0 1px 2px rgba(18,18,16,.14), 0 14px 28px -12px rgba(18,18,16,.30), 0 44px 80px -30px rgba(18,18,16,.50); }
.face::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(18,18,16,.10); pointer-events: none; }
.face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
.set:focus-visible { outline: none; }
.set:focus-visible .desk .face { outline: 2px solid var(--ink); outline-offset: 8px; }
@media (hover: hover) {
  .set:hover .desk .face { transform: translate3d(0, -4px, 0); }
  .set:hover .mob .face { transform: translate3d(0, -8px, 0); box-shadow: 0 1px 2px rgba(18,18,16,.14), 0 18px 32px -12px rgba(18,18,16,.32), 0 56px 90px -30px rgba(18,18,16,.52); }
}
/* 아래 정보 줄: 브랜드 이름 = 작업 전환 버튼. 지금 작업은 먹, 나머지는 흐리게. 이름 위 선이 자동 넘김까지 차오름 */
.sr-info { position: absolute; left: var(--m); right: var(--m); bottom: 24px; border-top: 1px solid var(--ink); padding-top: 14px; height: 46px; z-index: 3; }
.sr-tabs { display: flex; justify-content: center; gap: 44px; height: 31px; }
.sr-tab { position: relative; height: 31px; padding: 0 2px; color: var(--soft); font-family: var(--f-display); font-weight: 800; font-variation-settings: "opsz" 48; font-size: 34px; letter-spacing: -0.04em; line-height: .9; white-space: nowrap; transition: color .35s; -webkit-tap-highlight-color: transparent; }
.sr-tab.on { color: var(--ink); }
.sr-tab .m { display: block; clip-path: inset(-0.4em -0.2em -0.1em -0.2em); }
.sr-tab .t { display: inline-block; }
.sr-tab .pr { position: absolute; left: 0; right: 0; top: -16px; height: 3px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sr-tab::after { content: ""; position: absolute; left: -12px; right: -12px; top: -16px; bottom: -10px; } /* 누르는 영역 넓힘 */
.sr-tab:focus-visible { outline-offset: 6px; }
@media (hover: hover) { .sr-tab:not(.on):hover { color: var(--mute); } }

/* ───────── 3. 작업 목록: 실제 작업 둘이 화면을 나눠 갖고, soon은 맨 아래 한 줄 ───────── */
.work { background: var(--ink); color: var(--paper); padding: calc(var(--nt) + var(--ch) + 40px) var(--m) calc(var(--nb) + var(--ch) + 40px); }
.rows { position: relative; }
.row { position: relative; display: grid; grid-template-columns: 1fr 48px var(--thw, 140px); column-gap: 32px; align-items: center; height: var(--rowh, 300px); }
.row .ln { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-dark); transform-origin: 0 0; }
.row .ln.b { top: auto; bottom: 0; }
.row .nm { display: block; clip-path: inset(-0.4em -0.3em 0 -0.1em); font-family: var(--f-display); font-weight: 800; font-variation-settings: "opsz" 96; font-size: var(--nmf, 120px); letter-spacing: -0.02em; line-height: .8; white-space: nowrap; transition: transform .7s var(--ease-out); }
.row .nm .mk { display: inline-block; transition: color .3s; }
.row .ar { justify-self: end; width: 32px; height: 32px; color: var(--paper); transition: color .3s, transform .6s var(--ease-out); }
.row .ar svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.row .th { position: relative; width: var(--thw, 140px); height: calc(var(--rowh, 300px) - 48px); border-radius: 12px; overflow: hidden; background: #26261f; transform: translateZ(0); }
.row .th video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.row .th::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(237,234,227,.12); pointer-events: none; }
.row.dim { grid-template-columns: 1fr; height: var(--soonh, 72px); }
.row.dim .nm { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 32px; letter-spacing: 0; line-height: 1; color: rgba(237,234,227,.32); clip-path: inset(-0.4em -0.3em -0.3em -0.1em); }
.row.live { cursor: pointer; }
.row.live:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: 0; }
@media (hover: hover) {
  .row.live:hover .nm, .row.live:focus-visible .nm { transform: translate3d(16px, 0, 0); }
  .row.live:hover .mk, .row.live:focus-visible .mk { color: var(--signal); }
  .row.live:hover .ar, .row.live:focus-visible .ar { color: var(--signal); transform: translate3d(4px, -4px, 0); }
}

/* ───────── 4. 문의: 이메일 자체가 화면 폭 거대 링크, DM은 아래 보조 링크 ───────── */
.contact { background: var(--signal); color: var(--ink); }
.ct { position: absolute; left: var(--m); right: var(--m); top: 50%; transform: translate3d(0, -42%, 0); }
.mail { display: inline-block; }
.mail-t { position: relative; display: inline-block; letter-spacing: -0.015em; line-height: .86; }
.mline { display: inline-block; clip-path: inset(-0.4em -0.2em -0.2em -0.2em); }
.ml { display: inline-block; }
.js .ml, .js .dm-t { transform: translate3d(0, 125%, 0); }
.ul { position: absolute; left: 0; bottom: -0.16em; height: max(2px, 0.035em); background: currentColor; transform-origin: 0 0; }
.dm { display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; font-family: var(--f-display); font-weight: 700; font-variation-settings: "opsz" 48; font-size: 28px; letter-spacing: -0.015em; line-height: 1; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .55s var(--ease-out); }
.dm .mask { display: inline-block; clip-path: inset(-0.4em -0.2em -0.25em -0.2em); }
.dm .dm-t { display: inline-block; }
.dm svg { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
@keyframes ulSweep { 0% { transform: scaleX(1); transform-origin: 100% 0; } 45% { transform: scaleX(0); transform-origin: 100% 0; } 45.1% { transform: scaleX(0); transform-origin: 0 0; } 100% { transform: scaleX(1); transform-origin: 0 0; } }
@media (hover: hover) {
  .mail:hover .ul, .mail:focus-visible .ul { animation: ulSweep .9s var(--ease-out) both; }
  .dm:hover { background-size: 100% 1px; }
  .dm:hover svg { transform: translate3d(3px, -3px, 0); }
}
.mail:focus-visible { outline-offset: 12px; }

/* 클릭 전환: 화면 틀이 뷰포트로 커짐 */
.xp { position: fixed; z-index: 70; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; contain: strict; background: #c7d0d6; pointer-events: none; }
.xp.on { visibility: visible; pointer-events: auto; }
.xp img { position: absolute; left: 0; top: 0; max-width: none; }
.xp video.xp-v { position: absolute; left: 0; top: 0; height: auto; max-width: none; object-fit: fill; pointer-events: none; }
.showroom.blur .sr-inner, .work.blur .rows { will-change: filter, transform; }

/* ───────── 모바일 (따로 설계) ───────── */
@media (max-width: 768px) {
  .logo { font-size: 22px; }
  .sr-info { border-top: 0; padding-top: 0; height: 26px; bottom: auto; top: var(--name-top, 748px); }
  .sr-tabs { gap: 28px; height: 26px; }
  .sr-tab { height: 26px; font-size: 28px; }
  /* 모바일: 이름 위 선 = 자기 몫의 진행 막대 (흐린 선 위로 먹 선이 차오름) */
  .sr-tab::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 2px; background: var(--soft); }
  .sr-tab .pr { top: -14px; height: 2px; }
  .sr-tab::after { top: -20px; bottom: -12px; }
  .face { box-shadow: 0 1px 2px rgba(18,18,16,.10), 0 8px 18px -10px rgba(18,18,16,.24), 0 24px 44px -24px rgba(18,18,16,.36); }
  .mob .face { box-shadow: 0 1px 2px rgba(18,18,16,.14), 0 12px 24px -10px rgba(18,18,16,.32), 0 32px 56px -24px rgba(18,18,16,.48); }
  .work { padding: calc(var(--nt) + var(--ch) + 24px) var(--m) calc(var(--nb) + var(--ch) + 24px); }
  .row { grid-template-columns: 1fr var(--thw, 120px); column-gap: 16px; }
  .row .ar { display: none; }
  .row .th { height: calc(var(--rowh, 300px) - 32px); border-radius: 10px; }
  .row.dim .nm { font-size: 26px; }
  .row.live:active .mk { color: var(--signal); }
  .ct { top: auto; bottom: calc(var(--nb) + var(--ch) + 64px); transform: none; }
  .mline { display: block; }
  .dm { margin-top: 32px; font-size: 20px; }
}
@media (max-width: 768px) and (max-height: 700px) { .dm { margin-top: 24px; } }

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
  .row .nm, .row .ar, .pill::before, .sr-tab, .face, .dm, .dm svg { transition-duration: .2s !important; }
  .set:hover .desk .face, .set:hover .mob .face { transform: none; }
  .sr-tab .pr, .sr-tab::before { display: none; }
  .mail:hover .ul { animation: none !important; }
}


/* ───────── 쪽 넘김 화살표: 1px 선 원 (메뉴 알약과 같은 높이·선·색 체계) ───────── */
.pg-arrow { position: fixed; z-index: 55; bottom: var(--nb); width: var(--ch); height: var(--ch); border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.pg-arrow.prev { left: var(--m); } .pg-arrow.next { right: var(--m); }
.pg-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
@media (hover: hover) {
  .pg-arrow:hover { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
  .pg-arrow.next:hover svg { transform: translate3d(3px, 0, 0); } .pg-arrow.prev:hover svg { transform: translate3d(-3px, 0, 0); }
}
.pg-arrow:active svg { transition-duration: .1s; }
.pg-arrow:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 50%; }
.pg-arrows.hide { opacity: 0 !important; pointer-events: none; }
@media (max-width: 768px) { .pg-arrow svg { width: 22px; height: 22px; } }