/* ─────────────────────────────────────────────────────────────
   godrichstory 공통 UI — 블로그 관례 (2026-09-09 밤 재정리)
   구조: 헤더 / [본문 + 오른쪽 사이드바] / 푸터. 폰은 1단.
   색은 방향 C (크림·잉크·주황·노랑) 를 쓰되 글이 먼저 보이게 낮췄다.
   토큰은 :root 한 곳. 부품은 .g-* 접두. 글 본문은 .body 안의 태그.
   ───────────────────────────────────────────────────────────── */
:root{
  --cream:#fff9ef; --ink:#17141a; --orange:#ff4d1f; --yellow:#ffd23f; --blue:#2f6df6;
  --muted:#6b6474; --line:#e9dfc9; --paper:#ffffff; --orange-soft:#ffe0d8; --orange-deep:#c2361a;
  --bg:var(--cream); --fg:var(--ink);
  --font-display:"Gothic A1","Noto Sans KR",system-ui,sans-serif;
  --font-body:"Noto Sans KR","Gothic A1",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px; --r-pill:999px;
  --wrap:1180px; --side:300px; --gutter:24px;
  --dur:180ms; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-wrap:pretty}
a{color:var(--orange-deep);text-decoration:none}a:hover{text-decoration:underline}
img,video,iframe{max-width:100%}
code,pre,kbd{font-family:var(--font-mono)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.25}

/* 헤더 */
.g-top{background:var(--ink);color:var(--cream);position:sticky;top:0;z-index:20}
.g-top__in{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:12px}
.g-brand{font:900 20px/1 var(--font-display);letter-spacing:-.02em;color:var(--cream)}.g-brand:hover{text-decoration:none}
.g-brand em{font-style:normal;color:var(--yellow)}
.g-nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.g-pill{display:inline-block;padding:7px 13px;border-radius:var(--r-pill);border:1px solid #4a4452;color:var(--cream);font:700 13px/1 var(--font-display)}
.g-pill:hover{background:#2a2530;text-decoration:none}
.g-langs{display:flex;gap:4px;margin-left:6px}.g-langs a{padding:7px 9px;border-radius:var(--r-pill);border:1px solid #4a4452;color:#b9b3c2;font:700 11px/1 var(--font-mono)}
.g-langs a[aria-current]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.g-langs a:hover{text-decoration:none}

.g-langbar{display:flex;gap:12px;align-items:center;justify-content:center;padding:9px 16px;background:var(--yellow);color:var(--ink);font-size:14px}
.g-langbar a{font-weight:800;color:var(--ink);text-decoration:underline}.g-langbar button{border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--ink)}

/* 2단 레이아웃 */
.g-layout{max-width:var(--wrap);margin:0 auto;padding:28px var(--gutter) 56px;display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:40px;align-items:start}
.g-main{min-width:0}
.g-side{position:sticky;top:72px;display:flex;flex-direction:column;gap:18px}

/* 사이드바 위젯 */
.g-widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.g-widget h3{margin:0 0 10px;font:800 13px/1 var(--font-display);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.g-widget--profile{text-align:center}
.g-widget--profile h3{font:900 18px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);text-transform:none;margin:10px 0 4px}
.g-widget--profile p{margin:0 0 8px;font-size:13px;color:var(--muted);line-height:1.6}
.g-avatar{width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--ink);color:var(--yellow);font:900 30px/64px var(--font-display);text-align:center}
.g-search{display:flex;gap:6px}
.g-search input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font:14px var(--font-body);background:var(--cream)}
.g-search button{padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--cream);font-size:16px;cursor:pointer}
.g-list{list-style:none;margin:0;padding:0}
.g-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.g-list li:first-child{border-top:0;padding-top:0}
.g-list li a{color:var(--ink);flex:1;min-width:0}
.g-list li span,.g-list li time{color:var(--muted);font:12px/1.7 var(--font-mono);white-space:nowrap}
.g-list--posts li{flex-direction:column;gap:2px}
.g-list__group a{font-weight:800}.g-list__sub{border-top:0!important;padding:3px 0 3px 14px!important;font-size:13px}.g-list__sub a{color:var(--muted)}
.g-tags{display:flex;flex-wrap:wrap;gap:6px}
.g-tags a{display:inline-block;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--cream);color:var(--ink);font:700 12px/1 var(--font-display)}
.g-tags a:hover{background:var(--yellow);border-color:var(--yellow);text-decoration:none}
.g-tags a span{color:var(--muted);font-weight:400;margin-left:2px}
.g-facet{margin:0 0 10px}.g-facet b{display:block;font:800 11px/1 var(--font-display);letter-spacing:.06em;color:var(--muted);margin:0 0 6px}
.g-tags--cats{margin:12px 0 0}.g-tags--cats .g-cat{padding:5px 10px;font-size:12px}
.g-ad{display:none}.g-ad:not(:empty){display:block;min-height:90px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);font:12px/90px var(--font-mono);text-align:center}
.g-ad--top,.g-ad--bottom{margin:22px 0}

/* 글 목록 */
.g-listhead{margin:0 0 18px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.g-listhead h1{margin:0;font-size:26px}
.g-listhead p{margin:4px 0 0;color:var(--muted);font-size:14px}
.g-posts{display:flex;flex-direction:column;gap:18px}
.g-post-item{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.g-post-item__thumb{display:block;background:#000}
.g-post-item__thumb video{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.g-post-item__body{padding:16px 18px 16px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.g-post-item__meta{display:flex;gap:10px;align-items:center;font:12px/1 var(--font-mono);color:var(--muted)}
.g-cat{display:inline-block;padding:4px 9px;border-radius:var(--r-pill);background:var(--orange);color:#fff;font:800 11px/1 var(--font-display)}
.g-cat:hover{text-decoration:none;background:var(--orange-deep)}
.g-post-item h2{margin:0;font-size:19px}.g-post-item h2 a{color:var(--ink)}
.g-post-item p{margin:0;font-size:14px;color:#4a4452;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-pager{display:flex;gap:6px;justify-content:center;margin:26px 0 0}
.g-pager a{padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink);font:700 13px/1 var(--font-mono)}
.g-pager a[aria-current]{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* 글 */
.g-crumb{display:flex;gap:8px;align-items:center;font:12px/1 var(--font-mono);color:var(--muted);margin:0 0 14px}
.g-crumb a{color:var(--muted)}
.post h1{margin:0;font-size:clamp(26px,3.4vw,36px)}
.post__meta{margin:10px 0 0;font:13px/1.6 var(--font-mono);color:var(--muted)}
.post__lede{margin:16px 0 0;font-size:17px;line-height:1.75;color:#2a2530}
.body{margin-top:8px}
.body h2{margin:44px 0 12px;font-size:24px;padding-top:18px;border-top:1px solid var(--line)}
.body h2 .num{display:inline-block;margin-right:10px;padding:5px 9px;border-radius:9px;background:var(--orange);color:#fff;font:700 13px/1 var(--font-mono);vertical-align:middle}
.body h3{margin:24px 0 8px;font-size:17px}
.body p{margin:0 0 14px}
.body pre{margin:14px 0;padding:16px 18px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);overflow-x:auto;font-size:13.5px;line-height:1.6}
.body :not(pre)>code{background:#fff1c2;padding:1px 6px;border-radius:5px;font-size:.9em}
.body table{border-collapse:collapse;width:100%;font-size:15px;margin:14px 0}
.body th{background:var(--ink);color:var(--cream);text-align:left;padding:9px 12px;font:800 13px/1.3 var(--font-display)}
.body td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.body img{max-width:100%;border-radius:var(--r)}
.body ul,.body ol{padding-left:22px}.body li{margin:6px 0}
.pw-inline{font-family:var(--font-mono);font-size:.95em;letter-spacing:.04em;user-select:all}

/* 데모 격자 — 우리만의 것 */
.g-demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 10px}
.g-demo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:16/10;display:block}
.g-demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.g-demo__label{position:absolute;left:10px;top:8px;z-index:2;font:700 11px/1 var(--font-mono);color:#fff;background:rgba(23,20,26,.55);padding:5px 8px;border-radius:var(--r-pill);pointer-events:none}
.g-demos__note{font:12px/1.5 var(--font-mono);color:var(--muted);margin:0 0 6px}
.g-toc{margin:12px 0 6px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.g-toc a{display:inline-block;padding:6px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 12px/1 var(--font-mono)}
.g-toc a:hover{background:var(--ink);color:var(--cream);text-decoration:none}
.g-item-demo{margin:12px 0;border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:16/10;position:relative;max-width:480px}
.g-item-demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.g-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.g-chip{padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);font:700 11px/1 var(--font-mono);color:var(--ink)}
.g-chip--on{background:var(--orange);color:#fff;border-color:var(--orange)}
.g-zipcard{background:var(--yellow);border-radius:var(--r);padding:16px 18px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:26px 0}
.g-zipcard__label{font:800 11px/1 var(--font-display);letter-spacing:.1em}
.g-zipcard__list{margin:4px 0 0;font:700 14px/1.5 var(--font-body)}
.g-btn{display:inline-block;padding:11px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--cream);font:800 13px/1 var(--font-display)}
.g-btn:hover{text-decoration:none;background:#2a2530}

/* 글 꼬리 */
.g-author{display:flex;gap:14px;align-items:flex-start;margin:28px 0 0;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.g-avatar--s{width:44px;height:44px;font:900 20px/44px var(--font-display);flex:none;margin:0}
.g-author__label{font:800 11px/1 var(--font-display);letter-spacing:.08em;color:var(--muted)}
.g-author__name{display:inline-block;margin:4px 0 2px;font:800 15px/1.3 var(--font-display);color:var(--ink)}
.g-author p{margin:0;font-size:13px;color:#4a4452;line-height:1.6}
.post__foot{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.g-share{display:flex;gap:8px;align-items:center;font:12px/1 var(--font-mono);color:var(--muted)}
.g-share a,.g-share button{padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 12px/1 var(--font-display);cursor:pointer}
.g-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 0}
.g-prevnext__a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;line-height:1.4}
.g-prevnext__a small{display:block;font:12px/1 var(--font-mono);color:var(--muted);margin-bottom:6px}
.g-prevnext__a--next{text-align:right;grid-column:2}
.related{margin-top:28px}
.related h2{margin:0 0 10px;font:800 13px/1 var(--font-display);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.related ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.related li a{color:var(--ink);font-weight:700;font-size:14px}
.g-comments{margin-top:36px;padding-top:16px;border-top:1px solid var(--line)}
.g-comments h2{margin:0 0 8px;font-size:16px}.g-comments__soon{margin:0;color:var(--muted);font-size:14px}

/* 페이지 · 푸터 */
.page h1{font-size:clamp(24px,3vw,32px);margin:0 0 16px}.page h2{font-size:20px;margin:28px 0 8px}
.g-foot{border-top:1px solid var(--line);padding:22px var(--gutter) 40px;text-align:center;color:var(--muted);font:12px/1.8 var(--font-mono)}
.g-foot__links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.g-foot__links a{color:var(--muted)}

/* 반응형 */
@media (max-width:960px){
  .g-layout{grid-template-columns:1fr}
  .g-side{position:static}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .g-post-item{grid-template-columns:1fr}
  .g-post-item__body{padding:14px 16px 16px}
  .g-demos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-top__in{flex-wrap:wrap}
  .g-prevnext{grid-template-columns:1fr}.g-prevnext__a--next{grid-column:auto;text-align:left}
}
@media (max-width:480px){
  .g-demos{grid-template-columns:1fr}
  .body pre{font-size:12.5px;padding:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}