/* ============================================================
   KWONMO — layout.css
   공통 골격 + 5개 레이아웃(#1~#5). data-layout 으로 분기.
   ============================================================ */

/* ---------- 토큰 ---------- */
:root {
  --header-h: 3.25rem;
  --fab-size: 3.5rem;
  --fab-gap: 1.25rem;
  --menu-alpha: 0.7;          /* 슬라이드 반투명: 투명도 30% = 불투명도 70% */
  --content-max: 67.5rem;     /* #3 중앙 콘텐츠 최대폭 */
  --ad-w: 300px;               /* 예외 ②: 애드센스 규격은 구글이 px로 고정한 외부 규격. 폰트 크기에 따라 변하면 안 됨 */
  --divider-w: .625rem;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --hairline: 1px;             /* 예외 ①: 테두리·아웃라인 전용. rem으로 바꾸면 확대 환경에서 테두리가 같이 굵어짐 */
  --focus-ring: .125rem;
  --sp-xs: .25rem;
  --sp-sm: .5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2.5rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-pill: 100vmax;
  --fab-drag-max: 8.75rem;         /* 기존 JS ±140px 클램프를 CSS로 이관 */
  --fab-swipe-threshold: 3.125rem; /* 기존 JS 50px 임계값. JS가 getComputedStyle 로 파싱 */
  --tap-slop: .625rem;             /* 기존 JS 10px 탭 판정 여유. JS가 파싱 */

  --chrome-h: 0rem;            /* 데모 전환 바 등 헤더 아래 추가 UI 높이. 기본 0 */
}
body:has(.demo-switch) { --chrome-h: 2.5625rem; }   /* 데모 전환 바가 있을 때만 */

[data-theme="light"] {
  --bg:#f5f4f1; --surface:#ffffff; --text:#1c1b19; --text-dim:#6b6862;
  --line:#e3e0d9; --accent:#3a6ea5; --menu-bg:245,244,241; --ad-bg:#ecebe6;
  --panel-a:#eef1f5; --panel-b:#f3efe9; --panel-c:#eef3ee;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:#17181a; --surface:#202225; --text:#e8e6e2; --text-dim:#9a9791;
  --line:#303236; --accent:#6fa3d8; --menu-bg:23,24,26; --ad-bg:#1d1e21;
  --panel-a:#1e2226; --panel-b:#242220; --panel-c:#1e231e;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  line-height: 1.6; -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}

/* ================= HEADER (공통) ================= */
.header {
  position: sticky; top: 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-md); background: var(--surface); border-bottom: var(--hairline) solid var(--line);
}
.logo { font-weight: 800; letter-spacing:.12em; font-size: 1.05rem; }
.header-right { display: flex; align-items: center; gap: var(--sp-sm); }

/* 데스크톱 헤더 메뉴 — 기본 숨김, 데스크톱에서만 노출 */
.header-nav { display: none; gap: .125rem; margin-right: .375rem; }
.header-nav a {
  padding: .375rem .75rem; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--text-dim); font-size: .9rem;
}
.header-nav a:hover { background: var(--bg); color: var(--text); }

.icon-btn {
  width: 2.375rem; height: 2.375rem; display: grid; place-items: center;
  background: none; border: none; cursor: pointer; color: var(--text);
  border-radius: var(--radius-sm); font-size: 1.15rem;
}
.icon-btn:hover { background: var(--bg); }
.icon-btn:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-ring); }
[data-theme="light"] .i-light { display: none; }
[data-theme="dark"]  .i-dark  { display: none; }

/* ================= 데모 전환 바 (실제 서버에선 제거) ================= */
.demo-switch {
  display: flex; gap: .375rem; justify-content: center;
  padding: var(--sp-sm); background: var(--surface); border-bottom: var(--hairline) solid var(--line);
}
.demo-switch a {
  font-size: .8rem; color: var(--text-dim); text-decoration: none;
  padding: .3125rem .75rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-pill);
}
.demo-switch a.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ================= STAGE (콘텐츠 래퍼) ================= */
.stage { position: relative; }

/* role 기반 표시 제어: data-layout 에 따라 basic / split 만 노출 */
[data-layout="basic"]  [data-role="split"] { display: none; }
[data-layout="split2"] [data-role="basic"],
[data-layout="split3"] [data-role="basic"] { display: none; }

/* ================= 기본 레이아웃 (#1~#3) ================= */
.page {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.ad { display: none; }
.ad-inner {
  position: sticky; top: calc(var(--header-h) + var(--sp-md));
  background: var(--ad-bg); border: var(--hairline) dashed var(--line); border-radius: .625rem;
  aspect-ratio: 1 / 2; height: auto; display: grid; place-items: center;
  color: var(--text-dim); font-size: .8rem; letter-spacing: .05em;
}

.main { position: relative; min-width: 0; padding: 1.25rem var(--sp-md) 3.75rem; }
.main > h1 { font-size: 1.4rem; margin-bottom: .25rem; }
.main > .sub { color: var(--text-dim); font-size: .9rem; margin-bottom: 1.25rem; }

/* 풀스크린 토글: 콘텐츠 소속, 우상단 sticky */
.fullscreen-btn {
  position: sticky; top: calc(var(--header-h) + .625rem); float: right;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-dim); font-size: 1rem; z-index: 5;
}

/* Masonry (CSS columns) */
.masonry { column-count: 1; column-gap: var(--sp-md); }
.card {
  break-inside: avoid; margin-bottom: var(--sp-md); overflow: hidden;
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--sp-md);
}
.card .thumb { margin: calc(var(--sp-md) * -1) calc(var(--sp-md) * -1) .75rem; height: 0; background: var(--accent); opacity: .18; }
.card h3 { font-size: 1.05rem; margin-bottom: .375rem; }
.card p { color: var(--text-dim); font-size: .9rem; }
.card.h1 .thumb { padding-top: 45%; }
.card.h2 .thumb { padding-top: 75%; }
.card.h3 .thumb { padding-top: 30%; }
.card.h4 .thumb { padding-top: 60%; }

.footer {
  padding: var(--sp-lg) var(--sp-md); border-top: var(--hairline) solid var(--line);
  background: var(--surface); color: var(--text-dim); font-size: .85rem; text-align: center;
}
[data-layout="split2"] .footer,
[data-layout="split3"] .footer { display: none; }

/* 풀스크린 상태 */
body.is-fullscreen .header,
body.is-fullscreen .demo-switch { display: none; }
body.is-fullscreen .fullscreen-btn { top: .625rem; }

/* ================= 특수 레이아웃 (#4·#5) ================= */
.split {
  display: flex; width: 100%;
  height: calc(100dvh - var(--header-h) - var(--chrome-h));
}
.panel { overflow-y: auto; padding: 1.25rem; min-width: 0; }
.panel h2 { font-size: 1.1rem; margin-bottom: .625rem; color: var(--accent); }
.panel p { color: var(--text-dim); font-size: .9rem; margin-bottom: .625rem; }

.split[data-panels="2"] { --panel-1: 50%;      --panel-2: 50%; }
.split[data-panels="3"] { --panel-1: 33.3333%; --panel-2: 33.3333%; --panel-3: 33.3333%; }

.panel:nth-child(1) { flex: 0 0 var(--panel-1); background: var(--panel-a); }
.panel:nth-child(3) { flex: 0 0 var(--panel-2); background: var(--panel-b); }
.panel:nth-child(5) { flex: 0 0 var(--panel-3); background: var(--panel-c); }

.divider {
  flex: 0 0 var(--divider-w); cursor: col-resize; position: relative;
  background: var(--line); transition: background .15s;
  touch-action: none;   /* 디바이더 드래그 전용. .split 전체에 걸면 .panel 의 터치 스크롤을 막게 됨 */
}
.divider::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: .1875rem; height: var(--sp-xl);
  border-radius: .125rem; background: var(--text-dim);
}
.divider:hover, .divider.dragging { background: var(--accent); }
.divider.dragging::after { background: #fff; }

.mobile-block {
  display: none; place-items: center; text-align: center; padding: var(--sp-xl);
  height: calc(100dvh - var(--header-h) - var(--chrome-h)); color: var(--text-dim);
}
.mobile-block p { font-size: 1rem; }

/* ================= 햄버거 FAB + 슬라이드 ================= */
.fab {
  position: fixed; bottom: var(--fab-gap); z-index: 50;
  width: var(--fab-size); height: var(--fab-size); border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 1.4rem;
  box-shadow: 0 var(--sp-xs) var(--sp-md) rgba(0,0,0,.25);
  --drag-x: 0px;   /* 예외: JS가 넘기는 포인터 이동량. 손가락 1:1 추종이라 px 아니면 어긋남 */
  transform: translateX(clamp(calc(var(--fab-drag-max) * -1), var(--drag-x), var(--fab-drag-max)));
  transition: transform .25s var(--ease), background .15s var(--ease);
  touch-action: none;
}
[data-hand="right"] .fab { right: var(--fab-gap); }
[data-hand="left"]  .fab { left: var(--fab-gap); }
.fab.fab-dragging { transition: none; }
.fab.fab-armed { background: #d9773a; }

.hand-hint {
  position: fixed; bottom: calc(var(--fab-gap) + var(--fab-size) + var(--sp-sm)); z-index: 50;
  font-size: .7rem; color: var(--text-dim);
  background: var(--surface); border: var(--hairline) solid var(--line);
  padding: .1875rem var(--sp-sm); border-radius: .375rem; opacity: 0; transition: opacity .2s; pointer-events: none;
}
[data-hand="right"] .hand-hint { right: var(--fab-gap); }
[data-hand="left"]  .hand-hint { left: var(--fab-gap); }
body.dragging .hand-hint { opacity: 1; }

.menu-slide {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(var(--menu-bg), var(--menu-alpha));
  backdrop-filter: blur(var(--sp-sm)); -webkit-backdrop-filter: blur(var(--sp-sm));
  padding: calc(var(--header-h) + 1.25rem) var(--sp-lg) 7.5rem; overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform .28s var(--ease), opacity .28s var(--ease); opacity: 0;
}
[data-hand="right"] .menu-slide { transform: translateX(100%); }
[data-hand="left"]  .menu-slide { transform: translateX(-100%); }
body.menu-open .menu-slide { transform: translateX(0); opacity: 1; }
.menu-slide h3 { font-size:.8rem; letter-spacing:.1em; color:var(--text-dim); margin-bottom:var(--sp-sm); text-transform:uppercase; }
.menu-list { list-style: none; }
.menu-list li a { display:block; padding:.9375rem var(--sp-sm); border-bottom:var(--hairline) solid var(--line); color:var(--text); text-decoration:none; font-size:1.1rem; }
.menu-list li a:active { color: var(--accent); }

/* ================= 브레이크포인트 ================= */

/* #2 태블릿 & 접힌 노트북: 2열 masonry (640px → 40em) */
@media (min-width: 40em) {
  .masonry { column-count: 2; }
}

/* #3 데스크톱: 2열 유지 + 중앙 정렬 + 좌우 AD + 헤더 메뉴 (1180px → 73.75em) */
@media (min-width: 73.75em) {
  .page {
    grid-template-columns: var(--ad-w) minmax(0, var(--content-max)) var(--ad-w);
    justify-content: center; gap: var(--sp-lg); padding: var(--sp-lg) var(--sp-lg) 0;
  }
  .ad { display: block; }
  .masonry { column-count: 2; }
  .header-nav { display: flex; }        /* 데스크톱: 헤더에 메뉴 노출 */
  .fab, .hand-hint { display: none; }   /* 데스크톱: 햄버거 없음 */
  [data-layout="basic"] .badge::after { content: "#3 데스크톱 · 2열 중앙 + AD"; }
}

/* 특수 레이아웃: 모바일 차단 (~767px → 47.9375em) */
@media (max-width: 47.9375em) {
  [data-layout="split2"] .split,
  [data-layout="split3"] .split { display: none; }
  [data-layout="split2"] .mobile-block,
  [data-layout="split3"] .mobile-block { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-slide, .fab { transition: none; }
}