/* ============================================================
   Somssii — 사이트 스타일
   기반 템플릿: rebeauty_templates/260701fzfjz-01
   손그림·종이 질감의 아틀리에 톤을 유지하고,
   변환 서비스에 필요한 컴포넌트를 아래 [ADDITIONS] 에 추가했다.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
: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);
  --disp:'Cabin Sketch','Gaegu',cursive;                 /* big sketch display */
  --hand:'Patrick Hand','Gaegu',cursive;                 /* hand-print labels */
  --script:'Caveat','Nanum Pen Script',cursive;          /* annotations */
  --body:'Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo',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(44px,8vw + 6px,116px);
  --sp-4:40px; --sp-5:64px; --sp-6:96px; --sp-7:clamp(80px,10vw,164px);
  --rad:10px; --rad-lg:18px;
  --e-out:cubic-bezier(.19,1,.22,1); --e-quad:cubic-bezier(.7,0,.2,1); --e-soft:cubic-bezier(.11,.7,0,1);
  --t-fast:.2s; --t:.4s; --t-slow:.8s; --header-h:74px;
  /* 손그림 흔들림 필터. 모바일·터치 기기에서는 아래에서 none 으로 끈다
     (SVG 필터는 iOS Safari 에서 무겁고, 요소가 통째로 안 그려지는 경우가 있다) */
  --rough:url(#rough);
}
html{ -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%;
  overflow-x:hidden; overflow-x:clip;              /* clip 미지원(Safari 15 이하) 대비 */
  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;
  text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip; 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);
  background-attachment:fixed,fixed,scroll;
}
img,svg,video{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
/* hidden 속성이 항상 이기게 한다.
   클래스로 display:grid/flex 를 준 요소는 UA 기본값
   [hidden]{display:none} 보다 우선순위가 높아 숨겨지지 않는다. */
[hidden]{ display:none !important }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.04 }
p{ margin:0 }
/* 한국어는 어절 단위로 끊어야 읽힌다 (Safari 9+ 지원) */
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 }
.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 }

/* type helpers */
.disp{ font-family:var(--disp); font-weight:700; line-height:1.0; letter-spacing:.01em }
.hand{ font-family:var(--hand) } .script{ font-family:var(--script) }
.mono{ font-family:var(--mono); letter-spacing:.02em }
.en{ font-family:var(--hand); letter-spacing:.04em }
.muted{ color:var(--ink-faint) } .soft{ color:var(--ink-soft) }
.muted-note{ color:var(--ink-faint); font-size:var(--fs-sm); line-height:1.7 }
.h1{ font-family:var(--disp); font-weight:700; font-size:var(--fs-3xl) }
.h2{ font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl) }
.h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl) }
.lead{ font-size:var(--fs-md); line-height:1.75; color:var(--ink-2); max-width:60ch }
em{ font-style:normal; font-family:var(--script); font-weight:700; font-size:1.24em; line-height:.9 }

/* code-ish annotation chip ("< aesthetic atelier />") */
.codetag{ font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink-soft); letter-spacing:.02em }
.codetag b{ color:var(--ink) }

/* eyebrow / kicker */
.kick{ display:inline-flex; align-items:center; gap:10px; font-family:var(--hand);
  font-size:var(--fs-sm); letter-spacing:.06em; color:var(--ink-2) }
.kick::before{ content:""; width:30px; height:0; border-top:2px solid var(--ink); border-radius:2px;
  transform:rotate(-1.5deg) }
.kick--no .num{ font-family:var(--mono); color:var(--ink) }

/* rough hand-drawn wobble */
.rough{ filter:var(--rough) }
hr,.rule{ border:0; height:0; border-top:2px solid var(--line); margin:0; filter:var(--rough) }

/* buttons — ink outline, arrow-swap */
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--hand);
  font-size:var(--fs-sm); padding:13px 22px; border:2px solid var(--ink); border-radius:22px 20px 24px 18px;
  background:var(--paper); color:var(--ink); transition:transform var(--t) var(--e-out), background var(--t), color var(--t);
  filter:var(--rough) }
.btn:hover{ transform:translateY(-2px) rotate(-.4deg) }
.btn--ink{ background:var(--ink); color:var(--paper) }
.btn--ink:hover{ background:var(--ink-2) }
.btn--lg{ padding:16px 28px; font-size:var(--fs-base) }
.btn svg{ transition:transform var(--t) var(--e-out) }
.arrowswap .arr,.btn .arr{ transition:transform var(--t) var(--e-out) }
.btn:hover .arr{ transform:translateX(4px) }

/* header / nav */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:120; height:var(--header-h);
  transition:background var(--t), border-color var(--t) }
.site-header::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:transparent }
.site-header.is-solid{ background:rgba(250,250,250,.86);
  -webkit-backdrop-filter:saturate(1.05) blur(8px); backdrop-filter:saturate(1.05) blur(8px) }
.site-header.is-solid::after{ background:var(--line); filter:var(--rough) }
.site-header__inner{ max-width:1360px; margin-inline:auto; height:var(--header-h);
  padding-inline:var(--gutter); display:flex; align-items:center; gap:22px }
.brand{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0 }
.brand__mark{ width:36px; height:36px; flex-shrink:0 }
.brand__name{ font-family:var(--disp); font-weight:700; font-size:22px; line-height:1; letter-spacing:.02em; display:block }
.brand__sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; color:var(--ink-faint); display:block; margin-top:3px }
.nav{ display:flex; align-items:center; gap:4px; margin-inline:auto }
.nav-item{ position:relative }
.nav-top{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hand); font-size:16px;
  padding:10px 14px; border-radius:14px; color:var(--ink-2); transition:color var(--t), background var(--t) }
.nav-top:hover,.nav-top.is-active{ color:var(--ink); background:rgba(26,26,26,.05) }
.nav-top .chev{ transition:transform var(--t) }
.nav-item:hover .chev{ transform:rotate(180deg) }
.nav-panel{ position:absolute; top:calc(100% + 8px); left:0; min-width:238px; background:var(--panel);
  border:2px solid var(--ink); border-radius:16px 18px 15px 19px; padding:10px; filter:var(--rough);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--t) var(--e-out);
  box-shadow:6px 8px 0 rgba(26,26,26,.08) }
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel{ opacity:1; visibility:visible; transform:none }
.nav-panel a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px;
  font-family:var(--hand); font-size:15px; border-radius:10px; color:var(--ink-2); transition:background var(--t), color var(--t) }
.nav-panel a:hover{ background:rgba(26,26,26,.06); color:var(--ink) }
.nav-panel a svg{ opacity:0; transform:translateX(-4px); transition:all var(--t) }
.nav-panel a:hover svg{ opacity:1; transform:none }
.nav-panel .np-cross{ margin-top:6px; border-top:1.5px dashed var(--line); padding-top:12px; color:var(--ink); font-family:var(--hand) }
.header-tools{ display:flex; align-items:center; gap:12px; flex-shrink:0 }
.header-tel{ font-family:var(--mono); font-size:13px; color:var(--ink-2); white-space:nowrap }
.header-cta{ white-space:nowrap }
.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; transition:transform var(--t), opacity var(--t) }

/* mobile drawer */
.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:16px 4px; border-bottom:1.5px dashed var(--line); font-family:var(--hand); font-size:19px }
.drawer .acc .en{ display:block; font-size:11px; letter-spacing:.14em; color:var(--ink-faint); margin-top:2px }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height var(--t) var(--e-out) }
.acc-panel ul{ list-style:none; margin:0; padding:4px 0 12px }
.acc-panel li a{ display:block; padding:9px 6px; font-family:var(--hand); font-size:16px; color:var(--ink-2) }
.acc-panel li a strong{ color:var(--ink) }

/* quick rail */
.quick{ position:fixed; right:14px; bottom:16px; z-index:110; display:flex; flex-direction:column; gap:8px }
.quick a,.quick button{ display:flex; flex-direction:column; align-items:center; gap:2px; width:56px; padding:10px 4px;
  background:var(--paper); border:2px solid var(--ink); border-radius:16px; font-family:var(--hand); font-size:10px;
  color:var(--ink); filter:var(--rough); transition:transform var(--t) }
.quick a:hover,.quick button:hover{ transform:translateY(-2px) rotate(-1deg) }

/* sections */
.section{ padding-block:var(--sp-7) }
.section--tight{ padding-block:var(--sp-6) }
.sec-head{ max-width:64ch }
.sec-head .kick{ margin-bottom:18px }

/* reveal + split */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-out), transform .8s var(--e-out) }
.reveal.is-in{ opacity:1; transform:none }
.split .w{ display:inline-block; overflow:hidden; vertical-align:top }
.split .w>span{ display:inline-block; transform:translateY(112%) rotate(4deg); transition:transform .7s var(--e-out);
  transition-delay:calc(var(--i,0) * .035s) }
.split.is-in .w>span{ transform:none }
.split--chars .w{ overflow:visible }

/* ── SIGNATURE: 3D ink corridor hero ─────────────────────────────────────────────── */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding-top:var(--header-h) }
.corridor{ --depth:0px }
.corridor__stage{ position:absolute; inset:0; perspective:1150px; perspective-origin:50% 46%;
  pointer-events:none; z-index:0 }
.corridor__scene{ position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .12s linear }  /* walk-in translateZ is set directly by JS (var() in transform is unreliable) */
.corridor__plane{ position:absolute; background-repeat:no-repeat }
/* floor + ceiling: ink plank lines receding */
.corridor__floor,.corridor__ceil{ left:50%; width:280%; height:78%;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 84px, var(--line-2) 84px 85px),
    repeating-linear-gradient(0deg, transparent 0 68px, rgba(26,26,26,.06) 68px 69px);
  filter:var(--rough); opacity:.55 }
.corridor__floor{ bottom:-2%; transform:translateX(-50%) rotateX(76deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 8%, transparent 82%); mask-image:linear-gradient(to top, #000 8%, transparent 82%) }
.corridor__ceil{ top:-2%; transform:translateX(-50%) rotateX(-76deg); transform-origin:top center; opacity:.4;
  -webkit-mask-image:linear-gradient(to bottom, #000 8%, transparent 78%); mask-image:linear-gradient(to bottom, #000 8%, transparent 78%) }
/* side walls with faint hung frames */
.corridor__wall{ top:0; bottom:0; width:58%;
  background-image:repeating-linear-gradient(0deg, transparent 0 118px, var(--line-2) 118px 119px);
  filter:var(--rough); opacity:.5 }
.corridor__wall--l{ left:0; transform-origin:left center; transform:rotateY(72deg);
  -webkit-mask-image:linear-gradient(to right,#000,transparent 88%); mask-image:linear-gradient(to right,#000,transparent 88%) }
.corridor__wall--r{ right:0; transform-origin:right center; transform:rotateY(-72deg);
  -webkit-mask-image:linear-gradient(to left,#000,transparent 88%); mask-image:linear-gradient(to left,#000,transparent 88%) }
.corridor__wall .wframe{ position:absolute; width:64px; height:84px; border:2px solid var(--line); border-radius:3px; filter:var(--rough) }
/* back wall image + doodle wordmark at the vanishing point */
.corridor__back{ position:absolute; left:50%; top:50%; width:min(52vw,560px); aspect-ratio:16/10;
  transform:translate(-50%,-52%) translateZ(-540px); border:2px solid var(--line); border-radius:6px;
  overflow:hidden; filter:var(--rough); opacity:.9 }
.corridor__back img{ width:100%; height:100%; object-fit:cover; opacity:.5; mix-blend-mode:multiply }
.corridor__word{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(-360px);
  font-family:var(--disp); font-weight:700; font-size:clamp(60px,13vw,190px); color:transparent;
  -webkit-text-stroke:2.4px var(--ink); text-stroke:2.4px var(--ink); letter-spacing:.02em; opacity:.16; white-space:nowrap }
/* corridor doors = room nav (clickable), floating in mid-depth */
.corridor__doors{ position:absolute; inset:0; z-index:2; transform-style:preserve-3d }
.door{ position:absolute; pointer-events:auto; width:132px; text-align:center; font-family:var(--hand);
  color:var(--ink); transform:translateZ(var(--dz,-140px)) rotateY(var(--dr,0deg)); transition:transform var(--t) var(--e-out) }
.door__frame{ display:block; 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;
  display:flex; align-items:center; justify-content:center }
.door__frame svg{ width:52px; height:52px; opacity:.9 }
.door__knob{ position:absolute; right:12px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--ink) }
.door span{ display:block; margin-top:9px; font-size:15px }
.door small{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--ink-faint) }
.door:hover{ transform:translateZ(-40px) rotateY(var(--dr,0deg)) }
.door:hover .door__frame{ background:var(--ink) } .door:hover .door__frame svg{ filter:invert(1) }
/* doodle float layer */
.doodles{ position:absolute; inset:0; z-index:3; pointer-events:none }
.doodle{ position:absolute; color:var(--ink); opacity:.7; will-change:transform }
.dood-float{ animation:dfloat 7s var(--e-soft) infinite alternate }
@keyframes dfloat{ from{ transform:translateY(-6px) rotate(-3deg) } to{ transform:translateY(8px) rotate(4deg) } }
/* hero foreground content */
.hero__intro{ position:relative; z-index:5; text-align:center; width:100% }
.hero__intro .codetag{ display:inline-block; margin-bottom:18px }
.hero h1{ font-family:var(--disp); font-weight:700; font-size:var(--fs-3xl); line-height:.98 }
.hero__lead{ margin:24px auto 0; max-width:52ch; font-size:var(--fs-md); color:var(--ink-2) }
.hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px }
.corridor-hint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:6;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink-faint); display:flex;
  flex-direction:column; align-items:center; gap:6px }
.corridor-hint::after{ content:""; width:2px; height:34px; background:linear-gradient(var(--ink),transparent);
  animation:hintdrop 1.8s var(--e-soft) infinite }
@keyframes hintdrop{ 0%{ transform:scaleY(0); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top }
  50.1%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* generic frame card (picture-frame look) */
.frame{ border:2px solid var(--ink); border-radius:8px 7px 9px 6px; background:var(--panel); overflow:hidden;
  filter:var(--rough); position:relative }
.frame__img{ overflow:hidden; background:var(--paper-2) }
.frame__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .9s var(--e-out) }
.frame:hover .frame__img img{ transform:scale(1.03) }
.tag{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-faint) }

/* treatment areas grid (home + gallery) */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.tcard{ display:block; color:inherit }
.tcard .frame__img{ aspect-ratio:4/3 }
.tcard__no{ font-family:var(--mono); font-size:12px; color:var(--ink-faint) }
.tcard h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); margin-top:6px }
.tcard p{ margin-top:8px; color:var(--ink-soft); font-size:var(--fs-sm) }
.tcard .pad{ padding:18px }

/* how-it-works timeline */
.how{ display:grid; grid-template-columns:1.05fr 1.4fr; gap:56px; align-items:start }
.timeline{ position:relative; padding-left:34px }
.tl-rail{ position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--line); filter:var(--rough) }
.tl-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--ink) }
.tstep{ position:relative; padding-bottom:34px }
.tstep::before{ content:""; position:absolute; left:-34px; top:4px; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--ink); background:var(--paper) }
.tstep__no{ font-family:var(--mono); font-size:12px; color:var(--ink-faint) }
.tstep h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); margin-top:4px }
.tstep p{ margin-top:8px; color:var(--ink-soft) }

/* stats (hand-tallied) */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.stat{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; padding:26px; filter:var(--rough); background:var(--panel) }
.stat b{ font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl); display:inline-block }
.stat u{ text-decoration:none; font-family:var(--hand); color:var(--ink-2) }
.stat p{ margin-top:8px; color:var(--ink-soft); font-size:var(--fs-sm) }

/* statement (sticky parallax) */
.fstate{ position:relative; min-height:82vh; display:flex; align-items:center; overflow:hidden;
  border-block:2px solid var(--ink) }
.fstate__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; opacity:.14 }
.fstate__bg img{ width:100%; height:120%; object-fit:cover; will-change:transform }
.fstate .container{ position:relative; z-index:1 }
.fstate h2{ font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl); max-width:20ch }

/* doctors carousel */
.docs{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none }
.docs::-webkit-scrollbar{ display:none }
.doc{ flex:0 0 clamp(240px,30vw,300px); scroll-snap-align:start }
.doc .frame__img{ aspect-ratio:3/4 }
.doc h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); margin-top:14px }
.doc .role{ font-family:var(--hand); color:var(--ink-2); font-size:var(--fs-sm) }
.doc p{ margin-top:8px; color:var(--ink-soft); font-size:var(--fs-sm) }

/* journal cards */
.jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.jcard .frame__img{ aspect-ratio:4/3 }
.jcard .pad{ padding:18px }
.jcard h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); margin-top:6px }
.jcard p{ margin-top:8px; color:var(--ink-soft); font-size:var(--fs-sm) }

/* FAQ sticky rail */
.faqwrap{ display:grid; grid-template-columns:.7fr 1.6fr; gap:48px; align-items:start }
.faq-rail{ position:sticky; top:calc(var(--header-h) + 20px); display:flex; flex-direction:column; gap:6px }
.faq-rail button{ text-align:left; font-family:var(--hand); font-size:var(--fs-md); padding:10px 12px; border-radius:10px;
  color:var(--ink-faint); transition:color var(--t), background var(--t) }
.faq-rail button.is-on{ color:var(--ink); background:rgba(26,26,26,.05) }
.faq-grp{ display:none } .faq-grp.is-on{ display:block }
.acc-q{ width:100%; text-align:left; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:20px 0; border-top:1.5px dashed var(--line); font-family:var(--hand); font-size:var(--fs-md) }
.acc-q .pm{ font-family:var(--mono); transition:transform var(--t) }
.acc-q[aria-expanded=true] .pm{ transform:rotate(45deg) }
.acc-a{ max-height:0; overflow:hidden; transition:max-height var(--t) var(--e-out) }
.acc-a p{ padding-bottom:22px; color:var(--ink-soft) }

/* page hero */
.phero{ position:relative; padding:calc(var(--header-h) + 64px) 0 44px; overflow:hidden }
.phero__bg{ position:absolute; inset:0; z-index:0; opacity:.12 }
.phero__bg img{ width:100%; height:100%; object-fit:cover }
.phero .container{ position:relative; z-index:1 }
.phero h1{ font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl); margin-top:14px }
.crumb{ font-family:var(--mono); font-size:12px; color:var(--ink-faint) }
.crumb a:hover{ color:var(--ink) }

/* media-text */
.media-text{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
.media-text .mt-media .frame__img{ aspect-ratio:4/3 }
.mt-text h2{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl); margin:10px 0 14px }
/* 본문 컬럼은 가독성 때문에 66ch 로 좁게 둔다.
   단, 폭 제한을 .prose 자체가 아니라 '직접 자식'에 걸어
   비교 블록(.cmp)만 컨테이너 전체 폭을 쓰게 한다. */
.prose{ max-width:none }
.prose > *{ max-width:66ch }
.prose > .cmp, .prose > .cmp__note{ max-width:none }
.prose p{ margin-top:16px; color:var(--ink-2) }
.detail-back{ display:inline-block; font-family:var(--mono); font-size:13px; color:var(--ink-faint); margin-bottom:24px }
.detail-back:hover{ color:var(--ink) }

/* directory (treatments) */
.cat-block{ padding-top:52px } .cat-block:first-child{ padding-top:0 }
.cat-head{ display:flex; align-items:baseline; gap:14px; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:24px; filter:var(--rough) }
.cat-head .no{ font-family:var(--mono); color:var(--ink-faint) }
.cat-head h2{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl) }
.cat-head .en{ margin-left:auto; color:var(--ink-faint) }
.dgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.ditem{ display:block; border:2px solid var(--ink); border-radius:10px 8px 11px 9px; padding:18px 20px; filter:var(--rough);
  background:var(--panel); transition:transform var(--t) var(--e-out) }
.ditem:hover{ transform:translateY(-3px) rotate(-.3deg) }
.ditem h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg) }
.ditem p{ margin-top:6px; color:var(--ink-soft); font-size:var(--fs-sm) }
.ditem .go{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:12px; display:inline-flex; gap:6px; align-items:center }

/* footer */
.site-footer{ border-top:2px solid var(--ink); padding-block:var(--sp-6) var(--sp-5); position:relative; overflow:hidden; filter:var(--rough) }
.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); text-stroke:1.6px var(--line); margin-bottom:52px; line-height:1 }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px }
.foot-brand p{ margin-top:16px; color:var(--ink-soft); font-size:var(--fs-sm); max-width:34ch }
.foot-col h4{ font-family:var(--hand); font-size:var(--fs-base); margin-bottom:14px }
.foot-col a{ display:block; padding:6px 0; color:var(--ink-soft); font-size:var(--fs-sm) }
.foot-col a:hover{ color:var(--ink) }
.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); text-stroke:1.6px var(--line-2); line-height:.8; margin:44px 0 20px; text-align:center }
.foot-legal p{ color:var(--ink-faint); font-size:var(--fs-xs); line-height:1.9 }
.foot-disc{ display:block; margin-top:10px }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start }
.info-row{ display:flex; gap:14px; padding:16px 0; border-bottom:1.5px dashed var(--line) }
.info-row .k{ font-family:var(--hand); width:88px; flex-shrink:0; color:var(--ink) }
.info-row .v{ color:var(--ink-2) }
.field{ display:block; margin-bottom:16px }
.field span{ display:block; font-family:var(--hand); font-size:var(--fs-sm); margin-bottom:7px }
.field input,.field textarea,.field select{ width:100%; font:inherit; padding:13px 14px; background:var(--panel);
  border:2px solid var(--ink); border-radius:10px 8px 11px 9px; color:var(--ink); filter:var(--rough) }
.field textarea{ min-height:120px; resize:vertical }
.checkrow{ display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink-soft) }

.tilt{ transition:transform var(--t) var(--e-out); transform-style:preserve-3d; will-change:transform }
.dividers{ display:flex; align-items:center; gap:16px; color:var(--ink-faint); font-family:var(--mono); font-size:12px }
.dividers::before,.dividers::after{ content:""; flex:1; height:0; border-top:2px solid var(--line); filter:var(--rough) }

/* cursor follower */
.inkcursor{ position:fixed; top:0; left:0; width:26px; height:26px; z-index:300; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%); transition:opacity .3s; mix-blend-mode:multiply }

/* responsive */
@media (max-width:1040px){
  .nav,.header-tel{ display:none } .menu-toggle{ display:flex }
  .how{ grid-template-columns:1fr; gap:40px } .faqwrap{ grid-template-columns:1fr; gap:26px }
  .faq-rail{ position:static; flex-direction:row; flex-wrap:wrap }
  .media-text,.contact-grid{ grid-template-columns:1fr; gap:30px }
}
@media (max-width:760px){
  .tgrid,.jgrid,.dgrid,.stats{ grid-template-columns:1fr } .stats{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr 1fr } .corridor__word{ font-size:clamp(46px,18vw,90px) }
  .door{ display:none } .corridor-hint{ display:none }
}
@media (max-width:460px){ .foot-grid{ grid-template-columns:1fr } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal,.split .w>span{ opacity:1!important; transform:none!important; transition:none!important }
  .corridor__scene{ transform:none!important } .dood-float{ animation:none!important }
  .corridor-hint::after{ animation:none } .fstate__bg img{ transform:none!important } .tl-fill{ height:100%!important }
  .inkcursor{ display:none!important }
}

/* ============================================================
   [ADDITIONS] Somssii 전용 컴포넌트
   ============================================================ */

/* ── 헤더 보조: 언어 선택 / 계정 버튼 ─────────────────────────── */
.header-tools .lang-pick{ position:relative }
.lang-btn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; padding:9px 12px; border:2px solid var(--ink); border-radius:14px 12px 15px 11px;
  background:var(--paper); filter:var(--rough) }
.lang-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:210px; max-height:min(60vh,420px);
  overflow:auto; background:var(--panel); border:2px solid var(--ink); border-radius:14px; padding:8px;
  filter:var(--rough); box-shadow:6px 8px 0 rgba(26,26,26,.08);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--t) var(--e-out); z-index:20 }
.lang-pick:hover .lang-menu,.lang-pick:focus-within .lang-menu{ opacity:1; visibility:visible; transform:none }
.lang-menu a,.lang-menu span{ display:flex; justify-content:space-between; gap:12px; padding:8px 10px;
  border-radius:9px; font-family:var(--hand); font-size:14px; color:var(--ink-2) }
.lang-menu a:hover{ background:rgba(26,26,26,.06); color:var(--ink) }
.lang-menu .is-current{ background:rgba(26,26,26,.06); color:var(--ink) }
.lang-menu .soon{ color:var(--ink-ghost); cursor:default }
.lang-menu small{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-ghost) }
.header-tools .btn--sm{ padding:10px 16px; font-size:14px }

/* ── 히어로: 업로드 콘솔 ────────────────────────────────────── */
.hero--convert{ min-height:auto; padding-block:calc(var(--header-h) + 56px) var(--sp-6); align-items:flex-start }
.hero__console{ position:relative; z-index:5; width:100%; max-width:860px; margin:38px auto 0 }
.dropzone{ position:relative; border:2px dashed var(--ink); border-radius:20px 18px 22px 16px;
  background:rgba(255,255,255,.72); padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px); text-align:center;
  transition:background var(--t), transform var(--t) var(--e-out); filter:var(--rough) }
.dropzone.is-over{ background:rgba(255,255,255,.95); transform:translateY(-3px) rotate(-.3deg) }
.dropzone__icon{ width:56px; height:56px; margin:0 auto 16px; color:var(--ink) }
.dropzone__title{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg) }
.dropzone__hint{ margin-top:10px; color:var(--ink-soft); font-size:var(--fs-sm) }
.dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.dropzone__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; position:relative; z-index:2 }
.dz-or{ display:flex; align-items:center; gap:14px; margin:22px 0 0; color:var(--ink-faint);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em }
.dz-or::before,.dz-or::after{ content:""; flex:1; height:0; border-top:2px solid var(--line); filter:var(--rough) }
.url-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap }
.url-row input{ flex:1 1 260px; font:inherit; padding:13px 15px; background:var(--panel);
  border:2px solid var(--ink); border-radius:12px 10px 13px 9px; color:var(--ink); filter:var(--rough) }
.file-chip{ display:none; align-items:center; justify-content:center; gap:10px; margin-top:16px;
  font-family:var(--mono); font-size:12px; color:var(--ink-2) }
.file-chip.is-on{ display:flex }
.file-chip b{ font-family:var(--hand); font-size:14px }

/* 샘플 바로가기 칩 */
.trychips{ margin-top:26px; text-align:center }
.trychips__label{ font-family:var(--hand); font-size:var(--fs-sm); color:var(--ink-soft) }
.trychips__list{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:12px }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:2px solid var(--line-strong);
  border-radius:16px 14px 17px 13px; font-family:var(--hand); font-size:13.5px; color:var(--ink-2);
  background:var(--paper); filter:var(--rough); transition:transform var(--t) var(--e-out), color var(--t) }
.chip:hover{ transform:translateY(-2px) rotate(-.5deg); color:var(--ink) }
.measure-note{ margin-top:22px; text-align:center; font-size:var(--fs-xs); color:var(--ink-faint); line-height:1.8 }
.terms-note{ margin-top:16px; text-align:center; font-size:var(--fs-xs); color:var(--ink-faint) }
.terms-note a{ border-bottom:1px dashed var(--line-strong) }

/* ── 변환 히스토리 레일 ──────────────────────────────────────── */
.histhead{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.histhead .cnt{ font-family:var(--mono); font-size:12px; color:var(--ink-faint) }
.hist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:28px }
.hcard{ display:block; border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel);
  padding:16px 18px; filter:var(--rough); transition:transform var(--t) var(--e-out) }
.hcard:hover{ transform:translateY(-3px) rotate(-.35deg) }
.hcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.hcard h3{ font-family:var(--hand); font-weight:400; font-size:var(--fs-base); line-height:1.4; margin-top:10px }
.hcard .meta{ margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint) }
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; padding:4px 9px; border:1.5px solid var(--line-strong); border-radius:20px; color:var(--ink-2) }
.badge--done{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.badge--queued{ border-style:dashed }
.badge--processing{ border-color:var(--ink); color:var(--ink) }
.badge--failed{ border-color:#a33; color:#a33 }
.qbar{ margin-top:12px; height:5px; border:1.5px solid var(--line); border-radius:4px; overflow:hidden; filter:var(--rough) }
.qbar span{ display:block; height:100%; background:var(--ink) }

/* ── 원본 ↔ 변환 비교 뷰 ─────────────────────────────────────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px }
.compare__pane{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; overflow:hidden;
  background:var(--panel); filter:var(--rough); display:flex; flex-direction:column }
.compare__head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:2px solid var(--line); font-family:var(--hand); font-size:var(--fs-sm) }
.compare__body{ flex:1; min-height:320px; background:var(--paper-2); overflow:auto; max-height:560px }
.compare__body img{ width:100%; display:block; mix-blend-mode:multiply }
.compare__body iframe{ width:100%; height:560px; border:0; background:#fff }
.compare__empty{ display:grid; place-items:center; min-height:320px; padding:34px; text-align:center;
  color:var(--ink-faint); font-family:var(--hand); font-size:var(--fs-sm); line-height:1.9 }

/* 진행 상태 스텝퍼 */
.progress{ display:flex; gap:0; margin-top:30px; border:2px solid var(--ink); border-radius:14px;
  overflow:hidden; filter:var(--rough) }
.progress__step{ flex:1; padding:16px 18px; border-right:2px solid var(--line); text-align:center }
.progress__step:last-child{ border-right:0 }
.progress__step .no{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-faint) }
.progress__step .nm{ font-family:var(--hand); font-size:var(--fs-sm); margin-top:6px; display:block; color:var(--ink-faint) }
.progress__step.is-on{ background:var(--ink) }
.progress__step.is-on .no,.progress__step.is-on .nm{ color:var(--paper) }
.progress__step.is-done .nm{ color:var(--ink) }

/* 코드 블록 */
.codebox{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; overflow:hidden; background:#161616;
  filter:var(--rough) }
.codebox__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px;
  background:#0f0f0f; color:#e8e4dc; font-family:var(--mono); font-size:11px; letter-spacing:.12em }
.codebox__copy{ font-family:var(--mono); font-size:11px; color:#b9b2a6; border:1px solid #3a3a3a;
  border-radius:6px; padding:4px 9px; transition:color var(--t), border-color var(--t) }
.codebox__copy:hover{ color:#fff; border-color:#7a7a7a }
.codebox pre{ margin:0; padding:18px 20px; overflow-x:auto; color:#e8e4dc;
  font-family:var(--mono); font-size:12.5px; line-height:1.85 }
.codebox .tok-k{ color:#f6c177 } .codebox .tok-s{ color:#9ccfd8 } .codebox .tok-c{ color:#6e6a86 }

/* ── 활용 사례 탭 ────────────────────────────────────────────── */
.uctabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px }
.uctab{ font-family:var(--hand); font-size:var(--fs-sm); padding:10px 16px; border:2px solid var(--line-strong);
  border-radius:18px 16px 19px 15px; color:var(--ink-faint); background:var(--paper); filter:var(--rough);
  transition:all var(--t) var(--e-out) }
.uctab.is-on{ color:var(--paper); background:var(--ink); border-color:var(--ink) }
.ucpanel{ display:none; margin-top:30px }
.ucpanel.is-on{ display:block }
.ucpanel__inner{ display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center;
  border:2px solid var(--ink); border-radius:16px 14px 17px 13px; padding:clamp(24px,4vw,44px);
  background:var(--panel); filter:var(--rough) }
.ucpanel h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl) }
.ucpanel p{ margin-top:14px; color:var(--ink-2); max-width:52ch }
.ucpanel .btn{ margin-top:24px }
.ucsketch{ aspect-ratio:4/3; border:2px solid var(--line-strong); border-radius:10px; position:relative;
  overflow:hidden; background:var(--paper-2); filter:var(--rough) }
.ucsketch::before{ content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,var(--line-2) 22px 23px),
                   repeating-linear-gradient(90deg,transparent 0 22px,var(--line-2) 22px 23px) }
.ucsketch svg{ position:absolute; inset:0; margin:auto; width:52%; height:52%; color:var(--ink); opacity:.5 }

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

/* ── 통합 로고 그리드 ───────────────────────────────────────── */
.logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:38px }
.logo-cell{ display:grid; place-items:center; min-height:88px; padding:14px; text-align:center;
  border:2px solid var(--line-strong); border-radius:12px 10px 13px 9px; background:var(--panel);
  font-family:var(--hand); font-size:14px; color:var(--ink-2); filter:var(--rough);
  transition:transform var(--t) var(--e-out), color var(--t) }
.logo-cell:hover{ transform:translateY(-3px) rotate(-.6deg); color:var(--ink) }

/* ── 고객 사례 ───────────────────────────────────────────────── */
.tstm{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px }
.tstm__item{ border:2px solid var(--ink); border-radius:14px 12px 15px 11px; padding:30px 26px;
  background:var(--panel); filter:var(--rough); display:flex; flex-direction:column }
.tstm__metric{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl); line-height:1 }
.tstm__label{ margin-top:10px; font-family:var(--hand); font-size:var(--fs-sm); color:var(--ink-2) }
.tstm__quote{ margin-top:20px; padding-top:20px; border-top:1.5px dashed var(--line); color:var(--ink-soft);
  font-size:var(--fs-sm); line-height:1.85; flex:1 }
.tstm__who{ margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint) }
.tstm__who b{ display:block; font-family:var(--hand); font-size:14px; letter-spacing:0; color:var(--ink) }

/* ── 요금제 ──────────────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-top:44px; align-items:stretch }   /* 요금제 5종(Free·Starter·Pro·Premium·Enterprise): 1200 컨테이너에서 5열, 좁아지면 자동 감소 */
.plan{ border:2px solid var(--ink); border-radius:14px 12px 15px 11px; padding:28px 24px; background:var(--panel);
  filter:var(--rough); display:flex; flex-direction:column; position:relative }
.plan--popular{ background:var(--ink); color:var(--paper) }
.plan--popular .plan__price b,.plan--popular h3{ color:var(--paper) }
.plan--popular .plan__list li{ color:rgba(250,250,250,.82) }
.plan--popular .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.plan__flag{ position:absolute; top:-13px; left:24px; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  padding:5px 11px; background:var(--ink); color:var(--paper); border-radius:20px }
.plan h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg) }
.plan__tag{ margin-top:8px; font-size:var(--fs-sm); color:var(--ink-soft); min-height:3.4em }
.plan--popular .plan__tag{ color:rgba(250,250,250,.72) }
.plan__price{ margin-top:20px; padding-top:20px; border-top:1.5px dashed var(--line) }
.plan--popular .plan__price{ border-color:rgba(250,250,250,.28) }
.plan__price b{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl) }
.plan__price small{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-left:6px }
.plan__list{ list-style:none; margin:20px 0 0; padding:0; flex:1 }
.plan__list li{ position:relative; padding:7px 0 7px 22px; font-size:var(--fs-sm); color:var(--ink-soft) }
.plan__list li::before{ content:"✓"; position:absolute; left:0; font-family:var(--mono); color:currentColor }
.plan .btn{ margin-top:22px; width:100%; justify-content:center }

/* ── 뉴스레터 / CTA ─────────────────────────────────────────── */
.ctaband{ text-align:center }
.ctaband h2{ font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl); max-width:18ch; margin-inline:auto }
.subform{ display:flex; gap:10px; max-width:520px; margin:26px auto 0; flex-wrap:wrap }
.subform input{ flex:1 1 240px; font:inherit; padding:13px 15px; background:var(--panel); border:2px solid var(--ink);
  border-radius:12px 10px 13px 9px; color:var(--ink); filter:var(--rough) }
.subnote{ margin-top:12px; font-size:var(--fs-xs); color:var(--ink-faint) }

/* ── 알림(플래시) ───────────────────────────────────────────── */
.flashes{ position:fixed; left:50%; top:calc(var(--header-h) + 12px); transform:translateX(-50%);
  z-index:150; display:flex; flex-direction:column; gap:8px; width:min(92vw,560px) }
.flash{ display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border:2px solid var(--ink);
  border-radius:12px 10px 13px 9px; background:var(--panel); font-size:var(--fs-sm); filter:var(--rough);
  box-shadow:5px 6px 0 rgba(26,26,26,.08) }
.flash--success{ background:var(--ink); color:var(--paper) }
.flash--error{ border-color:#a33; color:#a33 }
.flash__x{ margin-left:auto; font-family:var(--mono); opacity:.7 }

/* 폼 오류 문구 */
.field .fe{ display:block; margin-top:6px; font-size:var(--fs-xs); color:#a33; font-family:var(--hand) }
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{ border-color:#a33 }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ── 인증 페이지 ────────────────────────────────────────────── */
.authwrap{ max-width:460px; margin-inline:auto }
.authwrap .frame{ padding:clamp(26px,4vw,40px) }
.authwrap h1{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl); text-align:center }
.authwrap .sub{ text-align:center; color:var(--ink-soft); font-size:var(--fs-sm); margin-top:8px; margin-bottom:26px }
.authwrap .btn{ width:100%; justify-content:center; margin-top:6px }
.authwrap .alt{ text-align:center; margin-top:20px; font-size:var(--fs-sm); color:var(--ink-soft) }
.authwrap .alt a{ border-bottom:1px dashed var(--line-strong); color:var(--ink) }

/* ── 계정 대시보드 ──────────────────────────────────────────── */
.acct{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.acct__card{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; padding:22px; background:var(--panel); filter:var(--rough) }
.acct__card b{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xl); display:block }
.acct__card span{ font-family:var(--hand); font-size:var(--fs-sm); color:var(--ink-soft) }

/* ── 표 ─────────────────────────────────────────────────────── */
.tablewrap{ overflow-x:auto; border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); filter:var(--rough) }
table.data{ width:100%; border-collapse:collapse; min-width:640px }
table.data th,table.data td{ text-align:left; padding:13px 16px; border-bottom:1.5px dashed var(--line); font-size:var(--fs-sm) }
table.data th{ font-family:var(--hand); font-weight:400; color:var(--ink); background:rgba(26,26,26,.035) }
table.data tr:last-child td{ border-bottom:0 }
table.data td.num{ font-family:var(--mono); font-size:12px; color:var(--ink-2) }

/* ── 페이지네이션 ───────────────────────────────────────────── */
.pager{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:44px }
.pager a,.pager span{ min-width:40px; text-align:center; padding:9px 12px; border:2px solid var(--line-strong);
  border-radius:11px 9px 12px 8px; font-family:var(--mono); font-size:12px; color:var(--ink-2); filter:var(--rough) }
.pager .is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

/* ── 본문(프로즈) ───────────────────────────────────────────── */
.prose h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); margin-top:34px }
.prose ul,.prose ol{ margin-top:14px; padding-left:22px; color:var(--ink-2) }
.prose li{ padding:4px 0 }
.prose code{ font-family:var(--mono); font-size:.9em; background:rgba(26,26,26,.06); padding:2px 6px; border-radius:5px }
.prose table{ width:100%; border-collapse:collapse; margin-top:20px }
.prose th,.prose td{ border:1.5px solid var(--line); padding:10px 12px; font-size:var(--fs-sm); text-align:left }
.prose a{ border-bottom:1px dashed var(--line-strong) }

/* ── 갤러리 필터 ────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px }

/* ── 반응형 보강 ────────────────────────────────────────────── */
@media (max-width:1040px){
  .fgrid{ grid-template-columns:repeat(2,1fr) }
  .logos{ grid-template-columns:repeat(4,1fr) }
  .plans{ grid-template-columns:repeat(2,1fr) }
  .tstm{ grid-template-columns:1fr }
  .ucpanel__inner{ grid-template-columns:1fr; gap:26px }
  .compare{ grid-template-columns:1fr }
  .acct{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:760px){
  .fgrid{ grid-template-columns:1fr }
  .logos{ grid-template-columns:repeat(2,1fr) }
  .plans{ grid-template-columns:1fr }
  .progress{ flex-direction:column }
  .progress__step{ border-right:0; border-bottom:2px solid var(--line) }
  .progress__step:last-child{ border-bottom:0 }
  .header-tools .lang-pick{ display:none }
}

/* ============================================================
   [MOBILE + CROSS-BROWSER]
   실측 기준: iPhone 390×844 / iOS Safari · Chrome · Firefox
   ============================================================ */

/* ── 터치 기기 공통 ─────────────────────────────────────────
   · 손그림 SVG 필터는 iOS Safari 에서 무겁고 간헐적으로
     요소가 통째로 안 그려진다. 터치 기기에서는 끈다.
   · background-attachment:fixed 는 iOS 에서 렌더링이 깨진다. */
@media (hover:none), (pointer:coarse), (max-width:900px){
  :root{ --rough:none }
  body{ background-attachment:scroll, scroll, scroll }
  .frame__img img,.compare__body img,.corridor__back img{ mix-blend-mode:normal }
  .inkcursor{ display:none !important }
  .tilt{ transform:none !important }
}

/* ── 모바일 타이포 스케일 ───────────────────────────────────
   버튼·칩·보조문구가 11~13px 로 떨어지던 것을 14px 이상으로 올린다.
   입력 요소는 16px 미만이면 iOS Safari 가 포커스 시 화면을 확대한다. */
@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:40px;
    --gutter:18px;
    --header-h:62px;
  }

  /* 입력 요소: iOS 확대 방지 (16px 고정) */
  input, select, textarea,
  .url-row input, .subform input, .field input, .field textarea, .field select{
    font-size:16px !important;
  }

  /* 버튼: 글자 키우고 탭 영역 44px 확보 */
  .btn{ font-size:15px; padding:13px 20px; min-height:46px }
  .btn--lg{ font-size:16px; padding:15px 22px; min-height:52px }
  .header-tools .btn--sm{ font-size:14px; padding:9px 14px; min-height:40px }

  /* 칩·배지·보조문구 */
  .chip{ font-size:14.5px; padding:10px 15px; min-height:42px }
  .badge{ font-size:11.5px; padding:5px 10px }
  .tag{ font-size:12px }
  .hcard .meta{ font-size:11.5px }
  .measure-note,.terms-note{ font-size:13px; line-height:1.85 }
  .dropzone__hint{ font-size:15px }
  .dropzone__hint--spec{ font-size:12.5px }
  .foot-legal p{ font-size:12.5px }
  .quick a,.quick button{ font-size:11px }
  .tcard__no,.tstep__no{ font-size:12.5px }
  .codebox pre{ font-size:12.5px; padding:16px }
  .pager a,.pager span{ font-size:13px; padding:11px 14px; min-width:44px }
  .lang-menu a,.lang-menu span{ font-size:15px; padding:11px 12px }
}

/* ── 헤더: 390px 에서 도구 영역이 넘치던 문제 ────────────────
   보조 버튼을 숨기고 주 CTA + 햄버거만 남긴다. */
@media (max-width:760px){
  .site-header__inner{ gap:10px; padding-inline:var(--gutter) }
  .brand__mark{ width:30px; height:30px }
  .brand__name{ font-size:19px }
  .brand__sub{ font-size:8.5px; letter-spacing:.16em }
  .header-tools{ gap:8px; margin-left:auto }
  .header-tools .btn--sm:not(.header-cta){ display:none }  /* 로그인 / 내 작업실 */
  .menu-toggle{ width:42px; height:42px }
}
@media (max-width:430px){
  .brand__sub{ display:none }
  .header-tools .header-cta{ font-size:13.5px; padding:9px 12px }
  .header-tools .header-cta .arr{ display:none }
}
@media (max-width:360px){
  .header-tools .header-cta{ display:none }   /* 아주 좁은 화면은 햄버거만 */
}

/* ── 히어로 ─────────────────────────────────────────────── */
@media (max-width:760px){
  .hero{ min-height:auto }
  .hero--convert{ padding-block:calc(var(--header-h) + 34px) var(--sp-5) }
  .hero h1{ font-size:var(--fs-3xl); line-height:1.14 }
  .hero__lead{ font-size:16px; line-height:1.8 }
  .hero__cta{ gap:10px }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center }
  .doodles{ display:none }                     /* 본문 위로 겹치던 장식 */
  .corridor__word{ opacity:.09 }
  .codetag{ font-size:13px }
}

/* ── 업로드 콘솔 ────────────────────────────────────────── */
@media (max-width:760px){
  .hero__console{ margin-top:28px }
  .dropzone{ padding:30px 18px }
  .dropzone__icon{ width:46px; height:46px }
  .dropzone__title{ font-size:20px }
  .dropzone__actions{ margin-top:20px }
  .dropzone__actions .btn{ width:100%; justify-content:center }
  .url-row{ gap:8px }
  .url-row input{ flex:1 1 100%; min-height:50px }
  .url-row .btn{ width:100%; justify-content:center }
  .trychips__list{ gap:8px }
}

/* ── 우측 퀵바: 콘텐츠를 가리던 문제 ─────────────────────────
   모바일에서는 "맨 위로" 하나만, 스크롤한 뒤에만 띄운다. */
@media (max-width:760px){
  .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) }
  .quick.is-on{ opacity:1; visibility:visible; transform:none }
  .quick a{ display:none }
  .quick .qtop{ width:46px; height:46px; padding:0; border-radius:50%;
    background:var(--paper); box-shadow:0 4px 14px rgba(26,26,26,.16) }
  .quick .qtop span:last-child{ display:none }
  .quick .qtop span{ font-size:18px !important }
}

/* ── 섹션 · 카드 ────────────────────────────────────────── */
@media (max-width:760px){
  .section{ padding-block:var(--sp-6) }
  .section--tight{ padding-block:var(--sp-5) }
  .hist{ grid-template-columns:1fr; gap:12px }
  .hcard{ padding:16px }
  .stats{ grid-template-columns:1fr 1fr; gap:12px }
  .stat{ padding:20px 16px }
  .uctabs{ gap:7px }
  .uctab{ font-size:14px; padding:10px 14px; min-height:42px }
  .ucpanel__inner{ padding:22px 18px }
  .ucsketch{ max-width:280px; margin-inline:auto }
  .tstm__item{ padding:24px 20px }
  .plan{ padding:24px 20px }
  .fcard{ padding:20px 18px }
  .logo-cell{ min-height:74px; font-size:14px }
  .compare__body{ max-height:420px }
  .compare__body iframe{ height:420px }
  .sec-head .kick{ margin-bottom:12px }
  .dividers{ font-size:12px }
}

/* ── 표: 모바일에서 가로 스크롤 안내 ─────────────────────── */
@media (max-width:760px){
  .tablewrap{ -webkit-overflow-scrolling:touch }
  table.data th, table.data td{ padding:12px 13px; font-size:14px }
}

/* ── 폼 · 인증 ──────────────────────────────────────────── */
@media (max-width:760px){
  .field input,.field textarea,.field select{ min-height:50px; padding:13px 14px }
  .field span{ font-size:14px }
  .checkrow{ font-size:14px; gap:9px }
  .checkrow input[type=checkbox]{ width:20px; height:20px; flex-shrink:0 }
  .authwrap .frame{ padding:24px 18px }
  .subform input{ flex:1 1 100%; min-height:50px }
  .subform .btn{ width:100%; justify-content:center }
}

/* ── 푸터 ───────────────────────────────────────────────── */
@media (max-width:760px){
  .foot-collage{ font-size:clamp(26px,9vw,44px); gap:12px 20px; margin-bottom:36px }
  .foot-word{ font-size:clamp(48px,22vw,120px) }
  .foot-col a{ padding:9px 0 }   /* 탭 간격 확보 */
  .site-footer{ padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom)) }
}

/* ── 알림(플래시) ───────────────────────────────────────── */
@media (max-width:760px){
  .flashes{ width:calc(100vw - 24px); top:calc(var(--header-h) + 8px) }
  .flash{ font-size:14px }
}

/* ── 가로 모드 ──────────────────────────────────────────── */
@media (max-width:900px) and (orientation:landscape){
  .hero{ min-height:auto }
}

/* ── 구형 브라우저 폴백 ──────────────────────────────────
   aspect-ratio 미지원(Safari 14 이하)에서 이미지 영역이 0 높이가 되는 것 방지 */
@supports not (aspect-ratio: 4 / 3){
  .tcard .frame__img,.jcard .frame__img,.media-text .mt-media .frame__img,.ucsketch{ min-height:200px }
  .doc .frame__img{ min-height:280px }
  .corridor__back{ height:34vh }
}
/* gap 미지원(Safari 13 이하 플렉스)에서 요소가 붙는 것 방지 */
@supports not (gap: 1px){
  .hero__cta > *,.trychips__list > *,.uctabs > *,.filters > *{ margin:0 6px 6px 0 }
}

/* 드로어 하단 언어 선택 */
.drawer-langs{ margin-top:26px; padding-top:20px; border-top:1.5px dashed var(--line) }
.drawer-langs__label{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-faint) }

/* svh 미지원 브라우저: JS 가 실제 뷰포트 높이를 넣어준다 */
.no-svh .hero{ min-height:var(--vh-fallback, 100vh) }

/* ── 모바일 가독성 미세 조정 (실측 후 보정) ───────────────── */
@media (max-width:760px){
  .badge{ font-size:12.5px }
  .hcard .meta{ font-size:12.5px }
  .dropzone__hint--spec{ font-size:13px }
  .brand{ min-height:44px }              /* 탭 영역 확보 */
  .terms-note a,.measure-note a{ padding:2px 0 }
}
@media (max-width:430px){
  .header-tools .header-cta{ font-size:14px; padding:10px 13px }
}

/* ============================================================
   [TYPO] 버튼·내비 글자 키우기
   손글씨 계열 폰트(Patrick Hand / Gaegu)는 x-height 가 작아
   같은 px 여도 본문 폰트보다 훨씬 작아 보인다.
   버튼·칩·내비는 한 단계 크게 잡는다. (모든 화면 폭 공통)
   ============================================================ */
.btn{ font-size:16px; padding:14px 24px; min-height:48px; line-height:1.2 }
.btn--lg{ font-size:18.5px; padding:17px 30px; min-height:56px }
.header-tools .btn--sm{ font-size:15.5px; padding:11px 18px; min-height:44px }

.nav-top{ font-size:17.5px; padding:11px 15px }
.nav-panel{ min-width:250px }
.nav-panel a{ font-size:16.5px; padding:11px 13px }
.nav-panel .np-cross{ font-size:16px }

.lang-btn{ font-size:13.5px; padding:11px 13px; min-height:44px }
.lang-menu a,.lang-menu span{ font-size:16px; padding:10px 12px }

.chip{ font-size:15.5px; padding:11px 17px; min-height:46px }
.uctab{ font-size:16.5px; padding:12px 20px; min-height:48px }
.filters .uctab{ font-size:16px }

.dropzone__title{ font-size:24px }
.dropzone__hint{ font-size:16px }
.dropzone__hint--spec{ font-size:13.5px; letter-spacing:.08em }

.door span{ font-size:16.5px }
.door small{ font-size:10.5px }

.quick a,.quick button{ font-size:11.5px; width:60px; padding:11px 4px }
.quick a span:first-child,.quick button span:first-child{ font-size:18px !important }

.drawer .acc{ font-size:20px; padding:17px 4px }
.drawer .acc .en{ font-size:12px }
.acc-panel li a{ font-size:17px; padding:11px 6px }

.field span{ font-size:15px }
.field input,.field textarea,.field select{ font-size:16px }
.checkrow{ font-size:15px }
.subform input{ font-size:16px }
.url-row input{ font-size:16px }

.foot-col h4{ font-size:17px }
.foot-col a{ font-size:15.5px; padding:7px 0 }
.foot-legal p{ font-size:13px }

.pager a,.pager span{ font-size:13.5px; padding:11px 15px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center }
.badge{ font-size:12px }
.tag{ font-size:12px }
.hcard h3{ font-size:17px }
.hcard .meta{ font-size:12px }
.tstm__who b{ font-size:16px }
.plan .btn{ font-size:16.5px }
.codetag{ font-size:15px }
.kick{ font-size:15px }

/* 큰 글자 때문에 데스크톱 내비가 좁아지므로 햄버거 전환을 일찍 한다.
   메뉴가 늘어 1280px 미만에서는 두 줄로 접혀 실측 후 기준을 올렸다. */
@media (max-width:1279px){
  .nav,.header-tel{ display:none }
  .menu-toggle{ display:flex }
}

/* 모바일에서는 위 값들을 다시 화면 폭에 맞춰 조정 */
@media (max-width:760px){
  .btn{ font-size:16px; padding:13px 20px; min-height:48px }
  .btn--lg{ font-size:17px; padding:15px 22px; min-height:54px }
  .header-tools .btn--sm{ font-size:14.5px; padding:10px 14px; min-height:42px }
  .chip{ font-size:15px; padding:11px 15px; min-height:44px }
  .uctab{ font-size:15.5px; padding:11px 16px; min-height:46px }
  .dropzone__title{ font-size:21px }
  .dropzone__hint{ font-size:15.5px }
  .quick a,.quick button{ font-size:11px }
  .foot-col a{ font-size:15px }
}
@media (max-width:430px){
  .header-tools .header-cta{ font-size:15px; padding:10px 14px }
}

/* ── 히어로 밀도 조정 ────────────────────────────────────
   제목이 너무 커서 업로드 콘솔이 첫 화면 밖으로 밀리던 문제. */
:root{ --fs-3xl:clamp(40px, 5.2vw + 10px, 92px) }
.hero--convert{ padding-block:calc(var(--header-h) + 40px) var(--sp-5) }
.hero h1{ line-height:1.06 }
.hero__lead{ margin-top:20px }
.hero__console{ margin-top:30px }
.corridor__word{ opacity:.10 }
.doodle{ opacity:.5 }

/* 메타 라벨도 한 단계 크게 */
.badge{ font-size:13px }
.hcard .meta{ font-size:13px }
.measure-note,.terms-note{ font-size:13.5px }

@media (max-width:760px){
  :root{ --fs-3xl:38px }
  .badge{ font-size:13px }
  .hcard .meta{ font-size:13px }
  .measure-note,.terms-note{ font-size:13.5px; line-height:1.85 }
  .hero--convert{ padding-block:calc(var(--header-h) + 26px) var(--sp-5) }
}

/* 업로드 콘솔 뒤 워터마크가 비쳐 글자가 흐려지지 않도록 */
.dropzone{ background:rgba(255,255,255,.93) }
.dropzone.is-over{ background:#fff }
/* 문은 1200px 미만에서는 자리가 부족해 숨긴다 */
@media (max-width:1400px){ .door{ display:none } }   /* 좁은 화면에서는 콘솔과 겹쳐 숨긴다 */

/* ============================================================
   [LEGIBILITY] 손그림 필터를 글자에서 걷어내기
   ------------------------------------------------------------
   템플릿의 feTurbulence + feDisplacementMap 은 요소의 픽셀을
   실제로 밀어내기 때문에, 글자가 든 요소에 걸면
   ① 글자가 지글거리고 ② 테두리가 끊겨 보이며
   ③ CSS filter 특성상 서브픽셀 안티에일리어싱이 꺼져 흐려진다.
   → 글자를 담는 요소·입력 요소에서는 필터를 뺀다.
     손그림 느낌은 '어긋난 모서리 반지름'과 잉크 색으로 유지하고,
     흔들리는 선은 순수 장식 요소(구분선·액자·복도)에만 남긴다.
   ============================================================ */

/* 글자가 들어가는 모든 상자에서 필터 제거 */
.btn,
.chip,
.uctab,
.badge,
.pager a, .pager span,
.lang-btn, .lang-menu,
.nav-panel,
.quick a, .quick button,
.dropzone,
.frame,
.stat,
.ditem,
.hcard,
.fcard,
.logo-cell,
.tstm__item,
.plan,
.acct__card,
.compare__pane,
.progress,
.codebox,
.tablewrap,
.flash,
.ucpanel__inner,
.ucfig,
.site-footer,
.field input, .field textarea, .field select,
.url-row input,
.subform input{
  filter:none;
}

/* ── 버튼: 매끈한 테두리 ─────────────────────────────────── */
.btn{
  border-radius:999px;                 /* 균일한 알약형 — 꾸불거림 없음 */
  border-width:1.5px;
  -webkit-font-smoothing:antialiased;
}
.btn--lg{ border-radius:999px }

/* ── 입력 요소: 매끈한 테두리 ───────────────────────────── */
.field input, .field textarea, .field select,
.url-row input,
.subform input{
  border-radius:10px;
  border-width:1.5px;
}
.field input:focus, .field textarea:focus, .field select:focus,
.url-row input:focus, .subform input:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(26,26,26,.10);
}

/* ── 칩·탭·페이지네이션: 균일한 알약형 ──────────────────── */
.chip, .uctab, .pager a, .pager span, .lang-btn{ border-radius:999px; border-width:1.5px }
.badge{ border-radius:999px }

/* ── 카드·패널: 모서리를 살짝만 어긋나게(손맛 유지) ─────── */
.frame, .stat, .ditem, .hcard, .fcard, .logo-cell, .tstm__item,
.plan, .acct__card, .compare__pane, .codebox, .tablewrap,
.flash, .ucpanel__inner, .dropzone, .nav-panel, .lang-menu, .progress,
.ucfig{
  border-width:1.5px;
}
.hcard, .fcard, .stat, .ditem, .logo-cell, .acct__card{ border-radius:14px 12px 15px 13px }
.tstm__item, .plan, .ucpanel__inner{ border-radius:16px 14px 17px 15px }
.frame, .compare__pane, .codebox, .tablewrap, .flash, .progress{ border-radius:14px }
.nav-panel, .lang-menu{ border-radius:14px }
.dropzone{ border-radius:18px; border-width:2px }

/* 퀵바 버튼 */
.quick a, .quick button{ border-radius:14px; border-width:1.5px }

/* 글자 렌더링을 또렷하게 */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

/* 흔들리는 선은 글자 없는 장식에만 남긴다
   (구분선 · 액자 · 복도 · 진행바 · 낙서) */

/* ============================================================
   [RESULT] 변환 결과 화면
   ============================================================ */

/* 제목 · 상태 · 메타 */
.res-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.res-head h1{ margin:0 }
.res-meta{ flex:1 1 100%; margin-top:6px; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.02em; color:var(--ink-faint) }

/* 툴바 */
.restools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:26px;
  padding-bottom:22px; border-bottom:1.5px dashed var(--line) }
.restools__group{ display:inline-flex; border:1.5px solid var(--ink); border-radius:999px; overflow:hidden }
.restools__group .restool{ border:0; border-radius:0; margin:0 }
.restools__group .restool + .restool{ border-left:1.5px solid var(--line) }
.restool{ display:inline-flex; align-items:center; gap:7px; padding:11px 16px; min-height:44px;
  border:1.5px solid var(--line-strong); border-radius:999px; background:var(--paper);
  font-family:var(--hand); font-size:15px; color:var(--ink-2); white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t) }
.restool:hover{ color:var(--ink); border-color:var(--ink) }
.restool.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.restool svg{ flex-shrink:0; opacity:.8 }
.restool.is-on svg{ opacity:1 }
.restool--select{ padding:0; border:0 }
.restool--select select{ font:inherit; font-family:var(--hand); font-size:15px; min-height:44px;
  padding:10px 14px; border:1.5px solid var(--line-strong); border-radius:999px;
  background:var(--paper); color:var(--ink-2) }
.restools__cta{ margin-left:auto }

/* 결과 미리보기 프레임
   좁은 칸에 넣어도 원본 레이아웃 그대로 보이도록,
   기준 폭(데스크톱 1280 / 모바일 390)으로 렌더링한 뒤 CSS 로 축소한다. */
.compare__body--frame{ padding:0; background:#fff; overflow:hidden; max-height:none }
.pv-stage{ position:relative; width:100%; height:560px; overflow:hidden; background:#fff }
.pv-stage iframe{ position:absolute; top:0; left:0; border:0; background:#fff;
  transform-origin:top left; width:1280px; height:1200px }
.compare__body--frame.is-mobile{ background:var(--paper-2) }
.compare__body--frame.is-mobile .pv-stage{ display:flex; justify-content:center; padding:14px 0; height:594px }
.compare__body--frame.is-mobile iframe{ position:relative;
  border:1.5px solid var(--line); border-radius:14px; box-shadow:0 6px 20px rgba(26,26,26,.10) }
.pv-note{ margin-top:10px; text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint) }
.pv-note a{ border-bottom:1px dashed var(--line-strong) }
.pv-note a:hover{ color:var(--ink) }

/* 품질 리포트 */
.qreport{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:22px }
.qtile{ border:1.5px solid var(--ink); border-radius:14px 12px 15px 13px; padding:18px 18px 16px;
  background:var(--panel); display:flex; flex-direction:column; gap:6px }
.qtile__k{ font-family:var(--hand); font-size:14px; color:var(--ink-soft) }
.qtile__v{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); line-height:1.1 }
.qtile__bar{ display:block; height:5px; margin-top:4px; border-radius:3px; background:rgba(26,26,26,.10); overflow:hidden }
.qtile__bar i{ display:block; height:100%; background:var(--ink) }
.qtile--pass .qtile__v{ color:#1f7a3d }
.qtile--pass .qtile__bar i{ background:#1f7a3d }
.qtile--review .qtile__v{ color:#9a6b00 }
.qtile--fail .qtile__v{ color:#a33 }

/* 텍스트 편집 모드 */
.tedit{ display:flex; flex-direction:column; gap:14px }
.tedit__row{ display:block; border:1.5px solid var(--line); border-radius:12px; padding:14px 16px;
  background:var(--panel) }
.tedit__path{ display:block; font-size:11px; letter-spacing:.04em; color:var(--ink-ghost); margin-bottom:8px }
.tedit__row input,.tedit__row textarea{ width:100%; font:inherit; font-size:16px; padding:11px 13px;
  border:1.5px solid var(--line-strong); border-radius:10px; background:var(--paper); color:var(--ink) }
.tedit__row textarea{ resize:vertical; line-height:1.7 }
.tedit__row input:focus,.tedit__row textarea:focus{ border-color:var(--ink); outline:none;
  box-shadow:0 0 0 3px rgba(26,26,26,.10) }

/* 상태 배지(결과 화면용 색) */
.badge--done{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

@media (max-width:1040px){
  .qreport{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .restools__cta{ margin-left:0 }
}
@media (max-width:760px){
  .restools{ gap:7px }
  .restool{ font-size:14px; padding:10px 13px; min-height:42px }
  .restool--select select{ font-size:16px; min-height:42px }
  .restools__cta{ width:100%; justify-content:center }
  .pv-stage{ height:440px }
  .compare__body--frame.is-mobile .pv-stage{ height:474px }
  .qreport{ grid-template-columns:1fr 1fr; gap:10px }
  .qtile{ padding:14px }
  .res-meta{ font-size:12px }
}

/* ── 갤러리 비교뷰 1:1 (실제 변환 작업 연결 시) ──────────────
   결과 iframe 을 원본 캔버스 폭으로 렌더한 뒤 칸 폭에 맞춰 축소해 원본과 같은 배율로 나란히 보인다(site.js .cmp-wrap). */
.compare--fit .compare__body{ max-height:none; min-height:0; overflow:hidden; background:#fff }
.compare--fit .compare__body img{ mix-blend-mode:normal }
.cmp-wrap{ width:100%; overflow:hidden; background:#fff }
.cmp-wrap iframe{ display:block; border:0; width:100%; height:auto; min-height:300px; background:#fff }

/* ── 갤러리 카드 썸네일 ─────────────────────────────────── */
.hcard{ padding:0; overflow:hidden }
.hcard__thumb{ aspect-ratio:4/3; background:var(--paper-2); border-bottom:2px solid var(--ink); display:grid; place-items:center; overflow:hidden }
.hcard__thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block }
.hcard__nothumb{ color:var(--ink-ghost) }
.hcard__body{ padding:14px 16px 16px }

/* ── 업로드 콘솔: 썸네일 칩 + 가입/인증 안내 ─────────────── */
.chip--thumb{ padding:5px 14px 5px 5px }
.chip--thumb img{ width:34px; height:34px; object-fit:cover; object-position:top; border-radius:8px; display:block }
.gate-box{ margin-top:18px; display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border:2px solid var(--ink);
  border-radius:12px 10px 13px 9px; background:var(--panel); font-size:var(--fs-sm); line-height:1.65; text-align:left }
.gate-box__ico{ flex:none; margin-top:2px }
.gate-box p{ margin:0 }
.gate-box a{ border-bottom:1px dashed var(--ink); font-weight:600; white-space:nowrap }

/* ── 홈 변환 히스토리: 썸네일 스트립 + 1:1 비교 ───────────── */
.sc{ margin-top:28px }
.sc__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.sc__label{ font-size:11px; letter-spacing:.08em; color:var(--ink-faint); display:inline-flex; align-items:center; gap:6px }
.sc__count{ font-family:var(--mono); font-size:10px; padding:2px 8px; border:1.5px solid var(--line-strong); border-radius:999px; color:var(--ink-2); font-weight:400 }
.sc__pager{ display:inline-flex; align-items:center; gap:8px }
.sc__arrow{ width:36px; height:36px; border:2px solid var(--ink); border-radius:50%; background:var(--panel); font-family:var(--mono); cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; justify-content:center }
.sc__arrow[disabled]{ opacity:.3; cursor:default }
.sc__pageno{ font-size:12px; min-width:52px; text-align:center; color:var(--ink-faint); font-variant-numeric:tabular-nums }
.sc__strip{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:10px 2px 12px; margin-top:12px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none }
.sc__strip::-webkit-scrollbar{ display:none }
.sc__item{ flex:0 0 calc((100% - 48px) / 5); scroll-snap-align:start; display:flex; align-items:center; gap:10px; padding:8px 10px 8px 8px;
  border:2px solid var(--line-strong); border-radius:12px 10px 13px 9px; background:var(--panel); cursor:pointer; text-align:left;
  font:inherit; color:var(--ink); min-width:0; transition:transform var(--t) var(--e-out), border-color var(--t) }
.sc__item:hover{ border-color:var(--ink); transform:translateY(-2px) }
.sc__item.is-on{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,26,.08); background:var(--paper-2) }
.sc__item img{ width:56px; height:56px; object-fit:cover; object-position:top; border-radius:8px; flex:none; background:var(--paper-2); pointer-events:none }
.sc__cap{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sc__cap b{ font-family:var(--hand); font-weight:400; font-size:var(--fs-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sc__cap small{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sc__compare{ margin-top:14px; border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); overflow:hidden }
.sc__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:2px solid var(--line) }
.sc__title{ font-family:var(--hand); font-weight:400; font-size:var(--fs-md) }
.sc__meta{ font-size:11px; color:var(--ink-faint) }
.sc__panes{ display:grid; grid-template-columns:1fr 1fr }
.sc__panes .compare__pane{ border:0; border-radius:0; border-left:2px solid var(--line) }
.sc__panes .compare__pane:first-child{ border-left:0 }
.sc__panes .compare__body{ max-height:680px; overflow:auto }
@media (max-width:1100px){ .sc__item{ flex-basis:calc((100% - 36px) / 4) } }
@media (max-width:820px){ .sc__item{ flex-basis:calc((100% - 24px) / 3) } .sc__panes{ grid-template-columns:1fr }
  .sc__panes .compare__pane{ border-left:0; border-top:2px solid var(--line) } .sc__panes .compare__pane:first-child{ border-top:0 }
  .sc__panes .compare__body{ max-height:460px } }
@media (max-width:560px){ .sc__item{ flex-basis:calc((100% - 12px) / 2) } }

/* ── 이미지 스튜디오 ───────────────────────────────────────── */
.st__grid{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:22px; align-items:start }
.st__panel{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); padding:20px 22px }
.st__h{ font-family:var(--hand); font-weight:400; font-size:var(--fs-md); display:flex; align-items:center; gap:8px; margin:0 0 12px }
.st__drop{ position:relative; border:2px dashed var(--line-strong); border-radius:12px 10px 13px 9px; min-height:220px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--paper-2); cursor:pointer; transition:border-color var(--t) }
.st__drop.is-over{ border-color:var(--ink); background:var(--panel) }
.st__drop img[data-st-preview]{ max-width:100%; max-height:360px; object-fit:contain; display:block }
.st__drop-empty{ text-align:center; color:var(--ink-soft); padding:22px; font-size:var(--fs-sm); line-height:1.6 }
.st__drop-empty p{ margin:8px 0 0 }
.st__drop-busy{ position:absolute; inset:0; background:rgba(250,250,250,.8); display:flex; align-items:center; justify-content:center }
.st__src-actions{ display:flex; flex-direction:column; gap:10px; margin-top:12px }
.st__url{ display:flex; gap:6px }
.st__url input{ flex:1; min-width:0; padding:10px 12px; border:2px solid var(--line-strong); border-radius:10px; font:inherit; font-size:var(--fs-sm); background:var(--panel) }
.st__label{ font-size:10px; letter-spacing:.08em; color:var(--ink-faint); margin:16px 0 8px; text-transform:uppercase }
.st__picks{ display:flex; flex-wrap:wrap; gap:6px }
.st__pick{ width:56px; height:56px; padding:0; border:2px solid var(--line-strong); border-radius:10px; overflow:hidden; background:var(--panel); cursor:pointer }
.st__pick img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block }
.st__pick.is-on, .st__pick:hover{ border-color:var(--ink) }
.st__limits{ font-size:11px; color:var(--ink-faint); margin:16px 0 0; line-height:1.7 }
.st__tabs{ margin:0 0 18px }
.st__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px }
.st__panel .field{ display:block; margin-bottom:12px }
.st__panel .field > span{ display:block; font-family:var(--hand); font-size:var(--fs-sm); margin-bottom:6px; color:var(--ink-2) }
.st__panel .field select, .st__panel .field textarea{ width:100%; padding:10px 12px; border:2px solid var(--line-strong); border-radius:10px; font:inherit; font-size:var(--fs-sm); background:var(--panel); color:var(--ink) }
.st__panel .field textarea{ resize:vertical; min-height:70px }
.st__panel form > .btn, .st__panel [data-st-pane] > .btn{ margin-top:6px }
.st__btns{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px }
.st__result{ border:2px solid var(--line-strong); border-radius:12px 10px 13px 9px; padding:12px 14px; margin-top:12px; background:var(--paper-2) }
.st__result-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:var(--fs-sm) }
.st__result pre{ white-space:pre-wrap; word-break:break-word; font:inherit; font-size:var(--fs-sm); margin:0; max-height:320px; overflow:auto; background:var(--panel); border:1.5px solid var(--line); border-radius:8px; padding:10px 12px }
.st__gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:26px; min-height:80px }
.st__empty{ grid-column:1/-1; border:2px dashed var(--line-strong); border-radius:12px 10px 13px 9px; padding:34px; text-align:center; color:var(--ink-faint); font-family:var(--hand) }
.st__card{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); overflow:hidden; display:flex; flex-direction:column }
.st__media{ position:relative; background:var(--paper-2); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:2px solid var(--ink) }
.st__img{ display:block; width:100%; height:100% }
.st__img img{ width:100%; height:100%; object-fit:contain; display:block }
.st__state{ text-align:center; padding:16px; width:100%; font-size:var(--fs-sm); color:var(--ink-soft) }
.st__state p{ margin:8px 0 }
.st__state--err{ color:#a33 }
.st__spin{ display:inline-block; width:22px; height:22px; border:3px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:st-spin .9s linear infinite }
@keyframes st-spin{ to{ transform:rotate(360deg) } }
.st__bar{ max-width:180px; margin:0 auto; height:6px; border:1.5px solid var(--line-strong); border-radius:4px; overflow:hidden }
.st__bar i{ display:block; height:100%; background:var(--ink) }
.st__src{ position:absolute; left:8px; bottom:8px; width:44px; height:44px; object-fit:cover; border-radius:8px; border:2px solid var(--panel); box-shadow:0 1px 4px rgba(0,0,0,.25) }
.st__kind{ position:absolute; top:8px; left:8px; background:var(--panel) }
.st__body{ padding:12px 14px 4px }
.st__prompt{ margin:0 0 4px; font-size:var(--fs-sm); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.st__meta{ margin:0; font-size:10px; color:var(--ink-faint) }
.st__actions{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px 12px; margin-top:auto; align-items:center }
.st__actions .st__del{ margin-left:auto; color:var(--ink-faint) }
.st__hint{ font-size:10px; color:var(--ink-faint) }
.st-toasts{ position:fixed; left:50%; top:calc(var(--header-h) + 12px); transform:translateX(-50%); z-index:150; display:flex; flex-direction:column; gap:8px; width:min(92vw,560px) }
@media (max-width:900px){ .st__grid{ grid-template-columns:1fr } }
.st__drop-busy[hidden], .st__empty[hidden], [data-st-pane][hidden]{ display:none !important }   /* display:flex 가 hidden 속성을 덮지 않게 */

/* ── 메인메뉴: 기능 + 도구와 API 병합 드롭다운(두 열) ── */
.nav-panel--wide{ min-width:520px; display:grid; grid-template-columns:1fr 1fr; gap:0 14px; left:50%; transform:translateX(-50%) translateY(6px) }
.nav-item:hover .nav-panel--wide, .nav-item:focus-within .nav-panel--wide{ transform:translateX(-50%) }
.np-col{ display:flex; flex-direction:column; min-width:0 }
.np-head{ display:block; padding:4px 12px 8px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase }

/* ── 스튜디오 기능별 페이지 ── */
.st__subnav{ margin:0 0 22px }
.st__subnav .uctab{ display:inline-flex; align-items:center; gap:6px }
.st__grid--single{ grid-template-columns:minmax(0,820px) }
@media (max-width:900px){ .st__grid, .st__grid--single{ grid-template-columns:minmax(0,1fr) } .st__panel{ min-width:0 } }   /* 모바일: 패널이 화면 폭을 넘지 않게 */

/* ── 스튜디오: 콘텐츠 폭 100%(좌우 여백만 유지) + 소스/실행 패널 2행 구조 ── */
.page--wide .container{ max-width:1360px }   /* 헤더 .site-header__inner 와 같은 폭 — 콘텐츠가 헤더 폭을 넘지 않게 */
.st__grid--rows, .st__grid--rows.st__grid--single{ grid-template-columns:minmax(0,1fr) }
.st__grid--rows .st__drop img[data-st-preview]{ max-height:480px; margin-inline:auto }
@media (min-width:700px){
  .st__grid--rows .st__src-actions{ flex-direction:row; align-items:center; flex-wrap:wrap }
  .st__grid--rows .st__src-actions .st__url{ flex:1 1 360px }
  .st__grid--rows .st__row{ grid-template-columns:repeat(auto-fit,minmax(130px,220px)) }
}
.st__drop img[data-st-preview][hidden]{ display:none }   /* 숨김 미리보기가 빈 자리를 차지해 안내문이 치우치던 문제 */

/* ── 결제(체크아웃 · 주문 상세 · 자동결제 · 내 작업실 요금제) ── */
.co, .ord{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:22px; align-items:start }
.co__main{ display:grid; gap:22px }
.co__box{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); padding:22px 24px }
.co__h{ font-family:var(--disp); font-weight:700; font-size:18px; margin:0 0 14px; display:flex; align-items:center; gap:8px }
.co__row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1.5px dashed var(--line); font-size:var(--fs-sm) }
.co__row span{ color:var(--ink-soft) }
.co__row b{ text-align:right }
.co__total{ border-bottom:0; padding-top:16px }
.co__total b{ font-size:26px; font-family:var(--disp) }
.co__note{ margin-top:10px; font-size:11px; color:var(--ink-faint); line-height:1.6 }
.co__feat{ margin:12px 0 0 }
.paymethods{ display:grid; gap:8px }
.paymethod{ display:flex; align-items:center; gap:10px; border:2px solid var(--line-strong); border-radius:10px; padding:12px 14px; cursor:pointer; font-size:var(--fs-sm); background:var(--panel) }
.paymethod:has(input:checked){ border-color:var(--ink); background:var(--paper-2) }
.paymethod input, .cbx input{ accent-color:var(--ink) }
.cbx{ display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); line-height:1.55; cursor:pointer }
.cbx input{ margin-top:4px; flex:none }
.cbx a{ border-bottom:1px dashed var(--line-strong) }
.co__msg{ margin-top:12px; font-size:var(--fs-sm); color:var(--ink-soft) }
.co__msg.is-err{ color:#a33 }
.kv{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:9px 14px; font-size:var(--fs-sm); margin:0 }
.kv dt{ color:var(--ink-soft) }
.kv dd{ margin:0; min-width:0; word-break:break-all }
.acct__plan{ margin-top:22px; border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); padding:18px 22px; display:flex; justify-content:space-between; gap:18px; align-items:center; flex-wrap:wrap }
.acct__plan b{ display:block; font-family:var(--disp); font-size:24px; margin-top:4px }
.acct__plan-meta{ display:block; margin-top:6px; font-size:11px; color:var(--ink-faint) }
.acct__plan-links{ display:flex; gap:8px; flex-wrap:wrap }
@media (max-width:900px){ .co, .ord{ grid-template-columns:minmax(0,1fr) } .kv{ grid-template-columns:100px minmax(0,1fr) } }

/* 2026-09-06 업로드 콘솔 순서 변경: URL 입력이 맨 위, 업로드 박스가 OR 아래로 */
#convert-form > .url-row{ margin-top:0 }
#convert-form > .trychips{ margin-top:20px }
.dz-or + .dropzone{ margin-top:22px }

/* ── 2026-09-06 성능: 스크롤마다 다시 그리는 요소의 비용 제거 ─────────────────────
   · body 고정 배경(background-attachment:fixed)은 스크롤마다 전체 재도색 → scroll 로
   · 헤더 backdrop-filter blur 는 스크롤 중 매 프레임 블러 → 불투명도만 올려 대체
   · 히어로 복도·낙서는 매 프레임 transform 되는데 손그림 SVG 필터가 걸려 있어 매번 재래스터 →
     필터를 빼고 합성 레이어로 승격(will-change). 정적 장식(구분선·액자·진행바)의 필터는 그대로. */
body{ background-attachment:scroll,scroll,scroll }
.site-header.is-solid{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(250,250,250,.95) }
.corridor__scene,.doodle[data-par],.fstate__bg img{ will-change:transform }
.corridor__plane,.corridor__word,.corridor__doors,.corridor__doors *,.doodle[data-par],.doodle[data-par] *{ filter:none }
.corridor__plane *{ filter:none }

/* ── 접수 전 견적(차감 크레딧 · 잔액 · 부족 시 결제 안내) ── */
.dz-est{ margin-top:18px; border:2px solid var(--ink); border-radius:14px 12px 15px 11px; background:var(--panel); padding:18px 22px; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; text-align:left }
.dz-est.is-short{ border-color:#a33; background:#fff7f6 }
.dz-est__body{ flex:1 1 320px; min-width:0 }
.dz-est__title{ display:block; font-family:var(--disp); font-size:20px; font-weight:700 }
.dz-est.is-short .dz-est__title{ color:#a33 }
.dz-est__meta{ margin:4px 0 0; font-size:11px; color:var(--ink-faint) }
.dz-est__msg{ margin:8px 0 0; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6 }
.dz-est__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.dz-est [hidden]{ display:none !important }   /* .btn 의 inline-flex 가 hidden 을 덮지 않게 */

/* 2026-09-06 푸터 브랜드 소개 */
.foot-brand .foot-intro{ margin-top:10px; font-size:var(--fs-xs); line-height:1.75; color:var(--ink-faint); max-width:40ch }

/* ── 홈 활용 분야: 연결된 갤러리 샘플 미리보기 ── */
.ucfig{ display:block; aspect-ratio:4/3; border:2px solid var(--ink); border-radius:12px 10px 13px 9px; overflow:hidden; position:relative; background:var(--paper-2) }
.ucfig img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform var(--t);
  image-rendering:auto; backface-visibility:hidden }
.ucfig:hover img{ transform:scale(1.03) }
.ucfig__cap{ position:absolute; left:0; right:0; bottom:0; padding:44px 16px 12px; background:linear-gradient(to top, rgba(26,26,26,.94) 0, rgba(26,26,26,.86) 45%, rgba(26,26,26,0) 100%); color:var(--paper); display:flex; flex-direction:column; gap:3px; text-shadow:0 1px 2px rgba(0,0,0,.6) }
.ucfig__cap b{ font-family:var(--hand); font-size:17px }
.ucfig__cap .mono{ font-size:10.5px; letter-spacing:.06em; opacity:.85 }

/* ── 요금제: 면적 기준 상세 설명 ── */
.credit-rule{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:start; border:2px solid var(--ink); border-radius:16px 14px 17px 13px; background:var(--panel); padding:clamp(22px,3vw,34px) }
.credit-rule h3{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); margin:0 }
.credit-rule h3 em{ font-style:normal; border-bottom:6px solid rgba(26,26,26,.16) }
.credit-rule p{ margin-top:14px; color:var(--ink-2); line-height:1.7 }
.credit-rule__formula{ display:inline-block; margin-top:14px; padding:10px 14px; border:2px dashed var(--line-strong); border-radius:10px; font-size:13px; background:var(--paper-2) }
.credit-rule__table table.data th, .credit-rule__table table.data td{ padding:10px 12px }
@media (max-width:900px){ .credit-rule{ grid-template-columns:minmax(0,1fr) } }

/* ── 요금제 카드: 정가 취소선 + 할인율 ── */
.plan__was{ display:flex; align-items:center; gap:8px; margin-bottom:4px; font-family:var(--mono); font-size:14px; color:var(--ink-faint) }
.plan__was s{ text-decoration:line-through }
.plan__off{ font-style:normal; font-family:var(--hand); font-size:13px; padding:2px 10px; border-radius:999px; background:#a33; color:#fff; letter-spacing:.02em }
.plan--popular .plan__was{ color:rgba(250,250,250,.7) }

/* ── 스튜디오: 이미지 재생성 안내 블록 ── */
.st__about{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--paper-2); padding:22px 24px; margin:0 0 22px }
.st__about h2{ font-family:var(--disp); font-weight:700; font-size:20px; margin:0 0 10px; display:flex; align-items:center; gap:8px }
.st__about-head p{ margin:0; color:var(--ink-2); line-height:1.7; max-width:84ch }
.st__about-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:18px }
.st__about-grid h3{ font-family:var(--hand); font-weight:400; font-size:var(--fs-md); margin:0 0 6px }
.st__about-grid .plan__list{ margin:0 }
.st__about-steps{ margin:0; padding-left:20px; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6 }
.st__about-steps li{ padding:5px 0 }
.st__about-note{ margin:16px 0 0; font-size:11px; color:var(--ink-faint) }
@media (max-width:900px){ .st__about-grid{ grid-template-columns:minmax(0,1fr) } }

.page--wide .hero__console, .page--convert .hero__console{ max-width:none }   /* /convert: 업로드 콘솔을 컨테이너 폭까지(홈 히어로는 860px 유지) */
.dz-est[hidden]{ display:none !important }    /* 견적 패널: display:flex 가 hidden 속성을 덮어 빈 패널이 보이던 문제 */

/* ── 관리자 대리 로그인 표시줄 ── */
.imp-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; padding:10px 16px; background:#a33; color:#fff; font-size:14px; box-shadow:0 -4px 16px rgba(0,0,0,.15) }
.imp-bar b{ color:#fff }
.imp-bar .btn{ background:#fff; color:#a33; border-color:#fff }
.imp-bar form{ margin:0 }

/* ── 변환 결과 비교뷰: 안쪽 스크롤 없이 전체 높이로(좌우 칸 높이 자동 일치) ── */
#pane-preview .compare__body{ max-height:none; overflow:hidden }
#pane-preview .compare__body img{ height:auto }
#pane-preview .pv-stage{ height:auto; min-height:320px }
#pane-preview .compare__body--frame.is-mobile .pv-stage{ padding:0 }   /* 모바일 미리보기 상단 여백 제거 */

/* ── 사용자 제작 사례: 검색줄 · 좋아요 · 2차 메뉴 ── */
.sc-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:22px }
.sc-bar input[type=search]{ flex:1 1 260px; font:inherit; font-size:var(--fs-sm); padding:11px 14px; background:var(--panel); border:2px solid var(--line-strong); border-radius:10px }
.sc-bar__sort{ display:flex; gap:6px; margin-left:auto }
.sc-head{ display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.uctab--alt{ border-style:dashed }
.likebtn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:5px 11px;
  border:2px solid var(--line-strong); border-radius:999px; background:var(--panel); color:var(--ink-soft); cursor:pointer; transition:all var(--t) }
.likebtn:hover{ border-color:var(--ink); color:var(--ink) }
.likebtn__ico{ font-size:13px; line-height:1 }
.likebtn.is-on{ border-color:#a33; color:#a33; background:#fff5f4 }
.likebtn--lg{ font-size:14px; padding:10px 18px; font-family:var(--hand) }
.likebtn--lg .likebtn__ico{ font-size:17px }
.hcard__thumb{ display:block }
.hcard h3 a{ color:inherit }
.mini-thumb{ width:64px; height:48px; object-fit:cover; object-position:top; border:2px solid var(--line-strong); border-radius:8px; display:block }
.pubbox{ margin-top:40px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:2px dashed var(--line-strong); border-radius:14px 12px 15px 11px; background:var(--panel); padding:20px 24px }
.pubbox.is-on{ border-style:solid; border-color:var(--ink) }
.pubbox__text b{ font-family:var(--hand); font-size:var(--fs-md) }
.pubbox__text p{ margin:6px 0 0; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6; max-width:64ch }
.pubbox__act{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }


/* ── 목록 표 → 모바일 카드 (.tablewrap--cards) ─────────────────
   좁은 화면에서는 표를 옆으로 밀어 보는 대신 한 줄이 카드 한 장이 된다.
   칸의 역할을 class 로 정해 두어 열 수가 다른 화면(작업실 8열·이력 9열)에 같은 규칙이 통한다.
   ※ 칸별 규칙에는 반드시 table.data 를 붙일 것 — 붙이지 않으면 위의 td{display:block} 이 더 구체적이어서 이긴다. */
@media (max-width:760px){
  .tablewrap--cards{ border:0; background:none; border-radius:0; overflow:visible }
  .tablewrap--cards table.data{ display:block; min-width:0 }
  .tablewrap--cards table.data thead{ display:none }
  .tablewrap--cards table.data tbody{ display:grid; gap:10px }
  .tablewrap--cards table.data tr{ display:flex; flex-wrap:wrap; align-items:baseline; position:relative;
    min-height:74px; padding:12px 14px 12px 92px; background:var(--panel);
    border:1.5px solid var(--line-strong); border-radius:14px 12px 15px 13px }
  .tablewrap--cards table.data td{ display:block; border:0; padding:0; font-size:13px }

  .tablewrap--cards table.data td.cell-thumb{ position:absolute; left:14px; top:12px; width:64px }
  .tablewrap--cards table.data td.cell-title{ order:1; flex:0 0 100%; font-size:15px; font-weight:600;
    line-height:1.45; color:var(--ink); word-break:break-word }
  .tablewrap--cards table.data td.cell-ref{ order:2; margin:5px 8px 0 0; font-size:11px }
  .tablewrap--cards table.data td.cell-ref br{ display:none }
  .tablewrap--cards table.data td.cell-ref .badge{ margin:0 0 0 6px !important }
  .tablewrap--cards table.data td.cell-status{ order:3; margin:5px 0 0 0 }
  .tablewrap--cards table.data tr::before{ content:""; order:4; flex:0 0 100%; height:0 }   /* 수치 줄 앞에서 줄바꿈 */
  .tablewrap--cards table.data td.cell-meta{ order:5; margin:7px 12px 0 0; font-size:11px }
  .tablewrap--cards table.data td.cell-meta::before{ content:attr(data-label) " "; color:var(--ink-faint) }
  .tablewrap--cards table.data td.cell-go{ order:6; flex:0 0 100%; margin-top:10px; text-align:right }

  /* 빈 목록 안내는 카드 한 장으로 */
  .tablewrap--cards table.data tr.is-empty{ display:block; padding:0; min-height:0 }
  .tablewrap--cards table.data tr.is-empty::before{ content:none }
  .tablewrap--cards table.data tr.is-empty td{ padding:28px 14px !important; text-align:center }
}

/* ============================================================
   [COMPARE] 본문 안 원본 ↔ 결과 비교
   블로그 사례 글에서 세로로 긴 두 이미지를 나란히 놓고 함께 스크롤한다.
   ============================================================ */
/* 바깥 상자는 그냥 블록. 2열 배치는 .cmp__panes 가 맡는다.
   (예전에는 .cmp 가 직접 그리드였는데, 툴바·소스뷰가 추가되면서
    그것들까지 열에 배치돼 패널 폭이 절반으로 줄어드는 문제가 있었다) */
.cmp{ display:block; margin:26px 0 8px; max-width:none }
.cmp__pane{ border:1.5px solid var(--ink); border-radius:14px; overflow:hidden; background:var(--panel) }
.cmp__tag{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-bottom:1.5px solid var(--line);
  font-family:var(--hand); font-size:14px; color:var(--ink-2) }
.cmp__tag b{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--ink-faint) }
.cmp__scroll{ height:520px; overflow-y:auto; overflow-x:hidden; background:#fff;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin }
.cmp__scroll img{ display:block; width:100%; height:auto }
.cmp__note{ margin-top:10px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); text-align:center }
.cmp__note b{ font-family:var(--hand); font-size:13px; color:var(--ink-2) }

.prose .cmp__scroll{ height:600px }

@media (max-width:760px){
  .cmp__panes{ grid-template-columns:1fr; gap:10px }
  .cmp__scroll{ height:360px }
  .cmp__tag{ font-size:13.5px; padding:10px 12px }
}

/* ── 비교 블록: 라이브 HTML 패널 · 툴바 · 소스 보기 ───────── */
.cmp__bar{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:12px }
.cmp__btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 15px; min-height:42px;
  border:1.5px solid var(--line-strong); border-radius:999px; background:var(--paper);
  font-family:var(--hand); font-size:14.5px; color:var(--ink-2); white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t) }
.cmp__btn:hover{ color:var(--ink); border-color:var(--ink) }
.cmp__btn.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.cmp__bar .cmp__hint{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint) }

.cmp__panes{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

/* 라이브 HTML 패널: 기준 폭으로 렌더한 뒤 칸 너비에 맞춰 축소한다.
   (좁은 칸에 100% 로 넣으면 반응형이 걸려 원본과 다른 레이아웃이 된다) */
.cmp__scroll--frame{ position:relative; overflow-y:auto; overflow-x:hidden; background:#fff }
/* 래퍼가 '축소된 크기'를 차지하고, iframe 은 그 위에 원본 크기로 얹혀 축소된다 */
.cmp__frameinner{ position:relative; width:100%; overflow:hidden }
.cmp__frameinner iframe{ position:absolute; top:0; left:0; display:block; border:0; background:#fff }

.cmp__code{ margin-top:14px; border:1.5px solid var(--ink); border-radius:14px; overflow:hidden; background:#161616 }
.cmp__code-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; background:#0f0f0f; color:#e8e4dc;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em }
.cmp__code pre{ margin:0; padding:18px 20px; max-height:600px; overflow:auto; color:#e8e4dc;
  font-family:var(--mono); font-size:12.5px; line-height:1.8; white-space:pre; tab-size:2 }

@media (max-width:760px){
  .cmp__panes{ grid-template-columns:1fr; gap:10px }
  .cmp__bar .cmp__hint{ margin-left:0; flex:1 1 100% }
  .cmp__btn{ font-size:14px; padding:9px 13px }
  .cmp__code pre{ font-size:11.5px; padding:14px; max-height:420px }
}

/* ============================================================
   [QUALITY] 홈 · 원본 ↔ 솜씨 ↔ 범용 LLM 2×2 비교
   ============================================================ */
.qcmp{ margin-top:44px }
.qcmp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.qcmp__cell{ margin:0; border:1.5px solid var(--line-strong); border-radius:14px; overflow:hidden;
  background:var(--panel); transition:border-color var(--t) }
.qcmp__cell--ref{ border-color:var(--ink) }
.qcmp__cell--win{ border-color:var(--ink); border-width:2.5px; box-shadow:6px 7px 0 rgba(26,26,26,.09) }
.qcmp__cap{ display:flex; align-items:baseline; gap:9px; padding:12px 15px;
  border-bottom:1.5px solid var(--line) }
.qcmp__cap b{ font-family:var(--disp); font-weight:700; font-size:var(--fs-md) }
.qcmp__cap span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-faint) }
.qcmp__cell--win .qcmp__cap{ background:var(--ink) }
.qcmp__cell--win .qcmp__cap b{ color:var(--paper) }
.qcmp__cell--win .qcmp__cap span{ color:rgba(250,250,250,.7) }
/* 네 장의 원본 비율이 제각각(2.74:1 ~ 1.6:1)이라
   같은 칸에 넣고 잘리지 않게 contain 으로 맞춘다. */
.qcmp__shot{ background:#fff; aspect-ratio:3/2; display:grid; place-items:center; overflow:hidden; padding:10px }
.qcmp__shot img{ width:100%; height:100%; object-fit:contain }
.qcmp__empty{ font-family:var(--hand); font-size:var(--fs-sm); color:var(--ink-ghost) }
.qcmp__note{ margin-top:16px; text-align:center; font-family:var(--mono);
  font-size:12px; line-height:1.9; color:var(--ink-faint) }

/* 왜 갈리는가 */
.qwhy{ margin-top:64px }
.qwhy__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px }
.qwhy__card{ border:1.5px solid var(--line-strong); border-radius:16px 14px 17px 15px;
  padding:26px 24px; background:var(--panel) }
.qwhy__card--win{ border-color:var(--ink); border-width:2.5px; box-shadow:6px 7px 0 rgba(26,26,26,.09) }
.qwhy__no{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-faint) }
.qwhy__card h4{ font-family:var(--disp); font-weight:700; font-size:var(--fs-md); margin-top:10px; line-height:1.3 }
.qwhy__card p{ margin-top:12px; color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.85 }

.qwhy__verdict{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px }
.qwhy__side{ border:1.5px solid var(--line-strong); border-radius:16px 14px 17px 15px; padding:24px 22px;
  background:var(--paper-2) }
.qwhy__side--win{ background:var(--ink); border-color:var(--ink) }
.qwhy__tag{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  padding:4px 10px; border:1.5px solid var(--line-strong); border-radius:999px; color:var(--ink-2) }
.qwhy__side--win .qwhy__tag{ border-color:rgba(250,250,250,.5); color:var(--paper) }
.qwhy__side b{ display:block; margin-top:14px; font-family:var(--disp); font-weight:700; font-size:var(--fs-lg) }
.qwhy__side p{ margin-top:10px; color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.85 }
.qwhy__side--win b{ color:var(--paper) }
.qwhy__side--win p{ color:rgba(250,250,250,.82) }
.qwhy__side--win strong{ color:var(--paper) }
.qwhy__foot{ margin-top:22px; text-align:center; font-family:var(--hand); font-size:var(--fs-md); color:var(--ink-2) }

@media (max-width:1040px){
  .qwhy__grid{ grid-template-columns:1fr }
}
@media (max-width:760px){
  .qcmp__grid{ gap:10px }
  .qcmp__cap{ padding:10px 12px }
  .qcmp__cap b{ font-size:var(--fs-base) }
  .qwhy__verdict{ grid-template-columns:1fr }
  .qwhy__card{ padding:22px 18px }
  .qwhy__side{ padding:20px 18px }
  .qwhy__foot{ font-size:var(--fs-base) }
}

/* ── 우측 퀵바: 라벨이 너무 작아 안 읽히던 문제 ─────────────
   손글씨 폰트는 같은 px 에서도 본문보다 작아 보인다.
   라벨을 키우고 버튼 폭·간격도 함께 늘린다. */
.quick{ gap:10px }
.quick a, .quick button{
  width:76px; padding:13px 6px; gap:5px;
  font-size:15px; line-height:1.2; border-radius:18px;
}
.quick a span:first-child,
.quick button span:first-child{ font-size:22px !important; line-height:1 }

@media (max-width:1024px){
  .quick a, .quick button{ width:70px; font-size:14px; padding:12px 5px }
  .quick a span:first-child,
  .quick button span:first-child{ font-size:20px !important }
}

/* ── 비교뷰 오른쪽 열: 화면 ↔ 소스 즉시 전환 ──────────────── */
.srctoggle{ display:inline-flex; border:1.5px solid var(--ink); border-radius:999px; overflow:hidden }
.srctoggle__btn{ padding:6px 14px; min-height:32px; font-family:var(--hand); font-size:14px;
  color:var(--ink-2); background:var(--paper); border:0; white-space:nowrap;
  transition:background var(--t), color var(--t) }
.srctoggle__btn + .srctoggle__btn{ border-left:1.5px solid var(--line) }
.srctoggle__btn:hover{ color:var(--ink) }
.srctoggle__btn.is-on{ background:var(--ink); color:var(--paper) }

.srcbody{ background:#161616; padding:0 }
.srcbody__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:#0f0f0f; color:#b9b2a6;
  font-size:11px; letter-spacing:.1em; position:sticky; top:0; z-index:1 }
.srcbody__bar .srctoggle__btn{ background:transparent; color:#b9b2a6; border:1px solid #3a3a3a;
  border-radius:6px; padding:4px 10px; min-height:0; font-size:12px }
.srcbody__bar .srctoggle__btn:hover{ color:#fff; border-color:#7a7a7a }
.srcbody pre{ margin:0; padding:16px 18px; color:#e8e4dc;
  font-family:var(--mono); font-size:12.5px; line-height:1.8; white-space:pre; tab-size:2 }

@media (max-width:760px){
  .srctoggle__btn{ font-size:13.5px; padding:6px 11px }
  .srcbody pre{ font-size:11.5px; padding:13px }
}

/* 블로그 비교뷰: 소스를 오른쪽 칸 안에서 보여줄 때 */
.cmp__code--inpane{ margin-top:0; border:0; border-radius:0; height:600px; display:flex; flex-direction:column }
.cmp__code--inpane .cmp__code-head{ flex:0 0 auto }
.cmp__code--inpane pre{ flex:1 1 auto; max-height:none }
@media (max-width:760px){ .cmp__code--inpane{ height:360px } }

/* 내 작업실 혜택 리포트 (2026-09-07): 외주 시장 견적 대비 아낀 금액 · 절약률 · 절약 시간 · 무료 크레딧 */
.acct__benefit{ margin-top:22px; border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); padding:24px 22px 16px; filter:var(--rough) }
.acct__benefit-head{ text-align:center }
.acct__benefit-kick{ display:inline-block; font-family:var(--hand); font-size:var(--fs-sm); letter-spacing:.06em; color:var(--ink-2); border-bottom:2px solid var(--ink); padding-bottom:2px }
.acct__benefit-head p{ margin:10px 0 0; font-size:var(--fs-sm); color:var(--ink-soft) }
.acct__benefit-head b{ display:block; margin-top:6px; font-family:var(--disp); font-weight:700; font-size:var(--fs-xl); line-height:1.15 }
.acct__benefit-head b em{ font-style:normal; color:#c8321f }
.acct__benefit-sub{ font-size:11px !important; color:var(--ink-faint) !important }
.acct__benefit-tiles{ margin-top:18px; padding-top:18px; border-top:2px dashed var(--line); display:grid; grid-template-columns:repeat(5,1fr) }
.acct__benefit-tile{ padding:6px 8px; text-align:center; border-left:1px solid var(--line) }
.acct__benefit-tile:first-child{ border-left:0 }
.acct__benefit-tile span{ display:block; font-family:var(--hand); font-size:var(--fs-sm); color:var(--ink-soft) }
.acct__benefit-tile b{ display:block; margin-top:4px; font-family:var(--mono); font-size:15px; color:var(--ink) }
.acct__benefit-tile small{ display:block; margin-top:3px; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); line-height:1.4 }
.acct__benefit-notes{ margin-top:14px; font-size:var(--fs-sm); color:var(--ink-soft) }
.acct__benefit-notes summary{ cursor:pointer; font-family:var(--hand); color:var(--ink-2) }
.acct__benefit-notes ul{ margin:8px 0 0; padding-left:18px; line-height:1.7 }
.acct__benefit-notes li b{ color:var(--ink) }
@media (max-width:900px){
  .acct__benefit-tiles{ grid-template-columns:repeat(3,1fr); row-gap:12px }
  .acct__benefit-tile:nth-child(3n+1){ border-left:0 }
}
@media (max-width:560px){
  .acct__benefit-tiles{ grid-template-columns:repeat(2,1fr) }
  .acct__benefit-tile:nth-child(3n+1){ border-left:1px solid var(--line) }
  .acct__benefit-tile:nth-child(2n+1){ border-left:0 }
}

/* 홈 품질 비교 상세 레이어 (2026-09-07): 카드 탭 → 화면 가득 크게 보기 */
.qcmp__shot--zoom{ position:relative; cursor:zoom-in }
.qcmp__zoom{ position:absolute; right:8px; bottom:8px; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px;
  background:rgba(26,26,26,.82); color:#fafafa; font-family:var(--hand); font-size:11.5px; letter-spacing:.04em; pointer-events:none }
.qlb{ position:fixed; inset:0; z-index:1200; background:#141414; color:#fafafa; display:flex; flex-direction:column; -webkit-user-select:none; user-select:none }
.qlb__bar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid rgba(250,250,250,.14) }
.qlb__title{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:8px }
.qlb__title b{ font-family:var(--disp); font-weight:700; font-size:var(--fs-lg); color:#fff }
.qlb__title span{ font-size:10.5px; letter-spacing:.1em; color:rgba(250,250,250,.65) }
.qlb__count{ font-size:11px; color:rgba(250,250,250,.65) }
.qlb__x{ flex:0 0 auto; width:38px; height:38px; border:1.5px solid rgba(250,250,250,.4); border-radius:50%; background:transparent; color:#fff; font-size:24px; line-height:1; cursor:pointer }
.qlb__stage{ flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y pinch-zoom; background:#fff }
.qlb__stage img{ display:block; width:100%; height:auto; max-width:none }
.qlb--actual .qlb__stage img{ width:auto }
.qlb__nav{ flex:0 0 auto; display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid rgba(250,250,250,.14) }
.qlb__btn{ flex:1 1 0; padding:11px 8px; border:1.5px solid rgba(250,250,250,.4); border-radius:999px; background:transparent; color:#fff; font-family:var(--hand); font-size:15px; cursor:pointer }
.qlb__btn[aria-pressed="true"]{ background:#fafafa; color:#1a1a1a; border-color:#fafafa }
.qlb__btn:disabled{ opacity:.35; cursor:default }
@media (min-width:761px){
  .qlb__stage{ display:grid; place-items:start center; padding:18px }
  .qlb__stage img{ width:min(100%, 1200px) }
  .qlb--actual .qlb__stage img{ width:auto }
  .qlb__btn{ flex:0 0 auto; min-width:120px }
  .qlb__nav{ justify-content:center }
}
/* 이미지 치수 표기 (2026-09-07): 갤러리 카드·상세 */
.hcard .meta .dims{ font-family:var(--mono); color:var(--ink) }
.dividers .dims{ font-family:var(--mono); color:var(--ink) }

/* 요금제 5열: 가격 글자·배지가 좁은 카드를 넘치지 않게 (2026-09-07) */
@media (min-width:1001px){
  .plans .plan{ padding:26px 18px }
  .plans .plan__price b{ font-size:clamp(22px, 1.75vw + 4px, 34px); letter-spacing:-.01em; word-break:keep-all }
  .plans .plan__price small{ font-size:11px }
  .plans .plan__was{ font-size:12px; flex-wrap:wrap; row-gap:4px }
  .plans .plan__off{ font-size:11px; padding:2px 8px; white-space:nowrap }
}

/* ── 메인메뉴 전체 메뉴판(PC): 어느 메뉴에 올려도 그룹 5개가 헤더 아래에 한 번에 펼쳐진다 ──
   올린 그룹 .is-hot(흰 카드·잉크 테두리) · 현재 페이지가 속한 그룹 .is-cur(종이-2) · 현재 항목 .is-active(잉크 반전) */
.nav-board{ position:absolute; left:0; right:0; top:100%; z-index:5; 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(--header-h)); overflow:auto;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .22s, transform .22s var(--e-out), visibility .22s }
.nav-board::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px }   /* 메뉴→메뉴판 사이 틈 메움 */
.site-header.is-board-open .nav-board{ opacity:1; visibility:visible; transform:none }
.site-header.is-board-open{ background:var(--paper) }
.site-header.is-board-open::after{ background:var(--line); filter:var(--rough) }
.site-header.is-board-open .nav-top .chev{ transform:rotate(180deg) }
.nav-board__inner{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px 18px; max-width:1360px; margin-inline:auto }
.nav-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 }
.nav-board__grp.is-hot, .nav-board__grp:hover{ border-color:var(--ink); border-style:solid; background:var(--panel) }
.nav-board__grp.is-cur{ background:var(--paper-2) }
.nav-board__grp h4{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:17px; color:var(--ink) }
.nav-board__grp h4 svg{ width:20px; height:20px; flex-shrink:0 }
.nav-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; text-transform:uppercase }
.nav-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) }
.nav-board__grp ul{ list-style:none; margin:0; padding:0 }
.nav-board__grp li a{ display:flex; gap:10px; align-items:flex-start; padding:8px; border-radius:10px; color:var(--ink); transition:background .15s }
.nav-board__grp li a:hover{ background:rgba(26,26,26,.06) }
.nav-board__grp li a.is-active{ background:var(--ink); color:var(--paper) }
.nav-board__grp li a .ic{ flex-shrink:0; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; margin-top:1px }
.nav-board__grp li a .ic svg{ width:22px; height:22px }
.nav-board__grp li a .tx{ min-width:0 }
.nav-board__grp li a b{ display:block; font-family:var(--hand); font-weight:400; font-size:16.5px; line-height:1.25 }
.nav-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 }
.nav-board__grp li a.is-active small{ color:rgba(250,250,250,.75) }
.nav-board__foot{ max-width:1360px; margin:14px auto 0; display:flex; gap:16px; flex-wrap:wrap; align-items:center }
.nav-board__foot span{ font-family:var(--hand); font-size:14px; color:var(--ink-soft) }
.nav-board__foot a{ color:var(--ink); border-bottom:1px dashed var(--line-strong); font-family:var(--hand); font-size:14px }
@media (max-width:1040px){ .nav-board{ display:none } }   /* 모바일·태블릿은 드로어 */

/* ── 상단 메뉴: 라벨 줄바꿈 금지 + 1366px 이하는 글자·여백을 줄여 우측 도구와 겹치지 않게(한국어·중국어 라벨이 1280px 에서 두 줄로 꺾이던 문제) ── */
.nav-top{ white-space:nowrap }
@media (max-width:1366px){
  .site-header__inner{ gap:14px }
  .nav{ gap:0 }
  .nav-top{ font-size:15.5px; padding:9px 10px; gap:4px }
  .header-tools{ gap:8px }
  .header-tools .btn--sm{ font-size:14px; padding:10px 14px; min-height:40px }
}

/* ============================================================
   솜씨(Somssii) — 세트 만들기 · 세트 페이지 · 갤러리 카드 · 홈 쇼케이스 (2026-09-08)
   솜씨 손그림·종이·잉크 톤을 그대로 잇는다. 변수(--ink, --paper-2, --panel, --line, --mono, --hand)는 site.css 상단 정의.
   ============================================================ */
/* 업로드 콘솔: 미리보기 · 팩 선택 · 옵션 */
.ss-console .dropzone{ min-height:220px }
.ss-console .dz-preview{ display:block; max-height:260px; max-width:100%; margin:0 auto 12px; border:2px solid var(--ink); border-radius:12px; object-fit:contain; background:#fff }
.ss-console .dropzone.has-preview .dropzone__hint--spec{ display:none }
.ss-packs{ border:0; padding:0; margin:18px 0 0 }
.ss-packs legend{ font-size:11px; letter-spacing:.12em; color:var(--ink-faint); margin-bottom:10px; padding:0 }
.ss-packs__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.ss-pack input{ position:absolute; opacity:0; pointer-events:none }
.ss-pack__box{ display:flex; flex-direction:column; gap:4px; padding:12px 12px 11px; border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); cursor:pointer; min-height:100%; transition:transform .15s, box-shadow .15s }
.ss-pack__box b{ font-family:var(--hand); font-size:16px; font-weight:400 }
.ss-pack__box small{ font-size:12px; line-height:1.5; color:var(--ink-faint) }
.ss-pack__ico{ color:var(--ink) }
.ss-pack input:checked + .ss-pack__box{ background:var(--ink); color:#fff; transform:rotate(-.4deg) }
.ss-pack input:checked + .ss-pack__box small, .ss-pack input:checked + .ss-pack__box .ss-pack__ico{ color:rgba(255,255,255,.82) }
.ss-pack input:focus-visible + .ss-pack__box{ outline:2px dashed var(--ink); outline-offset:3px }
.ss-opts{ display:grid; grid-template-columns:200px 1fr; gap:12px; margin-top:14px }
.ss-opts .field span{ font-size:12px }
.ss-cost{ font-size:11px; letter-spacing:.06em; color:var(--ink-faint); margin-left:14px }
.ss-console form.is-busy{ opacity:.7; pointer-events:none }
@media (max-width:900px){ .ss-packs__grid{ grid-template-columns:repeat(2,1fr) } .ss-opts{ grid-template-columns:1fr } }

/* 팩 설명(만들기 페이지) · 홈 "열 가지 솜씨" */
.ss-packinfo, .ss-looks{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px }
.ss-packinfo__card, .ss-looks__pack{ border:2px solid var(--ink); border-radius:14px 12px 15px 13px; background:var(--panel); padding:18px 18px 16px }
.ss-packinfo__card h3, .ss-looks__pack h3{ font-family:var(--hand); font-weight:400; font-size:20px; display:flex; align-items:center; gap:8px }
.ss-packinfo__card p, .ss-looks__pack p{ margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--ink-faint) }
.ss-packinfo__list{ margin:14px 0 0; padding-left:0; list-style:none; counter-reset:c; display:grid; gap:5px }
.ss-packinfo__list li{ counter-increment:c; font-size:13px; padding-left:28px; position:relative }
.ss-packinfo__list li::before{ content:counter(c,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:var(--mono); font-size:10px; color:var(--ink-ghost) }
.ss-looks__chips{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px }
.ss-looks__chips li{ font-size:11.5px; padding:3px 9px; border:1.5px solid var(--line-strong, var(--ink)); border-radius:999px; background:#fff }
@media (max-width:1000px){ .ss-packinfo, .ss-looks{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .ss-packinfo, .ss-looks{ grid-template-columns:1fr } }

/* 세트 카드(갤러리·작업실·홈) */
.ss-sets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px }
.ss-set__cover{ aspect-ratio:1/1; position:relative }
.ss-set__src{ position:absolute; left:8px; bottom:8px; width:56px; height:56px; border:2px solid var(--ink); border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 0 var(--ink) }
.ss-set__src img{ width:100%; height:100%; object-fit:cover; display:block }
.ss-set__strip{ display:grid; grid-template-columns:repeat(10,1fr); gap:2px; padding:4px; background:var(--paper-2); border-bottom:2px solid var(--ink) }
.ss-set__strip img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:3px }

/* 세트 페이지 */
.phero--set .ss-head{ display:flex; justify-content:space-between; gap:24px; align-items:flex-end; flex-wrap:wrap }
.phero--set h1{ margin-top:10px }
.ss-head__meta{ margin-top:12px; font-size:11px; letter-spacing:.05em; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.ss-head__actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.ss-head__actions form{ margin:0 }
.ss-progress{ margin-top:22px; border:2px solid var(--ink); border-radius:12px; padding:14px 16px; background:var(--panel) }
.ss-progress__bar{ height:10px; border:1.5px solid var(--ink); border-radius:999px; overflow:hidden; background:#fff }
.ss-progress__bar i{ display:block; height:100%; background:var(--ink); transition:width .6s ease }
.ss-progress p{ margin:10px 0 0; font-size:11px; letter-spacing:.05em; color:var(--ink-faint) }
.ss-layout{ display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start }
.ss-source{ position:sticky; top:calc(var(--header-h, 72px) + 16px); border:2px solid var(--ink); border-radius:14px 12px 15px 13px; background:var(--panel); overflow:hidden }
.ss-source__head{ padding:9px 12px; border-bottom:2px solid var(--ink); font-size:11px; letter-spacing:.08em; display:flex; gap:6px; align-items:center }
.ss-source img{ width:100%; display:block; background:var(--paper-2) }
.ss-source__ai{ padding:10px 12px; border-top:2px solid var(--ink); font-size:13px; line-height:1.6 }
.ss-source__ai summary{ cursor:pointer; font-size:11px; letter-spacing:.06em }
.ss-source__ai p{ margin-top:8px }
.ss-source__note{ padding:10px 12px; border-top:2px solid var(--ink); font-size:11px; line-height:1.6; color:var(--ink-faint) }
.ss-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px }
.ss-card{ border:2px solid var(--ink); border-radius:12px 10px 13px 9px; background:var(--panel); overflow:hidden; display:flex; flex-direction:column }
.ss-card__media{ position:relative; aspect-ratio:1/1; background:var(--paper-2); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:2px solid var(--ink) }
.ss-card__media .ss-card__img{ display:block; width:100%; height:100% }
.ss-card__media .ss-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s }
.ss-card__media .ss-card__img:hover img{ transform:scale(1.03) }
.ss-card__no{ position:absolute; left:8px; top:8px; font-size:10px; letter-spacing:.1em; padding:2px 7px; border:1.5px solid var(--ink); border-radius:999px; background:#fff }
.ss-card__body{ padding:10px 12px 8px; display:flex; flex-direction:column; gap:3px }
.ss-card__concept{ font-family:var(--hand); font-weight:400; font-size:16px; line-height:1.3 }
.ss-card__sub{ font-size:10px; color:var(--ink-faint); letter-spacing:.03em }
.ss-card__actions{ display:flex; gap:6px; padding:0 12px 12px; flex-wrap:wrap; margin-top:auto }
.ss-card__hint{ font-size:10px; color:var(--ink-ghost) }
.ss-card--pending .ss-card__media, .ss-card--processing .ss-card__media{ background:repeating-linear-gradient(-45deg, var(--paper-2) 0 10px, #fff 10px 20px) }
.ss-card--failed .st__state--err small{ display:block; margin-top:6px; font-size:10px; color:var(--ink-ghost); word-break:break-all }
.ss-like.is-on{ background:var(--ink); color:#fff }
@media (max-width:900px){ .ss-layout{ grid-template-columns:1fr } .ss-source{ position:static } .ss-grid{ grid-template-columns:repeat(2,1fr) } }

/* 홈 쇼케이스 */
.ss-show{ margin-top:26px }
.ss-show__strip{ display:flex; gap:12px; overflow-x:auto; padding:10px 2px 12px; scroll-snap-type:x mandatory }
.ss-show__item{ flex:none; scroll-snap-align:start; display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border:2px solid var(--ink); border-radius:12px; background:var(--panel); cursor:pointer; font:inherit; color:inherit; text-align:left; min-width:220px }
.ss-show__item img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1.5px solid var(--ink) }
.ss-show__item.is-on{ background:var(--ink); color:#fff }
.ss-show__item .sc__cap b{ display:block; font-family:var(--hand); font-weight:400; font-size:16px; line-height:1.2 }
.ss-show__item .sc__cap small{ font-size:11px; opacity:.75 }
.ss-show__stage{ display:grid; grid-template-columns:260px 1fr; gap:18px; margin-top:12px; align-items:start }
.ss-show__src, .ss-show__out{ border:2px solid var(--ink); border-radius:14px 12px 15px 13px; background:var(--panel); padding:12px }
.ss-show__label{ display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.08em; margin-bottom:10px }
.ss-show__src img{ width:100%; display:block; border:1.5px solid var(--ink); border-radius:10px; background:#fff }
.ss-show__src b{ display:block; margin-top:10px; font-family:var(--hand); font-weight:400; font-size:18px }
.ss-show__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px }
.ss-show__grid figure{ margin:0 }
.ss-show__grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border:1.5px solid var(--ink); border-radius:8px; background:#fff }
.ss-show__grid figcaption{ font-size:10px; margin-top:4px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:900px){ .ss-show__stage{ grid-template-columns:1fr } .ss-show__grid{ grid-template-columns:repeat(3,1fr) } }
/* 메뉴판 4그룹 */
.nav-board__inner--4{ grid-template-columns:repeat(4,1fr) }