/* ============================================================
   KWONMO — layout.css
   공통 골격 + 6개 레이아웃(#1~#6). 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 중앙 콘텐츠 최대폭 */
  --sidebar-w: 12rem;          /* #6 캔버스 좌측 고정 사이드 폭. 태블릿 192px, 데스크톱은 아래 브레이크포인트에서 288px로 재정의 */
  --ad-w: 300px;               /* 예외 ②: 애드센스 규격은 구글이 px로 고정한 외부 규격. 폰트 크기에 따라 변하면 안 됨 */
  --canvas-grid: 12px;         /* 예외 ③: 캔버스 그리드 한 칸 크기. 화면 좌표 기준 정사각형이라 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;
  --note-bg:#fdf6b2; --note-border:#e6d67a;
  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;
  --note-bg:#4a4423; --note-border:#6b6234;
  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 / canvas 중 하나만 노출 */
[data-layout="basic"]  [data-role="split"],
[data-layout="basic"]  [data-role="canvas"] { display: none; }
[data-layout="split2"] [data-role="basic"],
[data-layout="split3"] [data-role="basic"],
[data-layout="split2"] [data-role="canvas"],
[data-layout="split3"] [data-role="canvas"] { display: none; }
[data-layout="canvas"] [data-role="basic"],
[data-layout="canvas"] [data-role="split"] { 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,
[data-layout="canvas"] .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; }

/* ================= 특수 레이아웃 (#6) 캔버스 ================= */
/* 열/행 분할 없는 전체화면. 좌측 고정 사이드(빈 영역) + 우측 그리드 캔버스. */
.canvas-wrap {
  display: flex;
  height: calc(100dvh - var(--header-h) - var(--chrome-h));
}

.canvas-sidebar {
  flex: 0 0 var(--sidebar-w);
  background: var(--surface); border-right: var(--hairline) solid var(--line);
}

/* 선 두께는 --hairline 재사용(확대해도 흐려지지 않게). */
.canvas {
  position: relative;   /* 메모 좌표(x,y)의 기준점을 캔버스 자신으로 고정 (grid 원점과 일치시키기 위함) */
  flex: 1 1 auto; min-width: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--line) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--line) var(--hairline), transparent var(--hairline));
  background-size: var(--canvas-grid) var(--canvas-grid);
}

/* ---------- 메모 포스트잇 ----------
   위치(--note-x/y)·크기(--note-w/h)는 JS가 값만 주입, 실제 선언은 여기서 소유.
   --panel-N(특수 #4·#5)과 같은 방식. */
.note {
  position: absolute; left: 0; top: 0;
  transform: translate(var(--note-x, 0px), var(--note-y, 0px));
  width: var(--note-w, 12rem); height: var(--note-h, 9rem);
  background: var(--note-bg); border: var(--hairline) solid var(--note-border);
  border-radius: var(--radius-sm); box-shadow: 0 var(--sp-xs) var(--sp-sm) rgba(0,0,0,.15);
  display: flex; flex-direction: column; overflow: hidden;
  touch-action: none;
}
.note.dragging, .note.resizing { box-shadow: 0 var(--sp-sm) var(--sp-lg) rgba(0,0,0,.25); }

.note-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm); background: rgba(0,0,0,.05);
  cursor: grab; flex: 0 0 auto;
}
.note.dragging .note-header { cursor: grabbing; }
.note-title {
  font-size: .85rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-fold-btn {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font-size: .9rem; line-height: 1; padding: var(--sp-xs);
}

.note-body { padding: 0 var(--sp-sm) var(--sp-sm); overflow: auto; flex: 1 1 auto; }
.note-body p { font-size: .8rem; color: var(--text); }

/* 접힘: 너비는 그대로, 높이만 헤더 높이로 줄고 본문만 가림 (세로 리사이즈 최소값과 같은 개념) */
.note.is-collapsed { height: auto; }
.note.is-collapsed .note-body { display: none; }

/* 세로(높이)만 조절. 너비는 고정 — 줄이면 헤더는 남고 본문(.note-body)만 가려짐 */
.note-resize-handle {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--sp-sm);
  cursor: ns-resize;
}
.note-resize-handle::after {
  content: ""; position: absolute; left: 50%; bottom: .1875rem; transform: translateX(-50%);
  width: 1.25rem; height: var(--hairline); background: var(--note-border);
}
.note.is-collapsed .note-resize-handle { display: none; }

/* ================= 햄버거 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 + 헤더 메뉴 (1281px → 80.0625em, 1280px까지는 태블릿) */
@media (min-width: 80.0625em) {
  :root { --sidebar-w: 18rem; }         /* #6 캔버스 사이드: 데스크톱 288px (태블릿은 192px) */
  .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; }
}

/* 캔버스 메모: 모바일은 이동·리사이즈 없이 접힌 칩을 정렬만 (~639px → 39.9375em, #2 태블릿 경계와 동일) */
@media (max-width: 39.9375em) {
  .canvas-wrap { height: auto; }
  .canvas-sidebar { display: none; }   /* 좁은 화면에서 288px 고정폭은 자리만 차지함 */
  .canvas {
    display: flex; flex-wrap: wrap; align-content: flex-start;
    gap: var(--sp-sm); padding: var(--sp-md); height: auto;
    min-height: calc(100dvh - var(--header-h) - var(--chrome-h));
  }
  .note { position: static; transform: none; }
  .note:not(.is-collapsed) { width: 100%; height: auto; }
  .note-header { cursor: default; }
  .note-resize-handle { display: none; }
}

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