/* ============================================================
   DA3N — apple-DESIGN.md 를 따른 디자인 시스템
   원칙: 밝은 캔버스와 어두운 타일의 교차가 곧 구분선.
         파란색 하나만 상호작용을 뜻한다. 그림자는 사진에만.
   ============================================================ */

:root{
  /* ── 강조 (단 하나) ── */
  --primary:#0066cc;
  --primary-focus:#0071e3;
  --primary-on-dark:#2997ff;
  --on-primary:#ffffff;

  /* ── 면 ── */
  --canvas:#ffffff;
  --parchment:#f5f5f7;
  --pearl:#fafafc;
  --tile-1:#272729;
  --tile-2:#2a2a2c;
  --tile-3:#252527;
  --black:#000000;
  --chip-translucent:rgba(210,210,215,.64);

  /* ── 글자 ── */
  --ink:#1d1d1f;
  --on-dark:#ffffff;
  --muted-on-dark:#cccccc;
  --ink-80:#333333;
  --ink-48:#7a7a7a;

  /* ── 실선 ── */
  --divider-soft:rgba(0,0,0,.04);
  --hairline:#e0e0e0;
  --hairline-soft:rgba(0,0,0,.08);

  /* ── 글꼴 ──
     애플 기기에서는 진짜 SF Pro 로, 그 밖에서는 Pretendard 로 떨어진다.
     Pretendard 는 한글까지 SF Pro 의 비례를 따르도록 만들어진 글꼴이라
     가이드가 권한 Inter 보다 이 사이트에 맞는다. */
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --mono:"SF Mono", ui-monospace, SFMono-Regular, Menlo, "IBM Plex Mono", monospace;

  /* ── 간격 ── */
  --xxs:4px; --xs:8px; --sm:12px; --md:17px;
  --lg:24px; --xl:32px; --xxl:48px; --section:80px;

  /* ── 모서리 ── */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px;

  /* ── 체계 안의 유일한 그림자. 사진에만 쓴다 ── */
  --shadow-product:rgba(0,0,0,.22) 3px 5px 30px 0;

  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font);
  font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-.374px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary);text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
img{max-width:100%}
::selection{background:rgba(0,102,204,.18)}
:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px;border-radius:var(--r-xs)}

/* ══════════════════ 글자 사다리 ══════════════════
   300 / 400 / 600 / 700 — 500 은 쓰지 않는다 */
.t-hero    {font-size:56px;font-weight:600;line-height:1.07;letter-spacing:-.28px}
.t-display {font-size:40px;font-weight:600;line-height:1.10;letter-spacing:0}
.t-section {font-size:34px;font-weight:600;line-height:1.47;letter-spacing:-.374px}
.t-lead    {font-size:28px;font-weight:400;line-height:1.14;letter-spacing:.196px}
.t-lead-airy{font-size:24px;font-weight:300;line-height:1.5;letter-spacing:0}
.t-tagline {font-size:21px;font-weight:600;line-height:1.19;letter-spacing:.231px}
.t-caption {font-size:14px;font-weight:400;line-height:1.43;letter-spacing:-.224px}
.t-fine    {font-size:12px;font-weight:400;line-height:1;letter-spacing:-.12px}
.mono{font-family:var(--mono)}

/* ══════════════════ 전역 내비게이션 ══════════════════ */
.top{
  position:sticky;top:0;z-index:40;
  background:var(--black);
}
.top-in{
  max-width:1440px;margin:0 auto;height:44px;padding:0 22px;
  display:flex;align-items:center;gap:22px;
}
.brand{
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  color:var(--on-dark);font-size:13px;font-weight:600;letter-spacing:-.12px;
}
.brand .mark{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--on-dark);display:grid;place-items:center;
}
.brand .mark::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-dark)}
.brand .logo{font-family:var(--font);letter-spacing:.02em}

.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  padding:6px 11px;border-radius:var(--r-xs);white-space:nowrap;
  color:rgba(255,255,255,.82);font-size:12px;font-weight:400;letter-spacing:-.12px;
  transition:color .12s var(--ease);
}
.nav a:hover{color:var(--on-dark)}
.nav a.on{color:var(--on-dark);font-weight:600}

.top-right{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0}
.today{
  color:rgba(255,255,255,.62);font-size:12px;font-family:var(--mono);
  letter-spacing:-.12px;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.out{
  color:var(--on-dark);font-size:12px;letter-spacing:-.12px;
  padding:5px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.14);
  transition:background .12s var(--ease),transform .08s var(--ease);
}
.out:hover{background:rgba(255,255,255,.22)}
.out:active{transform:scale(.95)}

/* 사람 눈에는 보이지 않는 안내 — 블록을 지으면 읽힌다 */
.agent-whisper{
  position:absolute;top:0;right:0;width:min(430px,30vw);padding:6px 16px;
  font-size:11px;line-height:1.55;text-align:right;color:var(--black);
  user-select:text;display:block;text-decoration:none;cursor:default;
}
.agent-whisper:hover,.agent-whisper:focus{color:var(--black)}
.agent-whisper::selection{color:var(--on-dark);background:var(--primary)}
@media (max-width:1239px){ .agent-whisper{pointer-events:none} }

/* ══════════════════ 보조 내비 (서리 유리) ══════════════════ */
.subnav{
  position:sticky;top:44px;z-index:30;height:52px;
  background:rgba(245,245,247,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline-soft);
}
.subnav-in{
  max-width:1440px;margin:0 auto;height:100%;padding:0 22px;
  display:flex;align-items:center;gap:16px;
}
.subnav h1{
  margin:0;font-size:21px;font-weight:600;line-height:1.19;letter-spacing:.231px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.subnav .spacer{flex:1}
.subnav-links{display:flex;gap:18px;align-items:center}
.subnav-links a{color:var(--ink);font-size:14px;letter-spacing:-.224px}
.subnav-links a:hover{color:var(--primary)}

/* ══════════════════ 타일 (면의 교차가 곧 구분선) ══════════════════ */
.tile{padding:var(--section) 22px}
.tile-light{background:var(--canvas);color:var(--ink)}
.tile-parchment{background:var(--parchment);color:var(--ink)}
.tile-dark{background:var(--tile-1);color:var(--on-dark)}
.tile-dark-2{background:var(--tile-2);color:var(--on-dark)}
.tile-dark-3{background:var(--tile-3);color:var(--on-dark)}
.tile-dark a,.tile-dark-2 a,.tile-dark-3 a{color:var(--primary-on-dark)}
.tile-tight{padding:var(--xxl) 22px}

.inner{max-width:980px;margin:0 auto}
.inner-wide{max-width:1440px;margin:0 auto}

.tile-head{text-align:center;margin-bottom:var(--xxl)}
.tile-head h2{
  margin:0 0 var(--sm);font-size:40px;font-weight:600;line-height:1.10;letter-spacing:0;
}
.tile-head p{
  margin:0;font-size:21px;font-weight:400;line-height:1.3;letter-spacing:.231px;
  color:var(--ink-80);
}
.tile-dark .tile-head p,.tile-dark-2 .tile-head p,.tile-dark-3 .tile-head p{color:var(--muted-on-dark)}

/* 왼쪽 정렬이 필요한 작업용 머리 */
.tile-head.left{text-align:left}
.tile-head.left h2{font-size:34px;letter-spacing:-.374px}

/* ══════════════════ 단추 ══════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;cursor:pointer;font-family:inherit;text-align:center;
  transition:background .15s var(--ease),transform .08s var(--ease),color .15s var(--ease);
}
.btn:active{transform:scale(.95)}

.btn-primary{
  background:var(--primary);color:var(--on-primary);
  font-size:17px;font-weight:400;letter-spacing:-.374px;
  border-radius:var(--r-pill);padding:11px 22px;min-height:44px;
}
.btn-primary:hover{background:#0a7aea}

.btn-ghost{
  background:transparent;color:var(--primary);border:1px solid var(--primary);
  font-size:17px;font-weight:400;letter-spacing:-.374px;
  border-radius:var(--r-pill);padding:10px 21px;min-height:44px;
}
.btn-ghost:hover{background:rgba(0,102,204,.06)}

.btn-dark{
  background:var(--ink);color:var(--on-dark);
  font-size:14px;font-weight:400;letter-spacing:-.224px;
  border-radius:var(--r-sm);padding:8px 15px;
}
.btn-dark:hover{background:#000}

.btn-pearl{
  background:var(--pearl);color:var(--ink-80);
  font-size:14px;font-weight:400;letter-spacing:-.224px;
  border:3px solid var(--divider-soft);border-radius:var(--r-md);padding:8px 14px;
}
.btn-pearl:hover{color:var(--ink)}

.btn-large{
  background:var(--primary);color:var(--on-primary);
  font-size:18px;font-weight:300;line-height:1;
  border-radius:var(--r-pill);padding:14px 28px;
}

.btn-icon{
  width:44px;height:44px;border-radius:var(--r-pill);
  background:var(--chip-translucent);color:var(--ink);
}

.btn-danger{
  background:transparent;color:#c7291c;border:1px solid rgba(199,41,28,.3);
  font-size:14px;letter-spacing:-.224px;border-radius:var(--r-pill);padding:9px 18px;
}
.btn-danger:hover{background:rgba(199,41,28,.06)}

.cta-row{display:flex;gap:var(--md);justify-content:center;flex-wrap:wrap}

/* ══════════════════ 유틸리티 카드 ══════════════════ */
.cardgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;list-style:none;margin:0;padding:0;
}
.ucard{
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--lg);transition:border-color .15s var(--ease);
}
.ucard:hover{border-color:#c9c9cf}
.ucard h3{margin:0 0 var(--xxs);font-size:17px;font-weight:600;letter-spacing:-.374px}
.ucard p{margin:0;font-size:14px;letter-spacing:-.224px;color:var(--ink-48)}

/* 요약 타일 */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:20px;margin:0;padding:0;list-style:none;
}
.stat{
  display:block;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--lg);text-align:center;
  transition:border-color .15s var(--ease);
}
.stat:hover{border-color:#c9c9cf}
.stat b{
  display:block;font-size:40px;font-weight:600;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}
.stat span{display:block;margin-top:var(--xxs);font-size:14px;letter-spacing:-.224px;color:var(--ink-48)}

/* ══════════════════ 패널 (작업용 묶음) ══════════════════ */
.panel{margin:0}
.panel-head{display:flex;align-items:baseline;gap:var(--sm);margin-bottom:var(--lg)}
.panel-head h2,.panel>h2{
  margin:0;font-size:21px;font-weight:600;line-height:1.19;letter-spacing:.231px;
}
.panel-head .count,.panel>h2 .count{
  font-size:14px;font-weight:400;letter-spacing:-.224px;color:var(--ink-48);
  font-family:var(--mono);
}
.panel-head .spacer{flex:1}

/* ══════════════════ 입력 ══════════════════ */
.row{display:flex;gap:var(--sm);margin-bottom:var(--lg);align-items:flex-start}
.row.wrap-row{flex-wrap:wrap}
.row input[type=text],.row textarea,.field{
  flex:1;min-width:140px;background:var(--canvas);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:12px 16px;font-size:17px;letter-spacing:-.374px;color:var(--ink);
  resize:vertical;transition:border-color .15s var(--ease);
}
.row input::placeholder,.row textarea::placeholder{color:var(--ink-48)}
.row input:focus,.row textarea:focus{outline:none;border-color:var(--primary)}
.tile-dark .row input,.tile-dark .row textarea{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--on-dark);
}
.tile-dark .row input::placeholder,.tile-dark .row textarea::placeholder{color:rgba(255,255,255,.45)}
.row button{
  background:var(--primary);color:var(--on-primary);border:0;cursor:pointer;
  font-size:17px;letter-spacing:-.374px;border-radius:var(--r-pill);
  padding:11px 22px;min-height:46px;white-space:nowrap;font-family:inherit;
  transition:background .15s var(--ease),transform .08s var(--ease);
}
.row button:hover{background:#0a7aea}
.row button:active{transform:scale(.95)}

/* ══════════════════ 목록 공통 ══════════════════ */
.list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sm)}
.list.scroll{
  max-height:400px;overflow-y:auto;padding-right:6px;margin-right:-6px;
  overscroll-behavior:contain;scrollbar-width:thin;
}
.list.scroll::-webkit-scrollbar{width:6px}
.list.scroll::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:var(--r-pill)}

.empty{
  margin:0;padding:var(--xl) var(--lg);text-align:center;
  color:var(--ink-48);font-size:17px;letter-spacing:-.374px;
  background:var(--parchment);border-radius:var(--r-lg);
}
.tile-dark .empty,.tile-parchment .empty{background:rgba(0,0,0,.035)}
.tile-dark .empty{background:rgba(255,255,255,.06);color:var(--muted-on-dark)}
.empty code{font-family:var(--mono);font-size:14px;color:var(--ink-80)}

.x{
  background:none;border:0;cursor:pointer;font-family:inherit;
  color:var(--ink-48);font-size:14px;letter-spacing:-.224px;
  padding:4px 8px;border-radius:var(--r-xs);transition:color .12s var(--ease);
}
.x:hover{color:#c7291c}
.tile-dark .x{color:rgba(255,255,255,.55)}
.tile-dark .x:hover{color:#ff6b5e}
form{margin:0}

/* 메모 */
.note{
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--md) var(--lg);
}
.tile-parchment .note{border-color:rgba(0,0,0,.07)}
.note-body{font-size:17px;line-height:1.47;letter-spacing:-.374px;white-space:pre-wrap;word-break:break-word}
.note-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sm)}
.note-foot time{color:var(--ink-48);font-size:12px;letter-spacing:-.12px;font-family:var(--mono)}

/* 할 일 */
.todo{
  display:flex;align-items:center;gap:var(--sm);
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sm) var(--lg);
}
.todo .check{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:none;border:1.5px solid var(--hairline);cursor:pointer;
  display:grid;place-items:center;color:transparent;font-size:14px;
  transition:all .15s var(--ease);
}
.todo .check:hover{border-color:var(--primary)}
.todo.done .check{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.todo-text{flex:1;font-size:17px;letter-spacing:-.374px;word-break:break-word}
.todo.done .todo-text{color:var(--ink-48);text-decoration:line-through}

/* 링크 */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sm)}
.chip{
  display:inline-flex;align-items:center;gap:var(--xs);
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:8px 10px 8px 18px;
  font-size:14px;letter-spacing:-.224px;transition:border-color .15s var(--ease);
}
.chip:hover{border-color:var(--primary)}
.chip a{color:var(--ink)}
.chip a:hover{color:var(--primary)}
.chip .tag{
  font-size:12px;letter-spacing:-.12px;color:var(--ink-48);
  background:var(--parchment);border-radius:var(--r-pill);padding:2px 9px;
}
.tile-dark .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.tile-dark .chip a{color:var(--on-dark)}
.tile-dark .chip .tag{background:rgba(255,255,255,.12);color:var(--muted-on-dark)}

/* 글 목록 */
.posts{list-style:none;margin:0;padding:0;display:grid;gap:20px;
       grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.post-link{
  display:block;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);overflow:hidden;color:var(--ink);
  transition:border-color .15s var(--ease);
}
.post-link:hover{border-color:#c9c9cf}
.post-thumb{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  background:var(--parchment);border-bottom:1px solid var(--hairline);
}
.post-thumb.blank{
  display:grid;place-items:center;font-size:40px;font-weight:600;color:var(--ink-48);
}
.post-txt{display:block;padding:var(--md) var(--lg) var(--lg)}
.post-txt b{display:block;font-size:17px;font-weight:600;letter-spacing:-.374px;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-note{display:block;margin-top:2px;font-size:14px;letter-spacing:-.224px;color:var(--ink-48);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-txt time{display:block;margin-top:var(--xs);font-size:12px;letter-spacing:-.12px;
               color:var(--ink-48);font-family:var(--mono)}

/* 파일 줄 */
.file{
  display:flex;align-items:center;gap:var(--md);
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--md) var(--lg);
  transition:border-color .15s var(--ease);
}
.file:hover{border-color:#c9c9cf}
.file-ico{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--parchment);
  border:1px solid var(--hairline);color:var(--ink-80);
  font-family:var(--mono);font-size:12px;text-transform:uppercase;
}
.file-ico svg{width:22px;height:22px;display:block}
.file-thumb{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--r-sm);object-fit:cover;
  border:1px solid var(--hairline);
}
.file-main{flex:1;min-width:0}
.file-name{display:block;font-size:17px;font-weight:600;letter-spacing:-.374px;
           color:var(--ink);word-break:break-all}
.file-name:hover{color:var(--primary)}
.file-note{margin:2px 0 0;font-size:14px;letter-spacing:-.224px;color:var(--ink-48)}
.file-meta{margin-top:3px;font-size:12px;letter-spacing:-.12px;color:var(--ink-48);font-family:var(--mono)}
.file-act{display:flex;align-items:center;gap:var(--xs);flex-shrink:0}
.dl{
  background:transparent;border:0;cursor:pointer;font-family:inherit;
  color:var(--primary);font-size:14px;letter-spacing:-.224px;padding:6px 10px;
  border-radius:var(--r-xs);
}
.dl:hover{text-decoration:underline}

/* ══════════════════ 입장 화면 ══════════════════ */
.gate{
  min-height:100dvh;display:grid;place-items:center;padding:var(--lg);
  background:var(--parchment);
}
.gate-card{width:100%;max-width:400px;text-align:center}
.gate-mark{
  width:56px;height:56px;margin:0 auto var(--lg);border-radius:50%;
  border:2px solid var(--ink);display:grid;place-items:center;
}
.gate-mark::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--ink)}
.gate-card h1{
  margin:0 0 var(--xs);font-size:40px;font-weight:600;line-height:1.1;
  letter-spacing:.06em;font-family:var(--font);
}
.gate-sub{margin:0 0 var(--xl);font-size:21px;font-weight:400;letter-spacing:.231px;color:var(--ink-80)}
.gate-card input{
  width:100%;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:13px 22px;height:48px;
  font-size:17px;letter-spacing:.3em;text-align:center;color:var(--ink);
  transition:border-color .15s var(--ease);
}
.gate-card input::placeholder{letter-spacing:-.374px;color:var(--ink-48)}
.gate-card input:focus{outline:none;border-color:var(--primary)}
.gate-card button{
  width:100%;margin-top:var(--sm);background:var(--primary);color:var(--on-primary);
  border:0;border-radius:var(--r-pill);padding:13px;min-height:48px;
  font-size:17px;letter-spacing:-.374px;cursor:pointer;font-family:inherit;
  transition:background .15s var(--ease),transform .08s var(--ease);
}
.gate-card button:hover{background:#0a7aea}
.gate-card button:active{transform:scale(.95)}
.gate-error{
  margin:var(--lg) 0 0;font-size:14px;letter-spacing:-.224px;color:#c7291c;
}

/* ══════════════════ 시계 ══════════════════ */
.hero-clock{text-align:center}
.hero-clock .greet{
  margin:0;font-size:21px;font-weight:400;letter-spacing:.231px;color:var(--ink-48);
}
.clock{
  display:block;margin:var(--sm) 0 var(--xs);
  font-size:clamp(48px,11vw,80px);font-weight:600;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.clock .ampm{
  font-size:.34em;font-weight:400;color:var(--ink-48);
  letter-spacing:-.01em;margin-right:.3em;vertical-align:.45em;
}
.clock-date{
  margin:0;font-size:21px;font-weight:400;letter-spacing:.231px;color:var(--ink-80);
}
.clock-date .sub{color:var(--ink-48)}

/* ══════════════════ 글 보기 / 문서 ══════════════════ */
.post-head{margin-bottom:var(--xl);text-align:center}
.post-head h1{
  margin:0 0 var(--sm);font-size:clamp(34px,6vw,56px);font-weight:600;
  line-height:1.07;letter-spacing:-.28px;
}
.post-sub{margin:0 0 var(--sm);font-size:21px;font-weight:400;letter-spacing:.231px;color:var(--ink-80)}
.post-meta{
  margin:0;font-size:14px;letter-spacing:-.224px;color:var(--ink-48);
  display:flex;gap:var(--sm);justify-content:center;flex-wrap:wrap;align-items:center;
}
.post-body img{
  border-radius:var(--r-sm);display:block;margin:var(--xl) auto;
  box-shadow:var(--shadow-product);     /* 체계 안의 유일한 그림자 — 사진에만 */
}
.post-actions{
  display:flex;justify-content:space-between;gap:var(--sm);
  margin-top:var(--xl);flex-wrap:wrap;
}
.post-actions-right{display:flex;gap:var(--xs);flex-wrap:wrap}
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--primary);color:var(--primary);
  font-size:14px;letter-spacing:-.224px;font-family:inherit;cursor:pointer;
  padding:10px 20px;border-radius:var(--r-pill);min-height:40px;
  transition:background .15s var(--ease),transform .08s var(--ease);
}
.btn-line:hover{background:rgba(0,102,204,.06)}
.btn-line:active{transform:scale(.95)}
.btn-line.danger{border-color:rgba(199,41,28,.35);color:#c7291c}
.btn-line.danger:hover{background:rgba(199,41,28,.06)}

/* ══════════════════ 본문 조판 ══════════════════ */
.prose{font-size:17px;line-height:1.47;letter-spacing:-.374px;color:var(--ink)}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose h1{font-size:40px;font-weight:600;line-height:1.1;letter-spacing:0;margin:0 0 var(--lg)}
.prose h2{font-size:34px;font-weight:600;line-height:1.2;letter-spacing:-.374px;margin:var(--xxl) 0 var(--md)}
.prose h3{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.374px;margin:var(--xl) 0 var(--sm)}
.prose h4{font-size:21px;font-weight:600;letter-spacing:.231px;margin:var(--lg) 0 var(--xs)}
.prose p{margin:0 0 var(--md)}
.prose a{color:var(--primary)}
.prose a:hover{text-decoration:underline}
.prose strong{font-weight:600}
.prose hr{border:0;border-top:1px solid var(--hairline);margin:var(--xxl) 0}
.prose ul,.prose ol{margin:0 0 var(--md);padding-left:var(--lg)}
.prose li{margin:var(--xxs) 0}
.prose code{
  font-family:var(--mono);font-size:.88em;background:var(--parchment);
  border-radius:var(--r-xs);padding:2px 6px;color:var(--ink);
}
.prose pre{
  background:var(--parchment);border-radius:var(--r-lg);
  padding:var(--lg);overflow-x:auto;margin:0 0 var(--md);
  font-size:14px;line-height:1.6;
}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose blockquote{
  margin:0 0 var(--md);padding:var(--sm) var(--lg);
  border-left:3px solid var(--primary);background:var(--parchment);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--lg);font-size:14px;
             display:block;overflow-x:auto}
.prose thead th{
  background:var(--parchment);font-weight:600;text-align:left;
  padding:var(--sm) var(--md);border:1px solid var(--hairline);white-space:nowrap;
}
.prose tbody td{padding:var(--sm) var(--md);border:1px solid var(--hairline);vertical-align:top}
.prose .raw{white-space:pre-wrap;word-break:break-word}

.doc-title{margin:0 0 var(--xs)!important}
.doc-meta{margin:0;font-size:14px;letter-spacing:-.224px;color:var(--ink-48);font-family:var(--mono)}
.doc-foot{margin:var(--lg) 0 0;font-size:12px;letter-spacing:-.12px;color:var(--ink-48);line-height:1.7}
.doc-foot code{font-family:var(--mono);background:var(--parchment);padding:2px 6px;border-radius:var(--r-xs)}

/* ══════════════════ 서식 편집기 ══════════════════ */
.editor{display:grid;gap:var(--sm)}
.ed-title{
  background:transparent;border:0;border-bottom:1px solid var(--hairline);
  padding:var(--xs) 2px var(--md);
  font-size:clamp(28px,5vw,40px);font-weight:600;letter-spacing:-.28px;color:var(--ink);
}
.ed-title:focus{outline:none;border-bottom-color:var(--primary)}
.ed-title::placeholder{color:var(--ink-48)}
.ed-row{display:flex;gap:var(--sm);flex-wrap:wrap}
.ed-row input{
  flex:1;min-width:180px;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:11px 16px;font-size:14px;letter-spacing:-.224px;
}
.ed-row input:focus{outline:none;border-color:var(--primary)}
.ed-row input::placeholder{color:var(--ink-48)}

.ed-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--xxs);
  background:rgba(245,245,247,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--hairline);border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--xs) var(--sm);
  position:sticky;top:96px;z-index:20;
}
.ed-bar button{
  background:transparent;border:0;cursor:pointer;font-family:inherit;color:var(--ink);
  font-size:14px;letter-spacing:-.224px;border-radius:var(--r-xs);padding:7px 11px;
  transition:background .12s var(--ease);
}
.ed-bar button:hover{background:rgba(0,0,0,.05)}
.ed-bar button.on{background:var(--primary);color:var(--on-primary)}
.ed-sel{
  background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);
  border-radius:var(--r-sm);padding:6px 10px;font-size:14px;letter-spacing:-.224px;cursor:pointer;
}
.ed-sel:focus{outline:none;border-color:var(--primary)}
.ed-sep{width:1px;height:18px;background:var(--hairline);margin:0 var(--xxs)}

.ed-body{
  background:var(--canvas);border:1px solid var(--hairline);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:var(--xl) var(--lg);min-height:420px;
  font-size:17px;line-height:1.47;letter-spacing:-.374px;color:var(--ink);
  overflow-wrap:break-word;
}
.ed-body:focus{outline:none;border-color:var(--primary)}
.ed-body.over{border-color:var(--primary);background:rgba(0,102,204,.03)}
.ed-body.empty-ph::before{content:attr(data-ph);color:var(--ink-48);pointer-events:none}
.ed-body img{
  border-radius:var(--r-sm);display:block;margin:var(--lg) auto;cursor:pointer;
  box-shadow:var(--shadow-product);
}
.ed-body img.img-sel{outline:2px solid var(--primary);outline-offset:3px}
.ed-body h2{font-size:34px;font-weight:600;letter-spacing:-.374px;margin:var(--xl) 0 var(--sm)}
.ed-body h3{font-size:24px;font-weight:600;letter-spacing:-.374px;margin:var(--lg) 0 var(--xs)}
.ed-body h4{font-size:21px;font-weight:600;letter-spacing:.231px;margin:var(--md) 0 var(--xs)}
.ed-body p{margin:0 0 var(--md)}
.ed-body ul,.ed-body ol{margin:0 0 var(--md);padding-left:var(--lg)}
.ed-body blockquote{
  margin:0 0 var(--md);padding:var(--sm) var(--lg);
  border-left:3px solid var(--primary);background:var(--parchment);
}
.ed-body pre{
  background:var(--parchment);border-radius:var(--r-sm);padding:var(--md);
  font-family:var(--mono);font-size:14px;white-space:pre-wrap;margin:0 0 var(--md);
}
.ed-body::after,.post-body::after{content:"";display:block;clear:both}

.ed-actions{display:flex;align-items:center;gap:var(--sm);flex-wrap:wrap;margin-top:var(--xs)}
.ed-save{
  background:var(--primary);color:var(--on-primary);border:0;cursor:pointer;
  font-family:inherit;font-size:17px;letter-spacing:-.374px;
  border-radius:var(--r-pill);padding:11px 28px;min-height:44px;
  transition:background .15s var(--ease),transform .08s var(--ease);
}
.ed-save:hover{background:#0a7aea}
.ed-save:active{transform:scale(.95)}
.ed-cancel{
  background:transparent;border:1px solid var(--hairline);color:var(--ink);
  font-family:inherit;font-size:17px;letter-spacing:-.374px;cursor:pointer;
  border-radius:var(--r-pill);padding:10px 24px;min-height:44px;
  transition:border-color .15s var(--ease),transform .08s var(--ease);
}
.ed-cancel:hover{border-color:var(--ink-48)}
.ed-cancel:active{transform:scale(.95)}
.ed-hint{margin-left:auto;font-size:12px;letter-spacing:-.12px;color:var(--ink-48)}

/* 이미지 도구 */
.img-tools{
  position:absolute;z-index:50;display:none;align-items:center;gap:2px;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:5px 7px;
}
.img-tools.on{display:flex}
.img-tools button{
  background:transparent;border:0;cursor:pointer;font-family:inherit;color:var(--ink);
  font-size:12px;letter-spacing:-.12px;border-radius:var(--r-pill);padding:6px 11px;
  transition:background .12s var(--ease);
}
.img-tools button:hover{background:rgba(0,0,0,.05)}
.img-tools button.on{background:var(--primary);color:var(--on-primary)}
.img-tools button[data-del]{color:#c7291c}
.img-sep{width:1px;height:14px;background:var(--hairline);margin:0 3px}
.img-handle{
  position:absolute;z-index:50;display:none;width:14px;height:14px;border-radius:50%;
  background:var(--primary);border:2px solid var(--canvas);cursor:nwse-resize;
}
.img-handle.on{display:block}
body.resizing{user-select:none;cursor:nwse-resize}

/* 올리기 */
.drop,.ed-drop{
  border:1px dashed var(--hairline);border-radius:var(--r-lg);
  background:var(--pearl);padding:var(--xl) var(--lg);text-align:center;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
  margin-bottom:var(--md);display:block;
}
.drop:hover,.ed-drop:hover{border-color:var(--primary)}
.drop.over,.ed-drop.over{border-color:var(--primary);background:rgba(0,102,204,.04)}
.drop-ico{font-size:28px;color:var(--primary);line-height:1}
.drop-main,.ed-drop-main{display:block;margin:var(--sm) 0 var(--xxs);font-size:17px;font-weight:600;letter-spacing:-.374px}
.drop-sub,.ed-drop-sub{display:block;margin:0;font-size:14px;letter-spacing:-.224px;color:var(--ink-48)}
.drop input[type=file],.ed-drop input[type=file]{display:none}

.up-list{list-style:none;margin:0 0 var(--md);padding:0;display:grid;gap:var(--xs)}
.up-item{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--sm) var(--md)}
.up-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sm);font-size:14px;letter-spacing:-.224px}
.up-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-pct{font-family:var(--mono);font-size:12px;color:var(--ink-48);flex-shrink:0}
.up-bar{height:4px;background:var(--parchment);border-radius:var(--r-pill);margin-top:var(--xs);overflow:hidden}
.up-fill{height:100%;width:0;background:var(--primary);border-radius:var(--r-pill);transition:width .2s var(--ease)}
.up-item.done .up-fill{background:#28cd41}
.up-item.done .up-pct{color:#1a9e31}
.up-item.err .up-fill{background:#c7291c;width:100%!important}
.up-item.err .up-pct{color:#c7291c}

.disk{display:flex;align-items:center;gap:var(--sm);font-size:12px;letter-spacing:-.12px;
      color:var(--ink-48);font-family:var(--mono)}
.disk-bar{flex:1;height:4px;background:var(--parchment);border-radius:var(--r-pill);overflow:hidden}
.disk-fill{height:100%;background:var(--ink-48);border-radius:var(--r-pill)}

/* ══════════════════ 코드 ══════════════════ */
.lang-c      { --lc:#0066cc }
.lang-cpp    { --lc:#6b4fd8 }
.lang-java   { --lc:#c1600a }
.lang-python { --lc:#1a7f5a }

.lang-tag{
  display:inline-block;padding:3px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;letter-spacing:-.12px;
  color:var(--lc,var(--primary));background:var(--parchment);
}
.file-ico.lang-c,.file-ico.lang-cpp,.file-ico.lang-java,.file-ico.lang-python{color:var(--lc)}

.lang-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0}
.lang-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--sm);
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--lg) var(--sm);cursor:pointer;color:var(--lc);font-family:inherit;
  transition:border-color .15s var(--ease),transform .08s var(--ease);
}
.lang-card:hover{border-color:#c9c9cf}
.lang-card:active{transform:scale(.95)}
.lang-ico{width:48px;height:48px;display:grid;place-items:center}
.lang-ico svg{width:34px;height:34px;display:block}
.lang-name{font-size:17px;font-weight:600;letter-spacing:-.374px;color:var(--ink)}
.lang-ext{font-family:var(--mono);font-size:12px;letter-spacing:-.12px;color:var(--ink-48)}

.code-box{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--canvas)}
.code-bar{
  display:flex;align-items:center;gap:var(--sm);
  background:var(--parchment);border-bottom:1px solid var(--hairline);padding:var(--sm) var(--md);
}
.dots{display:flex;gap:7px;flex-shrink:0}
.dots i{width:11px;height:11px;border-radius:50%;background:#dcdce1;display:block}
.dots i:first-child{background:#ff5f57}
.dots i:nth-child(2){background:#febc2e}
.dots i:last-child{background:#28c840}
.code-file{
  flex:1;min-width:0;background:transparent;border:0;padding:3px 2px;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.224px;
}
.code-file:focus{outline:none;color:var(--primary)}
.code-file::placeholder{color:var(--ink-48);font-weight:400}
.code-lang{
  flex-shrink:0;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);
  border-radius:var(--r-sm);padding:5px 10px;font-family:var(--mono);font-size:12px;cursor:pointer;
}
.code-lang:focus{outline:none;border-color:var(--primary)}
.code-foot{
  display:flex;align-items:center;gap:var(--sm);
  background:var(--parchment);border-top:1px solid var(--hairline);padding:var(--xs) var(--md);
}
.code-note{flex:1;min-width:0;background:transparent;border:0;padding:3px 2px;
           font-size:14px;letter-spacing:-.224px;color:var(--ink)}
.code-note:focus{outline:none}
.code-note::placeholder{color:var(--ink-48)}
.code-stat{flex-shrink:0;color:var(--ink-48);font-size:12px;font-family:var(--mono)}

/* CodeMirror — Xcode 계열 밝은 배색 */
.code-box .CodeMirror{
  height:auto;background:var(--canvas);color:var(--ink);
  font-family:var(--mono);font-size:14px;line-height:1.65;letter-spacing:0;
}
.code-box .CodeMirror-scroll{min-height:max(520px, calc(100vh - 320px))}
.code-box.view .CodeMirror-scroll{min-height:160px;max-height:calc(100vh - 260px)}
.code-box .CodeMirror-lines{padding:var(--md) 0}
.code-box .CodeMirror pre.CodeMirror-line{padding-left:var(--md)}
.CodeMirror-gutters{background:var(--canvas);border-right:1px solid var(--hairline);padding-right:6px}
.CodeMirror-linenumber{color:#b0b0b8;font-size:13px}
.CodeMirror-cursor{border-left:2px solid var(--ink)}
.CodeMirror-selected{background:#d4e7ff!important}
.CodeMirror-focused .CodeMirror-selected{background:#b4d5fe!important}
.CodeMirror-activeline-background{background:#f7f7f9}
.CodeMirror-activeline .CodeMirror-linenumber{color:var(--ink)}
.CodeMirror-matchingbracket{color:var(--primary)!important;background:rgba(0,102,204,.12);
                            border-bottom:1px solid var(--primary)}
.CodeMirror-nonmatchingbracket{color:#c7291c!important}
.CodeMirror-overlayscroll-horizontal div,.CodeMirror-overlayscroll-vertical div{
  background:#c7c7cc;border-radius:var(--r-pill);
}
.cm-s-default .cm-keyword   {color:#9b2393}
.cm-s-default .cm-def       {color:#326d74}
.cm-s-default .cm-variable  {color:var(--ink)}
.cm-s-default .cm-variable-2{color:#0f68a0}
.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#3f6e74}
.cm-s-default .cm-property  {color:#326d74}
.cm-s-default .cm-operator  {color:var(--ink)}
.cm-s-default .cm-string    {color:#c41a16}
.cm-s-default .cm-string-2  {color:#c41a16}
.cm-s-default .cm-number    {color:#1c00cf}
.cm-s-default .cm-comment   {color:#5d6c79}
.cm-s-default .cm-meta      {color:#643820}
.cm-s-default .cm-builtin   {color:#9b2393}
.cm-s-default .cm-atom      {color:#1c00cf}
.cm-s-default .cm-bracket   {color:var(--ink)}
.cm-s-default .cm-tag       {color:#9b2393}

/* ══════════════════ 두 칸 배치 ══════════════════ */
.cols{display:grid;gap:var(--xl)}
.col-main,.col-side{display:grid;gap:var(--xl);align-content:start;min-width:0}
@media (max-width:979px){ .col-side{order:-1} }
@media (min-width:980px){
  .cols{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .col-side{position:sticky;top:112px}
  .list.scroll{max-height:calc(100vh - 300px)}
}

/* ══════════════════ 바닥 ══════════════════ */
.foot{
  background:var(--parchment);padding:64px 22px;text-align:center;
  border-top:1px solid var(--hairline);
}
.foot p{margin:var(--sm) 0 0;font-size:12px;letter-spacing:-.12px;color:var(--ink-48);line-height:1.7}
.foot-danger{
  background:transparent;border:1px solid rgba(199,41,28,.3);color:#c7291c;
  font-family:inherit;font-size:14px;letter-spacing:-.224px;cursor:pointer;
  border-radius:var(--r-pill);padding:10px 22px;min-height:40px;
  transition:background .15s var(--ease),transform .08s var(--ease);
}
.foot-danger:hover{background:rgba(199,41,28,.06)}
.foot-danger:active{transform:scale(.95)}

/* ══════════════════ 반응형 ══════════════════ */
@media (max-width:1068px){
  .tile-head h2{font-size:34px}
  .clock{font-size:clamp(44px,10vw,64px)}
}
@media (max-width:833px){
  .tile{padding:var(--xxl) 20px}
  .lang-pick{grid-template-columns:repeat(2,1fr)}
  .today{display:none}
}
@media (max-width:640px){
  body{font-size:17px}
  .top-in{padding:0 16px;gap:14px}
  .subnav-in{padding:0 16px}
  .subnav h1{font-size:17px}
  .tile{padding:var(--xl) 16px}
  .tile-head{margin-bottom:var(--xl)}
  .tile-head h2{font-size:28px}
  .tile-head p{font-size:17px}
  .row{flex-direction:column}
  .row button{width:100%}
  .posts{grid-template-columns:1fr}
  .file{flex-wrap:wrap}
  .file-act{width:100%;justify-content:flex-end}
  .code-box .CodeMirror{font-size:13px}
  .code-box .CodeMirror-scroll{min-height:max(400px, calc(100vh - 280px))}
  .ed-body{padding:var(--lg) var(--md)}
  .dots{display:none}
  .post-actions{flex-direction:column}
  .post-actions-right{justify-content:stretch}
  .btn-line{flex:1}
}
@media (max-width:419px){
  .tile-head h2{font-size:24px}
  .clock{font-size:clamp(38px,12vw,48px)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* 접었다 펴는 칸 (변경 로그 등) */
.prose details{
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:0 var(--lg);margin:0 0 var(--md);background:var(--canvas);
}
.prose details[open]{padding-bottom:var(--xs)}
.prose summary{
  cursor:pointer;list-style:none;padding:var(--md) 0;
  font-size:17px;font-weight:600;letter-spacing:-.374px;color:var(--primary);
  display:flex;align-items:center;gap:var(--xs);
}
.prose summary::-webkit-details-marker{display:none}
.prose summary::before{
  content:"";width:0;height:0;flex-shrink:0;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .15s var(--ease);
}
.prose details[open] summary::before{transform:rotate(90deg)}
.prose summary:hover{text-decoration:underline}
.prose details > table{margin-bottom:var(--md)}