/* ============================================================
   Rebeauty Design — "손으로 그린" 사이트 테마 (hand.css)
   ------------------------------------------------------------
   gumson.com(rebeauty89 /assets/css/site.css) 의 종이·잉크·손글씨 톤을
   rebeauty.design 에 이식한 공용 스타일. 세 곳에서 쓴다.
     ① 랜딩 app/Views/intro/index.php
     ② 인증 app/Views/auth/login.php · register.php
     ③ 공통 셸 app/Views/_partials/site-header.php (내부 28개 페이지)
   폰트: CSP font-src 'self' 라 Google Fonts 직접 로드 불가 →
         /vendor-static/css/g/ 로컬 미러(동일 출처)에서 가져온다.
   원칙(gumson [LEGIBILITY] 학습): feTurbulence 손그림 필터는 글자가 든
   상자에는 걸지 않는다(글자 지글거림·흐림). 선·액자·낙서에만 쓰고,
   손맛은 '살짝 어긋난 모서리 반지름'과 잉크색으로 낸다.
   ============================================================ */
@import url('/vendor-static/css/g/cabin-sketch-400_700.css');
@import url('/vendor-static/css/g/gaegu-300_400_700.css');
@import url('/vendor-static/css/g/patrick-hand-400.css');
@import url('/vendor-static/css/g/caveat-400_700.css');
@import url('/vendor-static/css/g/nanum-pen-script-400.css');
@import url('/vendor-static/css/g/space-mono-400_700.css');
@import url('/vendor-static/css/pretendard.css');

:root{
  --paper:#fafafa; --paper-2:#f4f1ea; --paper-3:#efe9dd; --panel:#ffffff;
  --ink:#1a1a1a; --ink-2:#333333; --ink-soft:#565049; --ink-faint:#8c857b; --ink-ghost:#b9b2a6;
  --line:rgba(26,26,26,.22); --line-2:rgba(26,26,26,.12); --line-strong:rgba(26,26,26,.5);
  --red:#a33;
  --disp:'Cabin Sketch','Gaegu',cursive;                 /* 큰 제목(한글은 Gaegu 로 폴백) */
  --hand:'Patrick Hand','Gaegu',cursive;                 /* 손글씨 라벨·버튼 */
  --script:'Caveat','Nanum Pen Script',cursive;          /* 강조·주석 */
  --body:'Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --mono:'Space Mono','Courier New',monospace;
  --container:1200px; --gutter:clamp(20px,5vw,64px);
  --fs-xs:clamp(11px,.55vw + 7px,13px); --fs-sm:clamp(12.5px,.5vw + 9px,15px);
  --fs-base:clamp(15px,.5vw + 12px,17px); --fs-md:clamp(17px,.9vw + 11px,21px);
  --fs-lg:clamp(20px,1.4vw + 12px,28px); --fs-xl:clamp(26px,3vw + 8px,44px);
  --fs-2xl:clamp(34px,5vw + 6px,70px); --fs-3xl:clamp(40px,5.2vw + 10px,92px);
  --sp-4:40px; --sp-5:64px; --sp-6:96px; --sp-7:clamp(80px,10vw,164px);
  --e-out:cubic-bezier(.19,1,.22,1); --e-soft:cubic-bezier(.11,.7,0,1);
  --t-fast:.2s; --t:.4s; --header-h:74px;
  --rough:url(#rough);
  /* 내부 페이지 셸(site-header.php) 높이 — 각 페이지의 sticky 툴바가 참조한다 */
  --site-header-h:60px;
}

/* ── 기본 ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth;
  -webkit-tap-highlight-color:rgba(26,26,26,.12) }
body{ margin:0; color:var(--ink); font-family:var(--body); font-size:var(--fs-base); line-height:1.75;
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; position:relative;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(26,26,26,.020), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(26,26,26,.016), transparent 45%),
    repeating-linear-gradient(0deg, rgba(26,26,26,.012) 0 1px, transparent 1px 3px) }
body.hand-page{ overflow-x:hidden; overflow-x:clip }
img,svg,video{ max-width:100% }
.hand-page img,.hand-page svg,.hand-page video{ display:block; height:auto }
a{ color:inherit; text-decoration:none }
[hidden]{ display:none !important }
.hand-page button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none }
.hand-page h1,.hand-page h2,.hand-page h3,.hand-page h4{ margin:0; font-weight:400; line-height:1.06 }
.hand-page p{ margin:0 }
h1,h2,h3,h4,p,li,dd,dt,figcaption,label,button,a,.lead,.chip,.badge{ word-break:keep-all; overflow-wrap:break-word }
::selection{ background:var(--ink); color:var(--paper); text-shadow:none }
:focus-visible{ outline:2px dashed var(--ink); outline-offset:3px; border-radius:3px }
.hand-page .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.sr-filter{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; pointer-events:none }
.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:10px 14px; z-index:200 }
.skip:focus{ left:12px; top:12px }

/* ── 타이포 헬퍼 ───────────────────────────────────────────── */
.hand-page .disp{ font-family:var(--disp); font-weight:700; line-height:1.0; letter-spacing:.01em }
.hand-page .hand{ font-family:var(--hand) } .hand-page .script{ font-family:var(--script) }
.hand-page .mono{ font-family:var(--mono); letter-spacing:.02em }
.hand-page .en{ font-family:var(--hand); letter-spacing:.04em }
.hand-page .muted{ color:var(--ink-faint) } .hand-page .soft{ color:var(--ink-soft) }
.hand-page .muted-note{ color:var(--ink-faint); font-size:var(--fs-sm); line-height:1.7 }
.hand-page .h1{ font-family:var(--disp); font-weight:700; font-size:var(--fs-3xl) }
.hand-page .h2{ font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl) }
.hand-page .h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl) }
.hand-page .lead{ font-size:var(--fs-md); line-height:1.75; color:var(--ink-2); max-width:60ch }
.hand-page em{ font-style:normal; font-family:var(--script); font-weight:700; font-size:1.24em; line-height:.9 }
.hand-page .codetag{ font-family:var(--mono); font-size:15px; color:var(--ink-soft); letter-spacing:.02em }
.hand-page .codetag b{ color:var(--ink) }
.hand-page .kick{ display:inline-flex; align-items:center; gap:10px; font-family:var(--hand); font-size:15px;
  letter-spacing:.06em; color:var(--ink-2) }
.hand-page .kick::before{ content:""; width:30px; height:0; border-top:2px solid var(--ink); border-radius:2px; transform:rotate(-1.5deg) }
.hand-page .kick .num{ font-family:var(--mono); color:var(--ink) }
.hand-page .rough{ filter:var(--rough) }
.hand-page hr,.hand-page .rule{ border:0; height:0; border-top:2px solid var(--line); margin:0; filter:var(--rough) }
.hand-page .dividers{ display:flex; align-items:center; gap:16px; color:var(--ink-faint); font-family:var(--mono); font-size:12px }
.hand-page .dividers::before,.hand-page .dividers::after{ content:""; flex:1; height:0; border-top:2px solid var(--line); filter:var(--rough) }
.hand-page .tag{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-faint) }

/* ── 버튼: 잉크 테두리 알약형, 화살표 이동 ─────────────────── */
.hand-page .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--hand); font-size:16px; line-height:1.2; min-height:48px; padding:14px 24px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--paper); color:var(--ink);
  transition:transform var(--t) var(--e-out), background var(--t), color var(--t);
  -webkit-font-smoothing:antialiased; text-decoration:none; cursor:pointer; white-space:nowrap }
.hand-page .btn:hover{ transform:translateY(-2px) rotate(-.4deg) }
.hand-page .btn--ink{ background:var(--ink); color:var(--paper) }
.hand-page .btn--ink:hover{ background:var(--ink-2) }
.hand-page .btn--lg{ font-size:18.5px; padding:17px 30px; min-height:56px }
.hand-page .btn--sm{ font-size:15.5px; padding:11px 18px; min-height:44px }
.hand-page .btn .arr{ transition:transform var(--t) var(--e-out) }
.hand-page .btn:hover .arr{ transform:translateX(4px) }
.hand-page .btn[disabled]{ opacity:.55; cursor:default; transform:none }

/* ── 칩·배지 ───────────────────────────────────────────────── */
.hand-page .chip{ display:inline-flex; align-items:center; gap:7px; padding:11px 17px; min-height:46px;
  border:1.5px solid var(--line-strong); border-radius:999px; font-family:var(--hand); font-size:15.5px;
  color:var(--ink-2); background:var(--paper); transition:transform var(--t) var(--e-out), color var(--t) }
.hand-page .chip:hover{ transform:translateY(-2px) rotate(-.5deg); color:var(--ink) }
.hand-page .chip.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.hand-page .chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center }
.hand-page .badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; padding:4px 9px; border:1.5px solid var(--line-strong); border-radius:999px; color:var(--ink-2) }
.hand-page .badge--ink{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

/* ── 액자 카드 ─────────────────────────────────────────────── */
.hand-page .frame{ border:1.5px solid var(--ink); border-radius:14px; background:var(--panel); overflow:hidden; position:relative }
.hand-page .frame__img{ overflow:hidden; background:var(--paper-2) }
.hand-page .frame__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .9s var(--e-out) }
.hand-page .frame:hover .frame__img img{ transform:scale(1.03) }
.hand-page .frame .pad{ padding:18px 20px }
.hand-page .hcard{ display:block; border:1.5px solid var(--ink); border-radius:14px 12px 15px 13px; background:var(--panel);
  padding:22px; color:inherit; transition:transform var(--t) var(--e-out) }
.hand-page .hcard:hover{ transform:translateY(-3px) rotate(-.35deg) }
.hand-page .hcard--ink{ background:var(--ink); color:var(--paper) }
.hand-page .hcard--ink .muted,.hand-page .hcard--ink .soft{ color:rgba(250,250,250,.72) }

/* ── 입력 요소 ─────────────────────────────────────────────── */
.hand-page .field{ display:block; margin-bottom:16px; position:relative }
.hand-page .field > span,.hand-page .field__label{ display:block; font-family:var(--hand); font-size:15px; margin-bottom:7px }
.hand-page .field input,.hand-page .field textarea,.hand-page .field select{ width:100%; font:inherit; font-size:16px; padding:13px 14px;
  background:var(--panel); border:1.5px solid var(--ink); border-radius:10px; color:var(--ink); outline:0 }
.hand-page .field input:focus,.hand-page .field textarea:focus,.hand-page .field select:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,26,.10) }
.hand-page .field textarea{ min-height:120px; resize:vertical }
.hand-page .field .fe{ display:block; margin-top:6px; font-size:var(--fs-xs); color:var(--red); font-family:var(--hand) }
.hand-page .field input[aria-invalid=true]{ border-color:var(--red) }
.hand-page .checkrow{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink-soft) }
.hand-page .checkrow input[type=checkbox]{ width:18px; height:18px; margin-top:4px; accent-color:var(--ink); flex-shrink:0 }

/* ── 섹션·등장 ─────────────────────────────────────────────── */
.hand-page .section{ padding-block:var(--sp-7) }
.hand-page .section--tight{ padding-block:var(--sp-6) }
.hand-page .sec-head{ max-width:64ch }
.hand-page .sec-head .kick{ margin-bottom:18px }
.hand-page .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-out), transform .8s var(--e-out) }
.hand-page .reveal.is-in{ opacity:1; transform:none }

/* ── 브랜드 ────────────────────────────────────────────────── */
.brand{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0; color:var(--ink); text-decoration:none }
.brand__mark{ width:36px; height:36px; flex-shrink:0; color:var(--ink) }
.brand__name{ font-family:var(--disp); font-weight:700; font-size:22px; line-height:1; letter-spacing:.02em; display:block; color:var(--ink) }
.brand__sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; color:var(--ink-faint); display:block; margin-top:3px }

/* ── 공개 페이지 헤더(랜딩·인증): 고정, 스크롤 시 종이색 ─────── */
.pub-header{ position:fixed; inset:0 0 auto 0; z-index:120; height:var(--header-h); transition:background var(--t) }
.pub-header::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:transparent }
.pub-header.is-solid{ background:rgba(250,250,250,.94) }
.pub-header.is-solid::after{ background:var(--line); filter:var(--rough) }
.pub-header__inner{ max-width:1360px; margin-inline:auto; height:var(--header-h); padding-inline:var(--gutter);
  display:flex; align-items:center; gap:22px }
.pub-nav{ display:flex; align-items:center; gap:4px; margin-inline:auto }
.pub-nav a{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hand); font-size:17.5px; padding:11px 15px;
  border-radius:14px; color:var(--ink-2); transition:color var(--t), background var(--t); white-space:nowrap }
.pub-nav a:hover,.pub-nav a.is-active{ color:var(--ink); background:rgba(26,26,26,.05) }
.header-tools{ display:flex; align-items:center; gap:12px; flex-shrink:0 }
.menu-toggle{ display:none; width:44px; height:44px; flex-direction:column; gap:5px; align-items:center; justify-content:center }
.menu-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px }
/* 모바일 드로어 */
.drawer-overlay{ position:fixed; inset:0; background:rgba(26,26,26,.34); opacity:0; visibility:hidden; transition:opacity var(--t); z-index:130 }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(90vw,380px); background:var(--paper); border-left:2px solid var(--ink);
  transform:translateX(100%); transition:transform var(--t) var(--e-out); z-index:140; overflow-y:auto;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom)) }
body.drawer-open .drawer{ transform:none } body.drawer-open .drawer-overlay{ opacity:1; visibility:visible }
.drawer-close{ position:absolute; top:14px; right:16px; width:40px; height:40px; font-size:26px; font-family:var(--hand) }
.drawer .acc{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:17px 4px;
  border-bottom:1.5px dashed var(--line); font-family:var(--hand); font-size:20px; color:var(--ink) }
.drawer .acc .en{ display:block; font-size:12px; letter-spacing:.14em; color:var(--ink-faint); margin-top:2px }

/* ── 우측 퀵바 ─────────────────────────────────────────────── */
.hand-page .quick{ position:fixed; right:14px; bottom:16px; z-index:110; display:flex; flex-direction:column; gap:8px;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--t), visibility var(--t), transform var(--t) }
.hand-page .quick.is-on{ opacity:1; visibility:visible; transform:none }   /* 히어로 낙서 액자와 겹치지 않게 한 화면 내린 뒤에만 */
.hand-page .quick a,.hand-page .quick button{ display:flex; flex-direction:column; align-items:center; gap:2px; width:60px; padding:11px 4px;
  background:var(--paper); border:1.5px solid var(--ink); border-radius:14px; font-family:var(--hand); font-size:11.5px;
  color:var(--ink); transition:transform var(--t) }
.hand-page .quick a span:first-child,.hand-page .quick button span:first-child{ font-size:18px }
.hand-page .quick a:hover,.hand-page .quick button:hover{ transform:translateY(-2px) rotate(-1deg) }

/* ── 히어로(랜딩) ──────────────────────────────────────────── */
.hand-page .hero{ position:relative; display:flex; align-items:flex-start; overflow:hidden;
  padding-block:calc(var(--header-h) + 40px) var(--sp-5) }
.hand-page .hero__word{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); pointer-events:none; z-index:0;
  font-family:var(--disp); font-weight:700; font-size:clamp(60px,13vw,190px); color:transparent;
  -webkit-text-stroke:2.4px var(--ink); letter-spacing:.02em; opacity:.08; white-space:nowrap }
.hand-page .doodles{ position:absolute; inset:0; z-index:1; pointer-events:none }
.hand-page .doodle{ position:absolute; color:var(--ink); opacity:.5; will-change:transform }
.hand-page .dood-float{ animation:dfloat 7s var(--e-soft) infinite alternate }
@keyframes dfloat{ from{ transform:translateY(-6px) rotate(-3deg) } to{ transform:translateY(8px) rotate(4deg) } }
/* 낙서 액자(gumson 복도의 '문'): 좌우 여백에 떠 있는 손그림 카드 */
.hand-page .door{ position:absolute; z-index:2; width:132px; text-align:center; font-family:var(--hand); color:var(--ink); transition:transform var(--t) var(--e-out) }
.hand-page .door__frame{ display:flex; align-items:center; justify-content:center; height:126px; border:2px solid var(--ink); border-radius:8px 7px 9px 6px;
  background:rgba(255,255,255,.6); filter:var(--rough); position:relative; overflow:hidden }
.hand-page .door__frame svg{ width:52px; height:52px; opacity:.9 }
.hand-page .door__knob{ position:absolute; right:12px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--ink) }
.hand-page .door span{ display:block; margin-top:9px; font-size:16.5px }
.hand-page .door small{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint) }
.hand-page .door:hover{ transform:translateY(-4px) rotate(-1deg) }
.hand-page .door:hover .door__frame{ background:var(--ink) } .hand-page .door:hover .door__frame svg{ filter:invert(1) }
.hand-page .hero__intro{ position:relative; z-index:5; text-align:center; width:100% }
.hand-page .hero__intro .codetag{ display:inline-block; margin-bottom:18px }
.hand-page .hero h1{ font-family:var(--disp); font-weight:700; font-size:var(--fs-3xl); line-height:1.06 }
.hand-page .hero__lead{ margin:20px auto 0; max-width:52ch; font-size:var(--fs-md); color:var(--ink-2) }
.hand-page .hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px }
.hand-page .hero__note{ margin-top:22px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-faint) }
.hand-page .hero__note b{ font-family:var(--hand); font-size:15px; letter-spacing:0; color:var(--ink) }

/* ── 손으로 그린 흐름(프롬프트 → … → 디자인) ───────────────── */
.hand-page .flow{ display:flex; align-items:stretch; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:40px }
.hand-page .flow__node{ flex:1 1 150px; max-width:200px; border:1.5px solid var(--ink); border-radius:14px 12px 15px 13px; background:var(--panel);
  padding:18px 14px; text-align:center; transition:transform var(--t) var(--e-out) }
.hand-page .flow__node:hover{ transform:translateY(-3px) rotate(-.4deg) }
.hand-page .flow__node svg{ width:26px; height:26px; margin:0 auto 8px; color:var(--ink) }
.hand-page .flow__node b{ display:block; font-family:var(--disp); font-weight:700; font-size:var(--fs-md) }
.hand-page .flow__node small{ display:block; margin-top:4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-faint) }
.hand-page .flow__arrow{ align-self:center; font-family:var(--script); font-size:30px; color:var(--ink-soft); transform:rotate(-4deg) }
.hand-page .flow__pair{ display:flex; flex-direction:column; gap:10px; flex:1 1 150px; max-width:200px }
.hand-page .flow__pair .flow__node{ max-width:none; padding:12px 14px }
.hand-page .flow__final{ flex:1 1 100%; text-align:center; margin-top:14px; font-family:var(--script); font-size:var(--fs-lg); color:var(--ink) }

/* ── 개념 카드 6개 ─────────────────────────────────────────── */
.hand-page .cgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px }
.hand-page .ccard{ border:1.5px solid var(--ink); border-radius:14px 12px 15px 13px; padding:24px 22px; background:var(--panel);
  transition:transform var(--t) var(--e-out); position:relative }
.hand-page .ccard:hover{ transform:translateY(-3px) rotate(-.3deg) }
.hand-page .ccard__no{ position:absolute; top:18px; right:20px; font-family:var(--mono); font-size:12px; color:var(--ink-faint) }
.hand-page .ccard svg{ width:34px; height:34px; color:var(--ink) }
.hand-page .ccard h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); margin-top:16px }
.hand-page .ccard p{ margin-top:10px; color:var(--ink-soft); font-size:var(--fs-sm) }
.hand-page .capstone{ grid-column:1/-1; text-align:center; padding:22px; border:1.5px dashed var(--line-strong); border-radius:14px;
  font-family:var(--script); font-size:var(--fs-lg); color:var(--ink) }
.hand-page .capstone .eq{ font-family:var(--disp); font-weight:700; margin-right:8px }

/* ── 구조(층별) 표 ─────────────────────────────────────────── */
.hand-page .cmap{ margin-top:40px; border:1.5px solid var(--ink); border-radius:14px; background:var(--panel); overflow:hidden }
.hand-page .cmap__row{ display:grid; grid-template-columns:180px 1fr; border-bottom:1.5px dashed var(--line) }
.hand-page .cmap__row:last-child{ border-bottom:0 }
.hand-page .cmap__role{ display:flex; align-items:center; gap:12px; padding:18px 20px; font-family:var(--hand); font-size:17px; border-right:1.5px dashed var(--line); background:rgba(26,26,26,.03) }
.hand-page .cmap__role .rn{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--ink); display:inline-grid; place-items:center; font-family:var(--mono); font-size:12px }
.hand-page .cmap__items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.hand-page .cmap__item{ display:flex; gap:14px; padding:18px 20px; border-left:1.5px dashed var(--line) }
.hand-page .cmap__item:first-child{ border-left:0 }
.hand-page .cmap__item svg{ width:24px; height:24px; flex-shrink:0; color:var(--ink); margin-top:3px }
.hand-page .cmap__item .ct{ font-family:var(--disp); font-weight:700; font-size:var(--fs-md) }
.hand-page .cmap__item .cs{ margin-top:4px; font-size:var(--fs-sm); color:var(--ink-soft) }

/* ── 4 모드 카드 ───────────────────────────────────────────── */
.hand-page .mgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px }
.hand-page .mcard{ display:flex; flex-direction:column; border:1.5px solid var(--ink); border-radius:16px 14px 17px 15px; padding:24px 22px;
  background:var(--panel); color:inherit; transition:transform var(--t) var(--e-out); position:relative }
.hand-page .mcard:hover{ transform:translateY(-3px) rotate(-.3deg) }
.hand-page .mcard__no{ position:absolute; top:16px; right:18px; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--ink);
  display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:15px }
.hand-page .mcard--ink{ background:var(--ink); color:var(--paper) }
.hand-page .mcard--ink .mcard__no{ border-color:var(--paper) }
.hand-page .mcard__kick{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-faint); padding-right:44px }
.hand-page .mcard--ink .mcard__kick{ color:rgba(250,250,250,.6) }
.hand-page .mcard h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-md); margin-top:10px }
.hand-page .mcard p{ margin-top:8px; color:var(--ink-soft); font-size:var(--fs-sm); flex:0 }
.hand-page .mcard--ink p{ color:rgba(250,250,250,.78) }
.hand-page .mcard__prev{ margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; border-radius:8px; overflow:hidden }
.hand-page .mcard__prev img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; border:1px solid var(--line-2); mix-blend-mode:multiply }
.hand-page .mcard__tall{ margin-top:14px; height:150px; overflow:hidden; border-radius:8px; border:1px solid var(--line-2); background:var(--paper-2) }
.hand-page .mcard__tall img{ width:100%; height:auto; mix-blend-mode:multiply }
.hand-page .mcard__video{ position:relative; margin-top:14px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000; border:1px solid rgba(250,250,250,.2) }
.hand-page .mcard__video video{ width:100%; height:100%; object-fit:cover }
.hand-page .mcard__video .play{ position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%; background:rgba(250,250,250,.9);
  color:var(--ink); display:grid; place-items:center; font-size:14px; pointer-events:none }
.hand-page .mcard:hover .mcard__video .play{ opacity:0 }
.hand-page .mcard__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.hand-page .mcard__tags .badge{ font-size:11px; padding:3px 9px }
.hand-page .mcard--ink .badge{ border-color:rgba(250,250,250,.5); color:rgba(250,250,250,.85) }
.hand-page .mcard__go{ margin-top:auto; padding-top:16px; font-family:var(--hand); font-size:16px; display:inline-flex; gap:6px; align-items:center }
.hand-page .mcard__go .arr{ transition:transform var(--t) var(--e-out) }
.hand-page .mcard:hover .mcard__go .arr{ transform:translateX(4px) }

/* ── 갤러리(액자 그리드) ───────────────────────────────────── */
.hand-page .ggrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-top:40px }
.hand-page .ggrid--wide{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
.hand-page .gcard{ display:block; color:inherit }
.hand-page .gcard .frame__img{ aspect-ratio:1/1 }
.hand-page .gcard--tall .frame__img{ aspect-ratio:auto; height:280px }
.hand-page .gcard--tall .frame__img img{ object-fit:cover; object-position:top }
.hand-page .gcard--video .frame__img{ aspect-ratio:16/9; background:#000; position:relative }
.hand-page .gcard--video video{ width:100%; height:100%; object-fit:cover }
.hand-page .gcard--wide .frame__img{ aspect-ratio:47/28 }
.hand-page .gcard .cap{ padding:12px 14px 14px; border-top:1.5px dashed var(--line) }
.hand-page .gcard .cap b{ display:block; font-family:var(--hand); font-weight:400; font-size:16px; line-height:1.35 }
.hand-page .gcard .cap small{ display:block; margin-top:3px; font-size:var(--fs-xs); color:var(--ink-faint) }
.hand-page .grow{ margin-top:52px }
.hand-page .grow__head{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:2px solid var(--ink) }
.hand-page .grow__head .no{ flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; font-size:15px }
.hand-page .grow__head h4{ font-family:var(--disp); font-weight:700; font-size:var(--fs-md) }
.hand-page .grow__head p{ margin-top:4px; font-size:var(--fs-sm); color:var(--ink-soft) }
.hand-page .grow__head .go{ margin-left:auto; align-self:center; font-family:var(--hand); font-size:16px; white-space:nowrap; border-bottom:1.5px dashed var(--line-strong) }
.hand-page .grow .ggrid{ margin-top:18px }
.hand-page .gempty{ margin-top:18px; border:1.5px dashed var(--line-strong); border-radius:14px; padding:26px; text-align:center;
  color:var(--ink-faint); font-family:var(--hand); font-size:16px }

/* ── 기능 카드 ─────────────────────────────────────────────── */
.hand-page .fgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px }
.hand-page .fcard{ border:1.5px solid var(--ink); border-radius:14px 12px 15px 13px; padding:24px 22px; background:var(--panel); transition:transform var(--t) var(--e-out) }
.hand-page .fcard:hover{ transform:translateY(-3px) rotate(-.3deg) }
.hand-page .fcard svg{ width:38px; height:38px; color:var(--ink) }
.hand-page .fcard h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-md); margin-top:16px }
.hand-page .fcard p{ margin-top:10px; color:var(--ink-soft); font-size:var(--fs-sm) }

/* ── FAQ ───────────────────────────────────────────────────── */
.hand-page .faq{ margin-top:36px; border-top:1.5px dashed var(--line) }
.hand-page .acc-q{ width:100%; text-align:left; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:20px 0; border-bottom:1.5px dashed var(--line); font-family:var(--hand); font-size:var(--fs-md); color:var(--ink) }
.hand-page .acc-q .pm{ font-family:var(--mono); transition:transform var(--t) }
.hand-page .acc-q[aria-expanded=true] .pm{ transform:rotate(45deg) }
.hand-page .acc-a{ max-height:0; overflow:hidden; transition:max-height var(--t) var(--e-out) }
.hand-page .acc-a p{ padding:6px 0 22px; color:var(--ink-soft) }

/* ── CTA 밴드 · 푸터 ───────────────────────────────────────── */
.hand-page .ctaband{ text-align:center }
.hand-page .ctaband h2{ font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl); max-width:20ch; margin-inline:auto }
.hand-page .site-footer{ border-top:2px solid var(--ink); padding-block:var(--sp-6) var(--sp-5); position:relative; overflow:hidden }
.hand-page .foot-collage{ display:flex; flex-wrap:wrap; gap:20px 34px; font-family:var(--disp); font-weight:700; font-size:clamp(30px,6vw,72px);
  color:transparent; -webkit-text-stroke:1.6px var(--line); margin-bottom:52px; line-height:1 }
.hand-page .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px }
.hand-page .foot-brand p{ margin-top:16px; color:var(--ink-soft); font-size:var(--fs-sm); max-width:34ch }
.hand-page .foot-col h4{ font-family:var(--hand); font-size:17px; margin-bottom:14px }
.hand-page .foot-col a{ display:block; padding:7px 0; color:var(--ink-soft); font-size:15.5px }
.hand-page .foot-col a:hover{ color:var(--ink) }
.hand-page .foot-word{ font-family:var(--disp); font-weight:700; font-size:clamp(60px,20vw,260px); color:transparent;
  -webkit-text-stroke:1.6px var(--line-2); line-height:.8; margin:44px 0 20px; text-align:center }
.hand-page .foot-legal p{ color:var(--ink-faint); font-size:13px; line-height:1.9 }
.hand-page .foot-legal a:hover{ color:var(--ink) }

/* ── 인증 페이지 ───────────────────────────────────────────── */
.hand-page .authwrap{ max-width:460px; margin-inline:auto }
.hand-page .authwrap .frame{ padding:clamp(26px,4vw,40px) }
.hand-page .authwrap h1{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl); text-align:center }
.hand-page .authwrap .sub{ text-align:center; color:var(--ink-soft); font-size:var(--fs-sm); margin-top:8px; margin-bottom:26px }
.hand-page .authwrap .btn{ width:100%; margin-top:6px }
.hand-page .authwrap .alt{ text-align:center; margin-top:20px; font-size:var(--fs-sm); color:var(--ink-soft) }
.hand-page .authwrap .alt a{ border-bottom:1px dashed var(--line-strong); color:var(--ink) }
.hand-page .authwrap .note{ margin:0 0 20px; padding:14px 16px; border:1.5px dashed var(--line-strong); border-radius:12px; font-size:var(--fs-sm); color:var(--ink-soft) }
.hand-page .authwrap .note b{ font-family:var(--hand); font-weight:400; font-size:16px; color:var(--ink); display:block; margin-bottom:6px }
.hand-page .authwrap .note .row{ display:flex; align-items:center; gap:8px; margin-top:4px }
.hand-page .authwrap .note code{ font-family:var(--mono); font-size:13px; background:rgba(26,26,26,.06); padding:2px 8px; border-radius:6px }
.hand-page .authwrap .note button{ font-family:var(--hand); font-size:14px; padding:3px 10px; border:1.5px solid var(--line-strong); border-radius:999px; background:var(--paper); color:var(--ink) }
.hand-page .authwrap .note .demo-fill{ margin-top:10px; width:100%; padding:9px 10px; border-color:var(--ink) }
.hand-page .authwrap .msg{ display:none; align-items:flex-start; gap:8px; margin-bottom:16px; padding:11px 14px; border:1.5px solid var(--red); border-radius:12px; color:var(--red); font-size:var(--fs-sm) }
.hand-page .authwrap .msg.show{ display:flex }
.hand-page .authwrap .msg--ok{ border-color:var(--ink); color:var(--ink); background:var(--paper-2) }
.hand-page .authwrap .pw-toggle{ position:absolute; right:12px; bottom:9px; width:32px; height:32px; display:grid; place-items:center; color:var(--ink-faint); border-radius:8px }
.hand-page .authwrap .pw-toggle:hover{ color:var(--ink) }
.hand-page .authwrap .pw-toggle .icon-eye-off{ display:none }
.hand-page .authwrap .pw-toggle[data-shown="1"] .icon-eye{ display:none }
.hand-page .authwrap .pw-toggle[data-shown="1"] .icon-eye-off{ display:block }
.hand-page .authwrap .field--pw input{ padding-right:48px }
.hand-page .pw-strength{ display:flex; gap:5px; margin-top:8px }
.hand-page .pw-strength .bar{ flex:1; height:4px; border-radius:2px; background:var(--line-2) }
.hand-page .pw-strength.s1 .bar:nth-child(-n+1),.hand-page .pw-strength.s2 .bar:nth-child(-n+2),.hand-page .pw-strength.s3 .bar:nth-child(-n+3),.hand-page .pw-strength.s4 .bar:nth-child(-n+4){ background:var(--ink) }
.hand-page .pw-strength-label{ margin-top:5px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-faint) }
.hand-page .auth-foot{ text-align:center; margin-top:40px; font-family:var(--hand); color:var(--ink-faint); font-size:15px }
.hand-page .auth-foot::before{ content:""; display:inline-block; width:28px; border-top:2px solid var(--line); vertical-align:middle; margin-right:12px }

/* ============================================================
   [SHELL] 내부 페이지 공통 헤더(site-header.php)
   기존 마크업(.sh-*)과 data-* 훅은 그대로 두고 룩만 바꾼다.
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:1000; height:var(--site-header-h);
  display:flex; align-items:center; gap:18px; padding:0 18px;
  background:rgba(250,250,250,.96); border-bottom:2px solid var(--ink);
  font-family:var(--body); font-size:14px; color:var(--ink) }
.site-header .sh-logo{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0; color:var(--ink); text-decoration:none }
.site-header .sh-logo .brand__mark{ width:32px; height:32px }
.site-header .sh-logo .brand__name{ font-size:19px }
.site-header .sh-logo .brand__sub{ font-size:8.5px; letter-spacing:.22em; margin-top:2px }
.site-header .sh-logo-text{ font-family:var(--disp); font-weight:700; font-size:19px; color:var(--ink) }
.site-header .sh-hamburger{ display:none; background:transparent; border:0; color:var(--ink); cursor:pointer; padding:4px 8px }
.site-header .sh-nav{ display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain }
.site-header .sh-nav::-webkit-scrollbar{ display:none }
.site-header .sh-nav-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:12px;
  color:var(--ink-2); text-decoration:none; white-space:nowrap; position:relative; font-family:var(--hand); font-size:16px;
  transition:background var(--t-fast), color var(--t-fast) }
.site-header .sh-nav-link:hover{ background:rgba(26,26,26,.05); color:var(--ink) }
.site-header .sh-nav-link.is-active{ color:var(--ink); background:rgba(26,26,26,.07) }
.site-header .sh-nav-link.is-active::after{ content:none }
.site-header .sh-nav-ic{ display:inline-flex; align-items:center; line-height:1 }
.site-header .sh-nav-ic svg{ display:block; width:16px; height:16px }
.site-header .sh-nav-sep{ flex:none; width:0; height:20px; margin:0 8px; border-left:1.5px dashed var(--line); align-self:center }
.site-header .sh-nav-badge{ display:inline-block; min-width:16px; padding:0 4px; font-size:10px; line-height:16px; text-align:center;
  background:var(--ink); color:var(--paper); border-radius:8px; font-family:var(--mono); margin-left:2px }
.site-header .sh-nav-hot{ display:inline-block; padding:1px 6px; font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  border:1.5px solid var(--ink); color:var(--ink); border-radius:999px; line-height:14px; margin-left:4px; text-transform:uppercase }
.site-header .sh-right{ display:flex; align-items:center; gap:8px; flex-shrink:0 }
.site-header .sh-cta{ display:inline-flex; align-items:center; gap:5px; height:38px; padding:0 15px; border-radius:999px;
  background:var(--ink); color:var(--paper); text-decoration:none; font-family:var(--hand); font-size:15.5px; border:1.5px solid var(--ink);
  transition:transform var(--t-fast) }
.site-header .sh-cta:hover{ transform:translateY(-1px) rotate(-.6deg) }
.site-header .sh-login{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border:1.5px solid var(--ink); border-radius:999px;
  color:var(--ink); text-decoration:none; font-family:var(--hand); font-size:15.5px; background:var(--paper) }
.site-header .sh-login:hover{ transform:translateY(-1px) rotate(-.6deg) }
.site-header .sh-admin-badge{ display:inline-flex; align-items:center; gap:4px; height:38px; padding:0 12px; border-radius:999px;
  border:1.5px dashed var(--ink); color:var(--ink); text-decoration:none; font-family:var(--hand); font-size:14px; background:var(--paper-2) }
.site-header .sh-cta-text,.site-header .sh-admin-text,.site-header .sh-nav-lb{ display:none }
/* 워크스페이스 스위처 */
.site-header .sh-ws-wrap{ position:relative }
.site-header .sh-ws-chip{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:999px;
  background:var(--paper); border:1.5px solid var(--line-strong); color:var(--ink); cursor:pointer; font-family:var(--hand); font-size:14px; max-width:150px }
.site-header .sh-ws-chip:hover{ border-color:var(--ink) }
.site-header .sh-ws-chip-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.site-header .sh-ws-menu{ position:absolute; top:calc(100% + 8px); left:0; z-index:1001; background:var(--panel); border:1.5px solid var(--ink);
  border-radius:14px; width:280px; padding:8px; box-shadow:6px 8px 0 rgba(26,26,26,.08); font-size:13.5px }
.site-header .sh-ws-item{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:9px; cursor:pointer }
.site-header .sh-ws-item:hover{ background:rgba(26,26,26,.05) }
.site-header .sh-ws-item.cur{ background:rgba(26,26,26,.07); font-family:var(--hand); font-size:15px }
.site-header .sh-ws-manage{ background:transparent; border:0; cursor:pointer; font-size:13px; padding:2px 5px; border-radius:5px; color:var(--ink-faint); flex-shrink:0 }
.site-header .sh-ws-manage:hover{ color:var(--ink) }
.site-header .sh-ws-create{ display:flex; gap:6px; margin-top:8px; padding-top:8px; border-top:1.5px dashed var(--line) }
.site-header .sh-ws-create input{ flex:1; padding:7px 10px; border:1.5px solid var(--line-strong); border-radius:9px; font:inherit; font-size:13px; background:var(--paper) }
.site-header .sh-ws-create button{ padding:6px 12px; background:var(--ink); color:var(--paper); border:0; border-radius:999px; cursor:pointer; font-family:var(--hand); font-size:14px }
.site-header .sh-ws-role{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); border:1px solid var(--line); padding:1px 7px; border-radius:999px }
.sh-wm-modal{ position:fixed; inset:0; z-index:9600; background:rgba(26,26,26,.5); display:flex; align-items:center; justify-content:center; padding:20px }
.sh-wm-modal[hidden]{ display:none }
.sh-wm-card{ background:var(--panel); border:1.5px solid var(--ink); border-radius:16px; width:440px; max-width:100%; font-family:var(--body); overflow:hidden }
.sh-wm-head{ padding:14px 18px; border-bottom:1.5px dashed var(--line); display:flex; justify-content:space-between; align-items:center; font-family:var(--hand); font-size:17px }
.sh-wm-body{ padding:16px 18px; max-height:60vh; overflow-y:auto }
.sh-wm-row{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1.5px dashed var(--line-2) }
.sh-wm-row:last-child{ border-bottom:0 }
.sh-wm-row .nm{ flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sh-wm-row select{ padding:5px 7px; border:1.5px solid var(--line-strong); border-radius:8px; font-size:12px; background:var(--paper) }
.sh-wm-row button{ background:transparent; border:0; color:var(--red); cursor:pointer; font-size:14px }
.sh-wm-invite{ display:flex; gap:6px; margin-top:12px }
.sh-wm-invite input{ flex:1; padding:8px 10px; border:1.5px solid var(--line-strong); border-radius:9px; font-size:13px; background:var(--paper) }
.sh-wm-invite button{ padding:8px 14px; background:var(--ink); color:var(--paper); border:0; border-radius:999px; cursor:pointer; font-family:var(--hand); font-size:14px }
/* 알림 종 · 버그 · 언어 · 아바타 */
.site-header .sh-bell-wrap,.site-header .sh-lang-wrap,.site-header .sh-avatar-wrap{ position:relative }
.site-header .sh-bell,.site-header .sh-bug,.site-header .sh-lang-btn{ height:38px; min-width:38px; border-radius:999px; background:var(--paper);
  border:1.5px solid var(--line-strong); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:0 10px; line-height:1; position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.08em; flex-shrink:0 }
.site-header .sh-bell{ width:38px; padding:0 } .site-header .sh-bug{ width:38px; padding:0 }
.site-header .sh-bell:hover,.site-header .sh-bug:hover,.site-header .sh-lang-btn:hover{ border-color:var(--ink) }
.site-header .sh-bell svg,.site-header .sh-bug svg,.site-header .sh-lang-btn svg{ display:block; width:16px; height:16px }
.site-header .sh-bell-dot{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; background:var(--ink); color:var(--paper);
  border-radius:8px; font-family:var(--mono); font-size:10px; line-height:16px; text-align:center; border:2px solid var(--paper) }
.site-header .sh-bell-menu,.site-header .sh-lang-menu,.site-header .sh-avatar-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:1001;
  background:var(--panel); border:1.5px solid var(--ink); border-radius:14px; box-shadow:6px 8px 0 rgba(26,26,26,.08); font-size:13.5px }
.site-header .sh-bell-menu{ width:340px; max-width:90vw; overflow:hidden }
.site-header .sh-bell-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1.5px dashed var(--line); font-family:var(--hand); font-size:16px }
.site-header .sh-bell-head button{ background:transparent; border:0; color:var(--ink); cursor:pointer; font-family:var(--hand); font-size:14px; border-bottom:1px dashed var(--line-strong) }
.site-header .sh-bell-list{ max-height:360px; overflow:auto }
.site-header .sh-bell-item{ display:block; padding:10px 14px; border-bottom:1.5px dashed var(--line-2); text-decoration:none; color:var(--ink); position:relative }
.site-header .sh-bell-item:last-child{ border-bottom:0 }
.site-header .sh-bell-item:hover{ background:rgba(26,26,26,.04) }
.site-header .sh-bell-item.unread{ background:var(--paper-2) }
.site-header .sh-bell-item.unread::before{ content:''; position:absolute; left:5px; top:18px; width:6px; height:6px; border-radius:50%; background:var(--ink) }
.site-header .sh-bell-item .sh-bell-t{ font-family:var(--hand); font-size:15px; margin-bottom:2px }
.site-header .sh-bell-item .sh-bell-b{ color:var(--ink-soft); font-size:12.5px; line-height:1.5 }
.site-header .sh-bell-item .sh-bell-when{ color:var(--ink-faint); font-family:var(--mono); font-size:10.5px; margin-top:4px }
.site-header .sh-bell-empty{ padding:28px 12px; text-align:center; color:var(--ink-faint); font-family:var(--hand); font-size:15px }
.site-header .sh-lang-menu{ min-width:200px; padding:6px; max-height:70vh; overflow:auto }
.site-header .sh-lang-menu button{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; background:transparent; border:0;
  border-radius:9px; text-align:left; cursor:pointer; color:var(--ink); font-size:14px; font-family:var(--hand) }
.site-header .sh-lang-menu button:hover{ background:rgba(26,26,26,.05) }
.site-header .sh-lang-menu button.cur{ background:rgba(26,26,26,.07) }
.site-header .sh-lang-menu button span{ font-family:var(--mono) !important; color:var(--ink-faint) !important; font-size:10px !important; letter-spacing:.1em }
.site-header .sh-avatar{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
  font-family:var(--disp); font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden }
.site-header .sh-avatar-img{ width:100%; height:100%; object-fit:cover; display:block }
.site-header .sh-avatar:hover{ box-shadow:0 0 0 3px rgba(26,26,26,.14) }
.site-header .sh-avatar-menu{ min-width:210px; padding:6px }
.site-header .sh-avatar-menu a{ display:block; padding:8px 10px; color:var(--ink); text-decoration:none; border-radius:9px; font-family:var(--hand); font-size:15px }
.site-header .sh-avatar-menu a:hover{ background:rgba(26,26,26,.05) }
.site-header .sh-avatar-info{ padding:8px 10px; border-bottom:1.5px dashed var(--line); margin-bottom:4px; display:flex; flex-direction:column; gap:2px }
.site-header .sh-avatar-info strong{ font-family:var(--hand); font-weight:400; font-size:15px; color:var(--ink) }
.site-header .sh-avatar-info span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint) }
.site-header .sh-avatar-logout{ color:var(--red) !important }
/* 버그 신고 모달 */
.sh-bug-modal{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center }
.sh-bug-modal[hidden]{ display:none }
.sh-bug-backdrop{ position:absolute; inset:0; background:rgba(26,26,26,.5) }
.sh-bug-card{ position:relative; background:var(--panel); border:1.5px solid var(--ink); border-radius:16px; width:460px; max-width:calc(100vw - 32px);
  max-height:84vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:8px 10px 0 rgba(26,26,26,.1); font-family:var(--body) }
.sh-bug-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1.5px dashed var(--line); padding:4px 8px 0 12px }
.sh-bug-tabs{ display:flex; gap:2px }
.sh-bug-tab{ background:transparent; border:0; padding:12px 14px; cursor:pointer; font-family:var(--hand); font-size:16px; color:var(--ink-faint); border-bottom:2px solid transparent }
.sh-bug-tab.is-active{ color:var(--ink); border-bottom-color:var(--ink) }
.sh-bug-x{ background:transparent; border:0; font-size:24px; cursor:pointer; color:var(--ink-faint); line-height:1; padding:4px 8px; font-family:var(--hand) }
.sh-bug-body{ padding:16px; overflow-y:auto }
.sh-bug-body input[type=text],.sh-bug-body textarea,.sh-bug-body select{ width:100%; padding:10px 12px; border:1.5px solid var(--line-strong); border-radius:10px;
  font-family:inherit; font-size:14px; margin-bottom:9px; box-sizing:border-box; background:var(--paper) }
.sh-bug-body textarea{ resize:vertical }
.sh-bug-actions{ display:flex; justify-content:flex-end }
.sh-bug-submit{ background:var(--ink); color:var(--paper); border:0; border-radius:999px; padding:10px 22px; font-family:var(--hand); font-size:15px; cursor:pointer }
.sh-bug-submit:disabled{ opacity:.5; cursor:default }
.sh-bug-msg{ margin-top:10px; font-size:12.5px }
.sh-bug-list{ display:flex; flex-direction:column; gap:7px }
.sh-bug-empty{ text-align:center; color:var(--ink-faint); font-family:var(--hand); font-size:15px; padding:26px 0 }
.sh-bug-row{ border:1.5px solid var(--line-strong); border-radius:12px; padding:9px 11px; cursor:pointer }
.sh-bug-row:hover{ border-color:var(--ink) }
.sh-bug-row .r-t{ font-family:var(--hand); font-size:15px }
.sh-bug-row .r-m{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-top:2px; display:flex; gap:7px }
.sh-bug-st{ font-family:var(--mono); font-size:10px; padding:1px 7px; border-radius:999px; border:1px solid var(--line-strong) }
.sh-bug-st.open{ background:var(--paper-2) } .sh-bug-st.in_progress{ background:var(--ink); color:var(--paper) }
.sh-bug-st.resolved{ border-style:dashed } .sh-bug-st.closed{ opacity:.6 }
/* ── 그룹 탭 + 전체 메뉴판(메가 메뉴) — 2026-09-07 ─────────────────
   아이콘 27개를 15px 로 나열하던 것을 그룹 5개 탭(아이콘 20px+라벨)로 줄이고,
   마우스 오버 시 헤더 아래로 전체 메뉴판(그룹별 아이콘 22px·이름·한 줄 설명)을 펼친다. */
.site-header .sh-nav{ overflow:visible; gap:4px }
.site-header .sh-right{ margin-left:auto }
.site-header .sh-grp{ position:relative; flex:0 1 auto; min-width:0 }
.site-header .sh-grp-top{ display:flex; align-items:center; gap:8px; min-width:0; padding:9px 13px; border-radius:12px; font-family:var(--hand); font-size:16.5px;
  color:var(--ink-2); white-space:nowrap; text-decoration:none; transition:background var(--t-fast), color var(--t-fast) }
.site-header .sh-grp-lb{ min-width:0; overflow:hidden; text-overflow:ellipsis }   /* 폭이 모자라면 라벨을 말줄임(우측 도구와 겹치지 않게) */
.site-header .sh-grp-ic{ display:inline-flex } .site-header .sh-grp-ic svg{ width:20px; height:20px }
.site-header .sh-grp-top > svg{ width:12px; height:12px; transition:transform .3s }
.site-header .sh-grp:hover .sh-grp-top, .site-header .sh-grp.is-active .sh-grp-top{ color:var(--ink); background:rgba(26,26,26,.06) }
.site-header .sh-grp.is-active .sh-grp-top{ box-shadow:inset 0 -2px 0 var(--ink) }
.site-header.is-board-open .sh-grp-top > svg{ transform:rotate(180deg) }
.site-header .sh-board-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px 0 11px; margin-left:6px; flex-shrink:0;
  border:1.5px dashed var(--ink); border-radius:999px; background:var(--paper); font-family:var(--hand); font-size:15px; color:var(--ink); cursor:pointer }
.site-header .sh-board-btn svg{ width:16px; height:16px }
.site-header .sh-board-btn:hover, .site-header.is-board-open .sh-board-btn{ background:var(--ink); color:var(--paper); border-style:solid }
.site-header .sh-board{ position:absolute; left:0; right:0; top:100%; z-index:1002; background:var(--paper); border-bottom:2px solid var(--ink);
  box-shadow:0 14px 0 rgba(26,26,26,.06); padding:22px var(--gutter) 16px; max-height:calc(100vh - var(--site-header-h)); overflow:auto;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .22s, transform .22s var(--e-out), visibility .22s }
.site-header .sh-board::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px }   /* 탭→메뉴판 사이 틈 메움 */
.site-header.is-board-open .sh-board{ opacity:1; visibility:visible; transform:none }
.site-header .sh-board__inner{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px 20px; max-width:1360px; margin-inline:auto }
.site-header .sh-board__grp{ padding:14px 14px 8px; border:1.5px dashed var(--line); border-radius:14px 12px 15px 13px; background:transparent; transition:border-color .2s, background .2s }
.site-header .sh-board__grp.is-hot, .site-header .sh-board__grp:hover{ border-color:var(--ink); border-style:solid; background:var(--panel) }
.site-header .sh-board__grp.is-cur{ background:var(--paper-2) }
.site-header .sh-board__grp h4{ margin:0; display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:17px; color:var(--ink) }
.site-header .sh-board__grp h4 svg{ width:20px; height:20px; flex-shrink:0 }
.site-header .sh-board__grp h4{ flex-wrap:wrap }
.site-header .sh-board__grp h4 small{ flex-basis:100%; margin:2px 0 0 28px; font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:.14em; color:var(--ink-faint); white-space:nowrap }
.site-header .sh-board__gdesc{ margin:6px 0 8px; padding-bottom:10px; border-bottom:1.5px dashed var(--line); font-size:12.5px; line-height:1.55; color:var(--ink-soft) }
.site-header .sh-board__grp ul{ list-style:none; margin:0; padding:0 }
.site-header .sh-board__grp li a{ display:flex; gap:10px; align-items:flex-start; padding:8px; border-radius:10px; color:var(--ink); text-decoration:none; transition:background .15s }
.site-header .sh-board__grp li a:hover{ background:rgba(26,26,26,.06) }
.site-header .sh-board__grp li a.is-active{ background:var(--ink); color:var(--paper) }
.site-header .sh-board__grp li a .ic{ flex-shrink:0; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; margin-top:1px }
.site-header .sh-board__grp li a .ic svg{ width:22px; height:22px }
.site-header .sh-board__grp li a .tx{ min-width:0 }
.site-header .sh-board__grp li a b{ display:block; font-family:var(--hand); font-weight:400; font-size:16.5px; line-height:1.25 }
.site-header .sh-board__grp li a small{ display:block; margin-top:2px; font-size:12px; line-height:1.45; color:var(--ink-soft); word-break:keep-all }
.site-header .sh-board__grp li a.is-active small{ color:rgba(250,250,250,.75) }
.site-header .sh-board__foot{ max-width:1360px; margin:14px auto 0; display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint) }
.site-header .sh-board__foot span{ font-family:var(--hand); font-size:14px; letter-spacing:0; color:var(--ink-soft) }
.site-header .sh-board__foot a{ color:var(--ink); border-bottom:1px dashed var(--line-strong); font-family:var(--hand); font-size:14px; letter-spacing:0 }
/* 1151~1560px: 라벨은 유지하고 여백·글자만 줄인다(아이콘만 남기지 않는다). 전체 메뉴 버튼은 아이콘만, 워크스페이스 칩은 좁게
   (로그인 상태 = 워크스페이스 칩 + 탭 5개 + 우측 도구 5개가 1440px 에서도 넘쳐 겹치던 문제) */
@media (max-width:1560px){
  .site-header{ gap:10px } .site-header .sh-nav{ gap:2px }
  .site-header .sh-grp-top{ font-size:15px; padding:8px 9px; gap:6px } .site-header .sh-grp-ic svg{ width:18px; height:18px }
  .site-header .sh-board-btn span{ display:none } .site-header .sh-board-btn{ padding:0 11px; margin-left:2px }
  .site-header .sh-ws-chip{ max-width:104px }
}
@media (max-width:1200px){ .site-header .sh-grp-lb{ display:none } .site-header .sh-grp-top{ padding:9px 10px } .site-header .sh-grp-ic svg{ width:20px; height:20px } }
@media (max-width:1150px){
  .site-header .sh-nav{ background:var(--paper) }
  .site-header .sh-grp, .site-header .sh-board-btn{ display:none }
  .site-header .sh-board{ position:static; opacity:1; visibility:visible; transform:none; border:0; box-shadow:none; padding:4px 0 28px; max-height:none; overflow:visible; background:transparent }
  .site-header .sh-board::before{ display:none }
  .site-header .sh-board__inner{ grid-template-columns:1fr; gap:14px }
  .site-header .sh-board__grp li a b{ font-size:18px } .site-header .sh-board__grp li a small{ font-size:13px }
}
/* 브레드크럼 */
.sh-crumb{ display:flex; align-items:center; gap:8px; padding:9px 18px; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--ink-faint); background:transparent; border-bottom:1.5px dashed var(--line) }
.sh-crumb a{ color:var(--ink-faint); text-decoration:none } .sh-crumb a:hover{ color:var(--ink) }
.sh-crumb .sep{ color:var(--ink-ghost) } .sh-crumb .cur{ color:var(--ink) }
[dir="rtl"] .site-header{ direction:rtl }
[dir="rtl"] .site-header .sh-avatar-menu,[dir="rtl"] .site-header .sh-lang-menu,[dir="rtl"] .site-header .sh-bell-menu{ right:auto; left:0 }
[dir="rtl"] .site-header .sh-ws-menu{ left:auto; right:0 }
@media (max-width:1150px){
  .site-header{ padding:0 12px; gap:8px }
  .site-header .sh-hamburger{ display:inline-flex }
  .site-header .sh-right{ margin-left:auto; gap:0 }
  .site-header .sh-cta,.site-header .sh-admin-badge,.site-header .sh-lang-wrap,.site-header .sh-bell-wrap,.site-header .sh-ws-wrap{ display:none !important }
  .site-header .sh-nav{ position:fixed; top:var(--site-header-h); left:0; right:0; bottom:0; flex-direction:column; align-items:stretch;
    background:rgba(250,250,250,.98); border-bottom:0; padding:12px 12px 24px; gap:2px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .2s, visibility .2s, transform .2s; z-index:1001 }
  .site-header.is-burger-open .sh-nav{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) }
  .site-header .sh-nav-lb{ display:inline }
  .site-header .sh-nav-link{ width:100%; padding:13px 14px; font-size:18px; border-bottom:1.5px dashed var(--line); border-radius:0 }
  .site-header .sh-nav-sep{ width:auto; height:0; margin:6px 8px; border-left:0; border-top:1.5px dashed var(--line); align-self:stretch }
  .site-header.is-burger-open{ flex-wrap:nowrap; height:var(--site-header-h) }
  .site-header.is-burger-open .sh-right{ display:flex }
  .site-header .sh-logo .brand__sub{ display:none }
}

/* ── 내부 페이지 공통 요소 오버라이드(28개 뷰가 반복 사용하는 클래스) ──
   각 뷰의 <head> 인라인 CSS 뒤에 로드되므로 같은 특이도면 이긴다. 색은
   팔레트 치환(보라→잉크)으로 이미 바뀌었고, 여기서는 글꼴·테두리·모서리만. */
body.hand-shell{ background-color:var(--paper) }
.hand-shell .page-title-bar{ background:transparent; border-bottom:1.5px dashed var(--line); padding:18px 24px 14px }
.hand-shell .page-title-bar h1,.hand-shell .page-title-bar h2{ font-family:var(--disp); font-weight:700; color:var(--ink); font-size:26px; letter-spacing:.01em }
.hand-shell .toolbar{ background:transparent; border-bottom:1.5px dashed var(--line) }
.hand-shell .toolbar .search-input,.hand-shell .search-input,.hand-shell input[type=search],.hand-shell input[type=text],.hand-shell input[type=url],
.hand-shell input[type=email],.hand-shell input[type=password],.hand-shell input[type=number],.hand-shell textarea,.hand-shell select{
  border:1.5px solid var(--line-strong); border-radius:10px; background:var(--panel); color:var(--ink); font-family:var(--body) }
.hand-shell input:focus,.hand-shell textarea:focus,.hand-shell select:focus{ outline:0; border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,26,.10) }
.hand-shell .card,.hand-shell .new-card,.hand-shell .sec-card,.hand-shell .modal-card,.hand-shell .stat{ border:1.5px solid var(--ink) !important; border-radius:14px 12px 15px 13px !important; background:var(--panel); box-shadow:none !important }
.hand-shell .card:hover,.hand-shell .new-card:hover{ transform:translateY(-3px) rotate(-.3deg); box-shadow:none !important }
.hand-shell .card-title,.hand-shell .card h3,.hand-shell .card h4{ font-family:var(--hand); font-weight:400; font-size:16.5px; color:var(--ink) }
.hand-shell .card-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint) }
.hand-shell .btn,.hand-shell .btn-primary,.hand-shell .btn-ghost,.hand-shell button.btn{ font-family:var(--hand); font-size:15.5px; border-radius:999px !important;
  border:1.5px solid var(--ink); box-shadow:none !important; text-decoration:none }
.hand-shell .btn-primary,.hand-shell .btn.primary,.hand-shell .btn--primary{ background:var(--ink) !important; color:var(--paper) !important; border-color:var(--ink) !important }
.hand-shell .btn-ghost,.hand-shell .btn.ghost{ background:var(--paper) !important; color:var(--ink) !important }
.hand-shell .chip,.hand-shell .tab,.hand-shell .filter-chips button,.hand-shell .filter-chips a{ font-family:var(--hand); font-size:14.5px; border-radius:999px !important; border:1.5px solid var(--line-strong) }
.hand-shell .chip.is-active,.hand-shell .chip.active,.hand-shell .tab.is-active,.hand-shell .tab.active{ background:var(--ink) !important; color:var(--paper) !important; border-color:var(--ink) !important }
.hand-shell .empty,.hand-shell .drop{ border:1.5px dashed var(--line-strong) !important; border-radius:14px !important; background:transparent !important }
.hand-shell .empty{ font-family:var(--hand); font-size:16px; color:var(--ink-faint) }
.hand-shell .toast,.hand-shell .msg{ border:1.5px solid var(--ink); border-radius:12px; box-shadow:6px 8px 0 rgba(26,26,26,.08) }
.hand-shell .stats,.hand-shell .bulk-bar{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-faint) }
.hand-shell .badge{ font-family:var(--mono); border-radius:999px }
.hand-shell a:not([class]){ color:inherit }

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width:1279px){ .pub-nav{ display:none } .menu-toggle{ display:flex } }
@media (max-width:1040px){
.hand-page .fgrid,.hand-page .mgrid{ grid-template-columns:repeat(2,1fr) }
.hand-page .cgrid{ grid-template-columns:repeat(2,1fr) }
.hand-page .cmap__row{ grid-template-columns:1fr }
.hand-page .cmap__role{ border-right:0; border-bottom:1.5px dashed var(--line) }
.hand-page .cmap__item{ border-left:0; border-top:1.5px dashed var(--line-2) } .hand-page .cmap__item:first-child{ border-top:0 }
}
@media (max-width:900px), (hover:none), (pointer:coarse){
:root{ --rough:none }
.hand-page .frame__img img,.hand-page .mcard__prev img,.hand-page .mcard__tall img{ mix-blend-mode:normal }
.hand-page .door{ display:none }
}
@media (max-width:760px){
:root{ --fs-xs:13px; --fs-sm:14.5px; --fs-base:16px; --fs-md:17.5px; --fs-lg:21px; --fs-xl:27px; --fs-2xl:32px; --fs-3xl:38px;
    --gutter:18px; --header-h:62px; --site-header-h:56px }
.hand-page input,.hand-page select,.hand-page textarea{ font-size:16px !important }
.hand-page .btn{ font-size:16px; padding:13px 20px; min-height:48px } .hand-page .btn--lg{ font-size:17px; padding:15px 22px; min-height:54px }
.header-tools .btn--sm:not(.header-cta){ display:none } .header-tools{ gap:8px; margin-left:auto }
.brand__mark{ width:30px; height:30px } .brand__name{ font-size:19px } .brand__sub{ font-size:8.5px; letter-spacing:.16em }
.hand-page .hero{ padding-block:calc(var(--header-h) + 26px) var(--sp-5) }
.hand-page .hero h1{ line-height:1.14 } .hand-page .hero__lead{ font-size:16px; line-height:1.8 }
.hand-page .hero__cta{ gap:10px } .hand-page .hero__cta .btn{ flex:1 1 100%; justify-content:center }
.hand-page .doodles{ display:none } .hand-page .hero__word{ opacity:.06 }
.hand-page .section{ padding-block:var(--sp-6) } .hand-page .section--tight{ padding-block:var(--sp-5) }
.hand-page .fgrid,.hand-page .mgrid,.hand-page .cgrid{ grid-template-columns:1fr }
.hand-page .ggrid{ grid-template-columns:repeat(2,1fr); gap:12px } .hand-page .ggrid--wide{ grid-template-columns:1fr }
.hand-page .flow__arrow{ display:none } .hand-page .flow__node,.hand-page .flow__pair{ flex:1 1 44%; max-width:none }
.hand-page .foot-grid{ grid-template-columns:1fr 1fr } .hand-page .foot-collage{ font-size:clamp(26px,9vw,44px); gap:12px 20px; margin-bottom:36px }
.hand-page .foot-word{ font-size:clamp(48px,22vw,120px) }
.hand-page .quick{ right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); gap:0; opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity var(--t), visibility var(--t), transform var(--t) }
.hand-page .quick.is-on{ opacity:1; visibility:visible; transform:none }
.hand-page .quick a{ display:none }
.hand-page .quick .qtop{ width:46px; height:46px; padding:0; border-radius:50%; box-shadow:0 4px 14px rgba(26,26,26,.16) }
.hand-page .quick .qtop span:last-child{ display:none }
.hand-page .authwrap .frame{ padding:24px 18px }
}
@media (max-width:430px){ .brand__sub{ display:none } .header-tools .header-cta .arr{ display:none } }
@media (max-width:460px){ .foot-grid{ grid-template-columns:1fr } .ggrid{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto }
.hand-page .reveal{ opacity:1 !important; transform:none !important; transition:none !important }
.hand-page .dood-float{ animation:none !important }
}
@supports not (aspect-ratio: 1 / 1){ .gcard .frame__img{ min-height:200px } .mcard__prev img{ min-height:70px } }