:root{
  --ink:#14161B; --ink2:#0F1115; --surface:#1B1E26; --surface2:#21252F;
  --signal:#F2A341; --signal-d:#E08A24;
  --paper:#ECEEF2; --paper-d:#D9DCE3;
  --muted:#959CAA; --muted-d:#6F7787;
  --line:#2B3140; --line-2:#363D4D;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--paper);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif; font-weight:400;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.en{font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--signal);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--signal);opacity:.7}
.eyebrow.dark{color:var(--signal-d)}
.eyebrow.dark::before{background:var(--signal-d)}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(20,22,27,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
header.scrolled{border-bottom-color:var(--line);background:rgba(16,17,21,.9)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:inline-flex;align-items:center;gap:11px;cursor:pointer}
.brand svg{display:block}
.brand .wm{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:20px;letter-spacing:.02em;line-height:1}
.brand .wm .n{color:var(--signal)}
.navlinks{display:flex;align-items:center;gap:4px}
.navlinks button,.navlinks a{
  font-size:13.5px;font-weight:500;color:var(--muted);
  padding:9px 14px;border-radius:8px;transition:color .2s,background .2s;
}
.navlinks button:hover,.navlinks a:hover{color:var(--paper)}
.navlinks button.active,.navlinks a.active{color:var(--paper)}
.navlinks button.active::after,.navlinks a.active::after{content:"";display:block;height:2px;margin-top:5px;background:var(--signal);border-radius:2px}
.nav-cta{
  margin-left:10px;background:var(--signal);color:#14161B;font-weight:600;font-size:13.5px;
  padding:10px 18px;border-radius:9px;transition:transform .15s var(--ease),box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(242,163,65,.6)}
.navlinks a.nav-cta,.navlinks a.nav-cta:hover,.navlinks a.nav-cta.active{color:#14161B}
.navlinks a.nav-cta.active::after{display:none}
.burger{display:none;width:42px;height:42px;border-radius:9px;border:1px solid var(--line-2);align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--paper);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--paper)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- pages ---------- */
main{padding-top:68px}
.page{display:none}
.page.show{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- inspection frame motif (signature) ---------- */
.iframe{position:relative;overflow:hidden;border-radius:14px}
.iframe img{width:100%;height:100%;object-fit:cover}
.iframe .br{position:absolute;width:30px;height:30px;border:2px solid var(--paper);z-index:3;pointer-events:none;mix-blend-mode:difference;opacity:.92}
.iframe .br.tl{top:12px;left:12px;border-right:none;border-bottom:none}
.iframe .br.tr{top:12px;right:12px;border-left:none;border-bottom:none}
.iframe .br.bl{bottom:12px;left:12px;border-right:none;border-top:none}
.iframe .br.br{bottom:12px;right:12px;border-left:none;border-top:none}
.iframe .dot{position:absolute;top:50%;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--signal);transform:translate(-50%,-50%);z-index:4;
  box-shadow:0 0 0 4px rgba(242,163,65,.22),0 0 16px 2px rgba(242,163,65,.5)}
.iframe .meta{position:absolute;left:14px;bottom:12px;z-index:4;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;color:var(--paper);
  background:rgba(15,17,21,.62);backdrop-filter:blur(3px);padding:4px 8px;border-radius:5px}
.iframe.scanon::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  box-shadow:0 0 12px 2px rgba(242,163,65,.6);animation:scan 4.5s var(--ease) infinite}
@keyframes scan{0%{top:6%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:94%;opacity:0}}

/* ============ HERO ============ */
.hero{position:relative;padding:clamp(72px,13vh,140px) 0 clamp(56px,8vh,96px);overflow:hidden}
.hero .grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 80% at 80% 0%,rgba(242,163,65,.10),transparent 55%),
             radial-gradient(90% 70% at 10% 90%,rgba(149,156,170,.07),transparent 60%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(34px,5.4vw,62px);line-height:1.12;margin:22px 0 0}
.hero h1 .hl{color:var(--signal);position:relative;white-space:nowrap}
.hero .sub{margin-top:22px;font-size:clamp(15px,1.6vw,18px);color:var(--paper-d);max-width:46ch;font-weight:300}
.hero .sub b{font-weight:600;color:var(--paper)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;
  padding:14px 24px;border-radius:11px;transition:transform .15s var(--ease),box-shadow .25s,background .2s,border-color .2s}
.btn-primary{background:var(--signal);color:#14161B}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(242,163,65,.55)}
.btn-ghost{border:1px solid var(--line-2);color:var(--paper)}
.btn-ghost:hover{border-color:var(--muted);transform:translateY(-2px)}
.btn .ar{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800}

/* hero viewfinder */
.viewfinder{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,var(--surface),var(--ink2));border:1px solid var(--line)}
.viewfinder img{width:100%;height:100%;object-fit:cover;opacity:.92}
.vf-grid{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(rgba(236,238,242,.08) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg,rgba(236,238,242,.08) 1px,transparent 1px) 0 0/25% 100%}
.vf-br{position:absolute;width:40px;height:40px;border:2.5px solid var(--paper);z-index:3}
.vf-br.tl{top:16px;left:16px;border-right:none;border-bottom:none}
.vf-br.tr{top:16px;right:16px;border-left:none;border-bottom:none}
.vf-br.bl{bottom:16px;left:16px;border-right:none;border-top:none}
.vf-br.br{bottom:16px;right:16px;border-left:none;border-top:none}
.vf-dot{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:var(--signal);
  transform:translate(-50%,-50%);z-index:4;box-shadow:0 0 0 6px rgba(242,163,65,.18),0 0 22px 4px rgba(242,163,65,.55);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 6px rgba(242,163,65,.18),0 0 22px 4px rgba(242,163,65,.45)}50%{box-shadow:0 0 0 9px rgba(242,163,65,.08),0 0 28px 6px rgba(242,163,65,.65)}}
.vf-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);box-shadow:0 0 14px 2px rgba(242,163,65,.6);animation:scan 4.2s var(--ease) infinite}
.vf-tag{position:absolute;z-index:4;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.14em;color:var(--paper);
  background:rgba(15,17,21,.55);backdrop-filter:blur(4px);padding:5px 9px;border-radius:6px}
.vf-tag.t1{left:18px;bottom:18px}
.vf-tag.t2{right:18px;top:18px;color:var(--signal)}

/* trust strip under hero */
.kpi-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(40px,6vh,72px)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.kpi{padding:26px 8px;text-align:center;border-left:1px solid var(--line)}
.kpi:first-child{border-left:none}
.kpi .n{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:-.01em}
.kpi .n .u{font-size:.5em;color:var(--muted);margin-left:3px;font-weight:600}
.kpi .l{margin-top:9px;font-size:12px;color:var(--muted);letter-spacing:.02em}

/* ============ generic section ============ */
.section{padding:clamp(64px,10vh,118px) 0}
.section.alt{background:var(--ink2)}
.sec-head{max-width:62ch}
.sec-title{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(25px,3.4vw,40px);line-height:1.2;margin:16px 0 0}
.sec-lead{margin-top:16px;color:var(--paper-d);font-size:clamp(14.5px,1.4vw,16.5px);font-weight:300;max-width:54ch}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* promise teaser (paper inversion) */
.promise-strip{background:var(--paper);color:var(--ink)}
.promise-strip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
.promise-strip h2{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,38px);line-height:1.25;letter-spacing:-.02em}
.promise-strip h2 .q{color:var(--signal-d)}
.promise-strip p{margin-top:20px;color:#3C4350;font-size:clamp(16px,1.4vw,19.5px);line-height:1.9;font-weight:400;letter-spacing:-.01em;word-break:keep-all}
.promise-strip .sign{margin-top:22px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.06em;color:var(--muted-d)}
.promise-strip .imgwrap{aspect-ratio:5/4}

/* dual brand */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}
.brandcard{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);transition:border-color .3s,transform .3s var(--ease)}
.brandcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.brandcard .ph{aspect-ratio:16/10;overflow:hidden;position:relative}
.brandcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.brandcard:hover .ph img{transform:scale(1.04)}
.brandcard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(27,30,38,.85),transparent 55%)}
.brandcard .body{padding:24px 26px 28px}
.brandcard .tag{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.2em;color:var(--signal);text-transform:uppercase}
.brandcard h3{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:23px;letter-spacing:.01em;margin:9px 0 4px}
.brandcard h3 .n{color:var(--signal)}
.brandcard .kr{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.brandcard ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.brandcard li{display:flex;gap:10px;font-size:14px;color:var(--paper-d);font-weight:300}
.brandcard li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--signal);margin-top:8px}

/* why-record band (smart gate teaser) */
.band{border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--surface),var(--ink2));padding:clamp(30px,5vw,52px);margin-top:46px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,5vw,56px);align-items:center}
.band h3{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-.01em;margin-top:14px}
.band p{margin-top:16px;color:var(--paper-d);font-size:14.5px;font-weight:300}
.band .pipe{display:flex;flex-direction:column;gap:0}
.pstep{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.pstep:first-child{border-top:none}
.pstep .pn{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;color:var(--signal);font-size:14px;flex:0 0 26px;padding-top:1px}
.pstep .pt{font-weight:500;font-size:14.5px}
.pstep .pd{font-size:12.5px;color:var(--muted);font-weight:300}

/* ============ SERVICES ============ */
.stepper{margin-top:44px}
.stepper-track{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin}
.stepchip{flex:0 0 auto;border:1px solid var(--line);border-radius:10px;padding:11px 15px;min-width:108px;cursor:pointer;transition:all .25s var(--ease);background:var(--surface)}
.stepchip.active{border-color:var(--signal);background:rgba(242,163,65,.08)}
.stepchip .sn{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted)}
.stepchip.active .sn{color:var(--signal)}
.stepchip .sk{font-weight:600;font-size:15px;margin-top:2px}
.stepchip .se{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.12em;color:var(--muted-d);text-transform:uppercase;margin-top:1px}
.stepbody{margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:26px 28px;background:var(--ink2);min-height:96px;display:flex;align-items:center;gap:22px}
.stepbody .big{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:54px;color:var(--line-2);line-height:1;flex:0 0 auto}
.stepbody .txt h4{font-weight:600;font-size:18px}
.stepbody .txt p{margin-top:7px;color:var(--paper-d);font-size:14.5px;font-weight:300}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.svc{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--surface);transition:border-color .3s,transform .3s var(--ease)}
.svc:hover{border-color:var(--line-2);transform:translateY(-2px)}
.svc .ic{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:9px;margin-bottom:16px}
.svc h4{font-weight:600;font-size:17.5px}
.svc .en-l{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.14em;color:var(--signal);text-transform:uppercase;margin-bottom:7px}
.svc p{margin-top:9px;color:var(--paper-d);font-size:14px;font-weight:300}

.material{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,5vw,56px);align-items:center;margin-top:48px}
.material .gal{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}
.material .gal .iframe:first-child{grid-row:1/3}
.material .gal .iframe{aspect-ratio:auto}
.material .gal .iframe:first-child{aspect-ratio:3/4}
.material .gal .iframe:not(:first-child){aspect-ratio:4/3}

/* ============ PROMISE PAGE ============ */
.promise-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.promise-hero .iframe{aspect-ratio:4/5}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.s4{border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:var(--surface);position:relative;overflow:hidden}
.s4 .n{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:38px;color:var(--signal);line-height:1}
.s4 h4{font-weight:600;font-size:17px;margin:14px 0 8px}
.s4 p{font-size:13.5px;color:var(--paper-d);font-weight:300}
.s4 .ghost{position:absolute;right:-6px;bottom:-14px;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:90px;color:rgba(255,255,255,.025);z-index:0}

.casebox{margin-top:48px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--ink2);display:grid;grid-template-columns:1.05fr .95fr}
.casebox .ph{position:relative;min-height:320px}
.casebox .ph .ba{position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr}
.casebox .ph .ba .iframe{border-radius:0}
.casebox .ctxt{padding:clamp(28px,4vw,44px)}
.casebox .ctxt h3{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,27px);line-height:1.3;letter-spacing:-.01em;margin:16px 0 0}
.casebox .ctxt p{margin-top:16px;color:var(--paper-d);font-size:14.5px;font-weight:300}
.casebox .ctxt .pull{margin-top:22px;padding-left:18px;border-left:2px solid var(--signal);font-weight:500;font-size:16px;color:var(--paper)}
.casebox .ctxt .note{margin-top:10px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted)}

/* ============ FACILITY ============ */
.fac-tour{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:46px}
.fac-tour .iframe{min-height:170px}
.t-a{grid-column:span 6;aspect-ratio:16/10}
.t-b{grid-column:span 3;aspect-ratio:3/4}
.t-c{grid-column:span 3;aspect-ratio:3/4}
.t-d{grid-column:span 4;aspect-ratio:4/3}
.t-e{grid-column:span 4;aspect-ratio:4/3}
.t-f{grid-column:span 4;aspect-ratio:4/3}

.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.lineup .iframe{aspect-ratio:4/3}
.lineup .iframe.tall{aspect-ratio:auto;grid-row:span 2;height:100%}

.spec{margin-top:52px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.spec .row{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--line)}
.spec .row:first-child{border-top:none}
.spec .k{padding:16px 22px;background:var(--surface);font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.04em;color:var(--muted);border-right:1px solid var(--line)}
.spec .v{padding:16px 22px;font-size:14.5px;color:var(--paper-d);font-weight:300}
.spec .v b{font-weight:600;color:var(--paper)}

/* ============ BOOKING ============ */
.booking{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);margin-top:46px}
.form{border:1px solid var(--line);border-radius:16px;padding:clamp(24px,3vw,34px);background:var(--surface)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;color:var(--muted);font-weight:500}
.field label .req{color:var(--signal)}
.field input,.field select,.field textarea{
  background:var(--ink2);border:1px solid var(--line-2);border-radius:10px;color:var(--paper);
  padding:12px 14px;font-family:inherit;font-size:14.5px;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal)}
.field textarea{resize:vertical;min-height:96px}
.form .submit{width:100%;margin-top:6px;background:var(--signal);color:#14161B;font-weight:700;font-size:15px;padding:15px;border-radius:11px;transition:transform .15s var(--ease),box-shadow .2s}
.form .submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(242,163,65,.55)}
.form .fine{margin-top:12px;font-size:11.5px;color:var(--muted);text-align:center}
.confirm{display:none;margin-top:16px;border:1px solid var(--signal);background:rgba(242,163,65,.08);border-radius:12px;padding:18px}
.confirm.show{display:block;animation:fade .4s var(--ease)}
.confirm .ok{font-weight:600;color:var(--signal);font-size:15px}
.confirm p{font-size:13px;color:var(--paper-d);margin-top:6px;font-weight:300}
.confirm .demo{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);margin-top:8px}

.visit{display:flex;flex-direction:column;gap:0}
.visit .vrow{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.visit .vrow:first-child{border-top:none;padding-top:0}
.visit .vk{flex:0 0 84px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--signal);padding-top:3px}
.visit .vv{font-size:14.5px;color:var(--paper-d);font-weight:300}
.visit .vv b{font-weight:600;color:var(--paper)}
.mapbox{margin-top:24px;border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:16/8;position:relative;background:var(--surface)}
.mapbox iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(.95) brightness(.9)}

/* ============ footer ============ */
footer{border-top:1px solid var(--line);background:var(--ink2);padding:clamp(48px,7vh,76px) 0 40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot .lead .wm{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:22px;letter-spacing:.02em}
.foot .lead .wm .n{color:var(--signal)}
.foot .lead p{margin-top:14px;color:var(--muted);font-size:13.5px;font-weight:300;max-width:34ch}
.foot h5{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul button,.foot ul span{font-size:13.5px;color:var(--paper-d);font-weight:300;text-align:left;transition:color .2s}
.foot ul button:hover{color:var(--signal)}
.copy{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);letter-spacing:.04em}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .navlinks{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  header.menu-open .navlinks{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:rgba(16,17,21,.97);border-bottom:1px solid var(--line);padding:10px 18px 18px;gap:2px}
  header.menu-open .navlinks button,header.menu-open .navlinks a{padding:13px 8px;border-radius:8px}
  header.menu-open .navlinks button.active::after,header.menu-open .navlinks a.active::after{display:none}
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .viewfinder{aspect-ratio:5/5;max-width:440px}
  .promise-strip .wrap,.promise-hero,.material,.band,.booking{grid-template-columns:1fr}
  .band{gap:24px}
  .dual,.svc-grid,.steps4{grid-template-columns:1fr}
  .steps4{gap:12px}
  .casebox{grid-template-columns:1fr}
  .casebox .ph{min-height:260px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi:nth-child(3){border-left:none}
  .kpi:nth-child(odd){border-left:none}
  .kpi:nth-child(even){border-left:1px solid var(--line)}
  .kpi:nth-child(3),.kpi:nth-child(4){border-top:1px solid var(--line)}
  .fac-tour{grid-template-columns:repeat(2,1fr)}
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f{grid-column:span 1;aspect-ratio:4/3}
  .lineup{grid-template-columns:1fr 1fr}
  .lineup .iframe.tall{grid-row:span 1;aspect-ratio:4/3}
  .spec .row{grid-template-columns:120px 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot .lead{grid-column:1/-1}
}
@media(max-width:520px){
  .frow{grid-template-columns:1fr}
  .spec .row{grid-template-columns:1fr}
  .spec .k{border-right:none;border-bottom:1px solid var(--line)}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
/* ===== JOIN (채용·제휴) ===== */
.joinhero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.joinhero .jh-copy h2{font-size:clamp(26px,3.4vw,42px)}
.joinhero .jh-pic{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.joinhero .jh-pic img{width:100%;height:100%;object-fit:cover;display:block}
.joinhero .jh-pic .br{position:absolute;width:26px;height:26px;border:2px solid var(--signal);opacity:.9}
.joinhero .jh-pic .tl{top:14px;left:14px;border-right:0;border-bottom:0}
.joinhero .jh-pic .br2{bottom:14px;right:14px;border-left:0;border-top:0}
.joinhero .jh-pic .rec{position:absolute;right:14px;top:14px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:var(--paper);display:flex;align-items:center;gap:6px}
.joinhero .jh-pic .rec b{width:6px;height:6px;border-radius:50%;background:#e5484d;animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.role-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.role-meta span{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.proc .pc{border:1px solid var(--line);border-radius:12px;padding:20px 18px;background:var(--surface);position:relative}
.proc .pc .pn{font:800 13px/1 "Archivo";color:var(--signal);letter-spacing:.06em}
.proc .pc h4{margin:12px 0 6px;font-size:16px}
.proc .pc p{font-size:13px;color:var(--muted);line-height:1.6}
.perks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.perks .pk{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:18px 18px;background:var(--surface)}
.perks .pk .pi{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center}
.perks .pk h4{font-size:15px;margin-bottom:5px}
.perks .pk p{font-size:13px;color:var(--muted);line-height:1.6}
@media(max-width:900px){
  .joinhero{grid-template-columns:1fr}
  .proc{grid-template-columns:repeat(2,1fr)}
  .perks{grid-template-columns:1fr}
}
@media(max-width:520px){.proc{grid-template-columns:1fr}}

/* ================= HERITAGE / TRENTA GARAGE ================= */
.heritage{background:var(--ink2);border-top:1px solid var(--line)}
.heritage .hwrap{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,9vw,124px) clamp(20px,5vw,48px) clamp(58px,7vw,96px)}
/* 한글은 어절 단위로만 줄바꿈 — '날/을' 처럼 단어 중간에서 끊기는 것 방지 */
.heritage .sec-title,.heritage .h-lede,.paperband .pb-t,.paperband .pb-p,
.paperband blockquote,.paperband .pb-kick,.vk b,.vk span{word-break:keep-all;overflow-wrap:break-word}
.heritage .sec-head{max-width:none}
.h-lede{margin-top:18px;color:var(--paper-d);font-weight:300;
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.85;max-width:58ch}

/* --- 독일어 3동사 --- */
.verbs{margin-top:clamp(44px,5.4vw,80px)}
.verb{border-top:1px solid var(--line);padding:clamp(18px,2.4vw,30px) 0 clamp(14px,1.8vw,22px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(12px,2vw,28px)}
.verb:last-child{border-bottom:1px solid var(--line)}
.vn{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.2em;color:var(--signal);
  flex:0 0 auto;align-self:flex-start;padding-top:.9em}
.de{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.028em;line-height:.94;
  font-size:clamp(34px,6.6vw,92px);color:var(--paper);flex:0 1 auto}
.vk{margin-left:auto;text-align:right;flex:0 0 auto}
.vk b{display:block;font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:600;
  font-size:clamp(15px,1.5vw,20px);color:var(--paper);letter-spacing:-.01em}
.vk span{display:block;margin-top:6px;font-weight:300;color:var(--muted);
  font-size:clamp(12.5px,1.05vw,14.5px);letter-spacing:-.005em}

/* --- 밝은 반전 구역 --- */
.paperband{background:var(--paper);color:var(--ink)}
.paperband .pwrap{max-width:var(--maxw);margin:0 auto;
  padding:clamp(62px,8vw,110px) clamp(20px,5vw,48px)}
.paperband .eyebrow{color:var(--signal-d)}
.pb-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,76px);align-items:start}
.pb-t{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;letter-spacing:-.022em;
  font-size:clamp(24px,3vw,40px);line-height:1.24;color:var(--ink);margin-top:16px}
.pb-p{margin-top:20px;font-weight:300;color:#4A5058;line-height:1.9;
  font-size:clamp(14.5px,1.2vw,16.5px);max-width:44ch}
.pb-p b{font-weight:700;color:var(--ink)}
.charter{border-left:3px solid var(--signal-d);padding:2px 0 2px clamp(18px,2vw,26px)}
.charter .ch-h{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#7A818B}
.charter blockquote{margin-top:14px;font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:500;
  font-size:clamp(16px,1.6vw,21px);line-height:1.78;letter-spacing:-.015em;color:var(--ink)}
.charter .ch-f{margin-top:14px;font-size:12.5px;color:#7A818B;line-height:1.7;font-weight:300}
.pb-kick{margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid #D3D7DE;font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;
  font-size:clamp(17px,1.9vw,25px);line-height:1.5;letter-spacing:-.02em;color:var(--ink)}
.pb-kick em{font-style:normal;color:var(--signal-d)}
@media(max-width:880px){
  .pb-grid{grid-template-columns:1fr;gap:34px}
  .vk{margin-left:0;text-align:left;flex:1 1 100%}
  .verb{gap:10px}
}


/* 우리의 약속 메인 사진 — 앰버 인스펙션 프레임 + REC */
.iframe.scanon .br{border-color:var(--signal)!important;mix-blend-mode:normal!important;
  opacity:1!important;border-width:2.5px!important;width:34px!important;height:34px!important;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.iframe.scanon .rec{position:absolute;top:13px;right:58px;z-index:5;display:flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.14em;color:#fff;
  background:rgba(15,17,21,.62);padding:5px 9px;border-radius:6px}
.iframe.scanon .rec i{width:8px;height:8px;border-radius:50%;background:#e04b3a;
  animation:rpblink 1.2s infinite;flex:0 0 auto}
/* 외부 링크 버튼 */
.vlinks{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.vlinks a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--paper-d);
  border:1px solid var(--line-2);border-radius:9px;padding:9px 13px;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.vlinks a:hover{border-color:var(--signal);color:var(--signal);background:rgba(242,163,65,.06)}
.vlinks a .ic{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:0 0 auto}
footer .sns a{color:var(--paper-d);text-decoration:none}
footer .sns a:hover{color:var(--signal)}

/* 한글 어절 단위 줄바꿈 — 단어 중간에서 끊기는 것 전역 방지 */
h1,h2,h3,h4,h5,.sec-title,.sec-lead,.sub,.lead,p,li,.kr,.pt,.pd,.vv,.jh-copy,
.promise-strip h2,.promise-strip p,.rp-step h4,.rp-step p,.s4 h4,.s4 p{
  word-break:keep-all;overflow-wrap:break-word}

/* [버그 수정] 우하단 브래킷 클래스 br→br2
   기존 선택자 .br.br 은 .br 전체와 동일하게 매칭되어
   모든 브래킷의 border-top/left 를 제거하고 있었음(프레임 미표시 원인) */
.iframe .br.br2{bottom:12px;right:12px;border-left:none;border-top:none;
  border-right-style:solid;border-bottom-style:solid}
.iframe .br.tl{border-top-style:solid;border-left-style:solid}
.iframe .br.tr{border-top-style:solid;border-right-style:solid}
.iframe .br.bl{border-bottom-style:solid;border-left-style:solid}

/* 헤리티지 실차 기록 */
.h-photos{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:clamp(36px,4.5vw,62px)}
.h-ph{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--ink2)}
.h-ph img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.h-ph .c{position:absolute;width:22px;height:22px;border:2.5px solid var(--signal);z-index:3}
.h-ph .tl{top:10px;left:10px;border-right:0;border-bottom:0}
.h-ph .br2{bottom:10px;right:10px;border-left:0;border-top:0}
.h-ph .meta{position:absolute;left:12px;bottom:10px;z-index:4;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.1em;color:var(--paper);background:rgba(15,17,21,.62);
  backdrop-filter:blur(3px);padding:4px 8px;border-radius:6px}
@media(max-width:880px){.h-photos{grid-template-columns:1fr}}

/* 월 정량제 밴드 */
.quota{background:var(--ink2);border-bottom:1px solid var(--line)}
.quota .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px clamp(20px,3vw,44px);
  padding-top:clamp(20px,2.6vw,30px);padding-bottom:clamp(20px,2.6vw,30px)}
.quota .ql{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.22em;
  color:var(--signal);text-transform:uppercase;flex:0 0 auto}
.quota p{flex:1 1 420px;font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.8;
  color:var(--paper-d);font-weight:300;word-break:keep-all;max-width:78ch}
.quota p b{color:var(--paper);font-weight:600}
.quota p .am{color:var(--signal);font-weight:600}

/* ===== 실제 사례 — 카카오톡 화면 재현 =====
   룩앤픽스는 별도 앱이 없습니다. 고객이 이미 쓰는 카톡으로 보냅니다. */
.kroom{margin-top:22px;max-width:100%;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#93A5BA;box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.kroom.wide{max-width:100%}
/* 상단 바 */
.kbar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#93A5BA;
  border-bottom:1px solid rgba(0,0,0,.08)}
.kbar .back{color:#2B3038;font-size:15px;line-height:1;opacity:.75}
.kbar .tt{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:600;font-size:13.5px;color:#1F242B;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbar .tt i{font-style:normal;color:#5A6472;font-weight:500;margin-left:5px;font-size:12px}
.kbar .ic{display:flex;gap:9px;color:#2B3038;opacity:.6;font-size:12px}
/* 메시지 영역 */
.kbody{padding:15px 12px 20px;display:flex;flex-direction:column;gap:9px}
/* 날짜 구분 */
.kday{align-self:center;background:rgba(0,0,0,.14);color:#F2F4F7;font-size:10.5px;
  padding:3px 11px;border-radius:11px;letter-spacing:.02em;margin:3px 0}
/* 상대(우리) 메시지 — 왼쪽, 프로필 있음 */
.krow{display:flex;gap:8px;align-items:flex-start;width:100%}
.krow .kav{width:33px;height:33px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(150deg,#1B1F26,#0C0E12);border:1px solid #2B3140;
  display:flex;align-items:center;justify-content:center;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:8px;color:#ECEEF2;letter-spacing:.02em}
.krow .kav b{color:var(--signal);font-weight:800}
.krow .kwrap{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;align-items:flex-start;max-width:calc(100% - 46px)}
.krow .kname{font-size:10.5px;color:#2B3038;opacity:.72;font-weight:500;padding-left:2px;white-space:nowrap}
.kmsg{background:#fff;color:#1B1F26;padding:9px 12px;border-radius:4px 14px 14px 14px;
  font-size:12.5px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.06);font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  width:fit-content;max-width:100%}
.kmsg b{font-weight:700;color:#0F1115}
.kmsg .hl{background:linear-gradient(transparent 54%, rgba(242,163,65,.55) 54%);font-weight:600;padding:0 1px}
.kmsg + .kmsg{border-radius:14px}
/* 시간 */
.ktime{font-size:9px;color:#3C4450;opacity:.7;align-self:flex-end;padding-bottom:2px;flex:0 0 auto;white-space:nowrap}
/* 고객(오른쪽) */
.krow.me{margin-left:auto;flex-direction:row-reverse}
.krow.me .kwrap{align-items:flex-end;max-width:calc(100% - 12px)}
.krow.me .kmsg{background:#FEE500;color:#1B1F26;border-radius:14px 4px 14px 14px}
.krow.me .kmsg + .kmsg{border-radius:14px}
/* 사진 첨부 표현 */
.kphoto{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:13px;overflow:hidden;
  width:236px;max-width:100%;background:#fff;padding:3px;position:relative}
.kphoto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;display:block}
.kphoto .more{position:absolute;right:3px;bottom:3px;width:calc(33.33% - 4px);aspect-ratio:1;
  background:rgba(12,14,18,.62);border-radius:3px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500;letter-spacing:-.02em}
.kphoto.n4{grid-template-columns:repeat(2,1fr);width:172px}
.kphoto.n4 .more{width:calc(50% - 4px)}
.kcount{font-size:10px;color:#3C4450;opacity:.8;padding-left:3px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
/* 파일(내역서) 카드 */
.kfile{display:flex;align-items:center;gap:10px;background:#fff;border-radius:13px;padding:10px 13px;
  width:236px;max-width:100%;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.kfile .ic{width:32px;height:38px;flex:0 0 auto;border:1.4px solid #C3CAD4;border-radius:3px;
  position:relative;background:#F7F9FB}
.kfile .ic::before{content:"";position:absolute;left:5px;right:5px;top:8px;height:1.4px;background:#C3CAD4;
  box-shadow:0 5px 0 #C3CAD4,0 10px 0 #C3CAD4,0 15px 0 #D8DEE6}
.kfile .ic::after{content:"";position:absolute;right:-1px;top:-1px;border:5px solid transparent;
  border-top-color:#C3CAD4;border-right-color:#C3CAD4}
.kfile .fn{font-size:11.5px;color:#1B1F26;font-weight:600;line-height:1.45;word-break:keep-all}
.kfile .fm{font-size:10px;color:#6F7787;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:3px}
/* 동영상 카드 */
.kvid{background:#fff;border-radius:13px;padding:4px 4px 8px;width:236px;max-width:100%;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.kvid video{width:100%;display:block;border-radius:10px;background:#0B0D11}
.kvcap{font-size:10px;color:#6F7787;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;padding:5px 4px 0}
/* 하단 입력창 */
.kfoot{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#fff;
  border-top:1px solid rgba(0,0,0,.07)}
.kfoot .plus{color:#8A919E;font-size:15px}
.kfoot .fld{flex:1;height:27px;border-radius:14px;background:#F1F3F5}
.kfoot .snd{font-size:11px;color:#B0B7C0;font-weight:600}
/* 캡션 */
.kcap{margin-top:11px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--muted);
  line-height:1.7;letter-spacing:.01em}
.kcap b{color:var(--paper-d);font-weight:500}
/* 좌우 배치 */
.kgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:clamp(22px,3.4vw,44px);align-items:start;margin-top:24px}
.kband{grid-column:1/-1;margin-top:0;border-top:1px solid var(--line);padding:clamp(26px,3.2vw,38px) clamp(28px,4vw,44px) clamp(30px,4vw,44px);background:rgba(255,255,255,.014)}
.kgrid .kside h5{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-weight:700;font-size:clamp(16px,1.6vw,20px);
  color:var(--paper);letter-spacing:-.01em;margin-bottom:10px;word-break:keep-all}
.kgrid .kside p{font-size:14px;line-height:1.85;color:var(--paper-d);font-weight:300;word-break:keep-all}
.kgrid .kside p + p{margin-top:12px}
.kgrid .kside{position:sticky;top:104px}
.kgrid .kside .tag{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  letter-spacing:.16em;color:var(--signal);border:1px solid rgba(242,163,65,.4);
  padding:4px 9px;border-radius:20px;margin-bottom:12px}
@media(max-width:1100px){.kgrid .kside{position:static}}
@media(max-width:880px){.kgrid{grid-template-columns:1fr}.kroom,.kroom.wide{max-width:460px}.kband{padding:26px 20px 30px}}

/* ===== FULL ARCHIVE 플레이어 ===== */
.fullarchive{margin-top:56px}
.fa-note{border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:12px;
  background:linear-gradient(135deg,var(--surface),var(--ink2));padding:clamp(18px,2.4vw,26px);
  margin:22px 0 26px;font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.85;color:var(--paper-d);word-break:keep-all}
.fa-note b{color:var(--paper)}.fa-note .am{color:var(--signal);font-weight:600}
.fa-player{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2)}
.fa-view{position:relative;aspect-ratio:4/3;background:#0B0C10}
.fa-view img,.fa-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0B0C10}
.fa-view .c{position:absolute;width:22px;height:22px;border:2.5px solid var(--signal);z-index:5;pointer-events:none}
.fa-view .tl{top:10px;left:10px;border-right:0;border-bottom:0}.fa-view .tr{top:10px;right:10px;border-left:0;border-bottom:0}
.fa-view .bl{bottom:10px;left:10px;border-right:0;border-top:0}.fa-view .brx{bottom:10px;right:10px;border-left:0;border-top:0}
.fa-rec{position:absolute;top:16px;left:42px;z-index:6;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  letter-spacing:.14em;color:#fff;display:flex;align-items:center;gap:7px;background:rgba(15,17,21,.55);
  padding:4px 9px;border-radius:6px}
.fa-rec i{width:9px;height:9px;border-radius:50%;background:#e04b3a;animation:rpblink 1.2s infinite}
.fa-count{position:absolute;top:16px;right:42px;z-index:6;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  letter-spacing:.12em;color:var(--paper);background:rgba(15,17,21,.55);padding:4px 9px;border-radius:6px}
.fa-phase{position:absolute;left:42px;bottom:18px;z-index:6;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  letter-spacing:.1em;color:var(--signal);background:rgba(15,17,21,.62);padding:5px 10px;border-radius:6px}
.fa-bar{height:3px;background:var(--line);position:relative}
.fa-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--signal);width:0%}
.fa-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.fa-ctrl button{font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--paper);
  background:var(--surface2);border:1px solid var(--line-2);border-radius:8px;padding:8px 13px;cursor:pointer;
  transition:border-color .2s,color .2s}
.fa-ctrl button:hover{border-color:var(--signal);color:var(--signal)}
.fa-ctrl button.on{background:var(--signal);border-color:var(--signal);color:#14161B}
.fa-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 14px}
.fa-chips button{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  background:transparent;border:1px solid var(--line-2);border-radius:20px;padding:6px 11px;cursor:pointer}
.fa-chips button.on{color:var(--signal);border-color:var(--signal)}
.fa-sub{margin-top:40px}
.fa-sub h4{font-size:clamp(17px,1.7vw,22px);letter-spacing:-.01em;margin-bottom:6px}
.fa-sub .d{font-size:13.5px;color:var(--muted);margin-bottom:14px}
@media(max-width:880px){.fa-rec{left:34px}.fa-count{right:34px}.fa-phase{left:34px}}


/* ==== pass2026 ==== */

/* === 2026 typography pass: oversized hero, readable body === */
#page-home .hero h1{font-size:clamp(36px,5.2vw,68px)!important;line-height:1.10!important;letter-spacing:-0.026em!important}
.hero .sub{font-size:clamp(17px,1.7vw,23px)!important;line-height:1.72!important;max-width:48ch;color:var(--paper);word-break:keep-all}
  .hero .sub b{color:var(--signal);font-weight:700}
  .hero .sub .tail{display:block;margin-top:15px;font-size:.74em;color:var(--muted);font-weight:300;line-height:1.75}
.hero .sub b{color:var(--signal)}
.eyebrow{letter-spacing:.22em!important}
.sec-title{font-size:clamp(30px,4vw,52px)!important;line-height:1.12!important;letter-spacing:-0.022em!important}
.sec-lead{font-size:clamp(15.5px,1.25vw,18px)!important;line-height:1.85!important;max-width:62ch}
p{line-height:1.8}
:root{--muted:#A7AEBC}
.section{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}
/* LOOK/FIX definition strip */
.lfx-def{background:var(--ink2,#0F1115);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(56px,7vw,96px) 0}
.lfx-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.lfx-word{font-family:'Archivo',"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(58px,9vw,130px);line-height:.95;letter-spacing:-0.03em;color:var(--paper);margin-bottom:18px}
.lfx-word-o{color:transparent;-webkit-text-stroke:2px var(--signal)}
.lfx-n{font-family:'Archivo',"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,44px);color:var(--signal);align-self:center;opacity:.9}
.lfx-item p{font-size:clamp(15px,1.25vw,17.5px);line-height:1.85;color:var(--muted);max-width:44ch}
.lfx-item p b{color:var(--paper)}
@media(max-width:820px){.lfx-grid{grid-template-columns:1fr;gap:34px}.lfx-n{display:none}.lfx-word{font-size:clamp(64px,17vw,96px)}}
/* === ARCHIVE REPLAY === */
.replay{background:var(--ink,#14161B);padding:clamp(80px,10vw,140px) 0;border-bottom:1px solid var(--line)}
.rp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);margin-top:clamp(36px,4vw,56px)}
.rp-stick{position:relative}
.rp-frame{position:sticky;top:96px;aspect-ratio:4/3;background:var(--ink2,#0F1115);border:1px solid var(--line);overflow:hidden}
.rp-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .45s var(--ease,ease)}
.rp-frame img.fade{opacity:0}
.rp-frame .c{position:absolute;width:22px;height:22px;border:2.5px solid var(--signal);z-index:3}
.rp-frame .tl{top:10px;left:10px;border-right:0;border-bottom:0}.rp-frame .tr{top:10px;right:10px;border-left:0;border-bottom:0}
.rp-frame .bl{bottom:10px;left:10px;border-right:0;border-top:0}.rp-frame .br{bottom:10px;right:10px;border-left:0;border-top:0}
.rp-rec{position:absolute;top:18px;left:44px;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:#fff;display:flex;align-items:center;gap:7px}
.rp-rec b{width:9px;height:9px;border-radius:50%;background:#e04b3a;animation:rpblink 1.2s infinite}
@keyframes rpblink{0%,100%{opacity:1}50%{opacity:.25}}
.rp-count{position:absolute;top:18px;right:44px;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.rp-time{position:absolute;bottom:16px;left:44px;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.1em;color:var(--signal)}
.rp-steps{display:flex;flex-direction:column;gap:clamp(56px,8vh,96px);padding:20px 0 40vh}
.rp-step{opacity:.28;transition:opacity .4s ease;max-width:46ch}
.rp-step.on{opacity:1}
.rp-no{font-family:'Archivo',"Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:15px;color:var(--signal);letter-spacing:.08em}
.rp-step h4{font-size:clamp(20px,2vw,26px);margin:8px 0 12px;letter-spacing:-0.01em}
.rp-step p{font-size:clamp(15px,1.2vw,17px);line-height:1.85;color:var(--muted)}
.rp-step p b{color:var(--paper)}
.rp-end{display:inline-block;margin-top:14px;color:var(--signal);font-weight:600}
@media(max-width:880px){.rp-grid{grid-template-columns:1fr}.rp-frame{position:sticky;top:64px;z-index:5}.rp-steps{padding-bottom:10vh}}



/* ==== call-fab ==== */

.call-fab{position:fixed;right:16px;bottom:16px;z-index:9999;display:none;align-items:center;gap:8px;
  background:var(--signal);color:#14161B;font-weight:700;font-size:15px;padding:14px 20px;border-radius:999px;
  text-decoration:none;box-shadow:0 8px 24px -6px rgba(242,163,65,.55);letter-spacing:.01em}
.call-fab:active{transform:scale(.97)}
@media(max-width:768px){.call-fab{display:inline-flex}}

/* ==== 정적 페이지: nav 링크 ==== */
.navlinks a{text-decoration:none;display:inline-block}
.brand{cursor:pointer}
.brand a{text-decoration:none;color:inherit;display:flex;align-items:center;gap:9px}

/* ===== case pages & hub (2026-09) ===== */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:0 auto 22px;flex-wrap:wrap}
.crumb a{color:var(--muted);text-decoration:none;transition:color .2s}
.crumb a:hover{color:var(--paper)}
.crumb i{font-style:normal;color:var(--line-2)}
.crumb span{color:var(--paper-d)}

.case-head{max-width:66ch;margin-bottom:38px}
.case-head h1{font-size:clamp(27px,3.6vw,44px);line-height:1.22;letter-spacing:-.02em;margin:14px 0 0}
.case-head .sec-lead{margin-top:16px}
.case-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.case-chips span{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--paper-d);border:1px solid var(--line-2);background:var(--surface);
  padding:6px 11px;border-radius:999px}

.casenav{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  margin-top:54px;padding-top:26px;border-top:1px solid var(--line)}
.casenav a{text-decoration:none;color:var(--paper-d);transition:color .2s,transform .2s}
.casenav a:hover{color:var(--paper);transform:translateY(-1px)}
.casenav i{display:block;font-style:normal;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.1em;color:var(--muted);margin-bottom:5px}
.casenav b{font-size:14.5px;font-weight:600}
.casenav .nx{text-align:right}
.casenav .hub{font-size:13px;color:var(--signal);white-space:nowrap;padding:9px 15px;
  border:1px solid var(--line-2);border-radius:9px}
.casenav .hub:hover{border-color:var(--signal)}

.case-cta{margin-top:48px;padding:34px 30px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--surface),var(--ink2))}
.case-cta h4{font-size:19px;font-weight:600;margin:0 0 8px}
.case-cta p{color:var(--muted);font-size:14.5px;margin:0 0 20px;max-width:58ch}
.case-cta .hero-cta{margin-top:0}

.casecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;margin-top:30px}
.ccard{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.ccard:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.cc-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink2)}
.cc-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.ccard:hover .cc-ph img{transform:scale(1.04)}
.cc-no{position:absolute;left:14px;top:12px;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--signal);background:rgba(12,13,17,.72);border:1px solid rgba(242,163,65,.35);
  padding:4px 9px;border-radius:6px;backdrop-filter:blur(4px)}
.cc-tx{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.cc-car{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.cc-tx h3{font-size:19px;line-height:1.35;font-weight:600;margin:8px 0 10px;letter-spacing:-.01em}
.cc-tx p{font-size:14px;line-height:1.66;color:var(--muted);margin:0 0 16px}
.cc-tag{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.05em;
  color:var(--paper-d);border:1px solid var(--line-2);padding:5px 10px;border-radius:999px;margin-bottom:14px}
.cc-go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--signal);display:inline-flex;align-items:center;gap:7px}
.cc-go i{font-style:normal;transition:transform .2s}
.ccard:hover .cc-go i{transform:translateX(4px)}

@media (max-width:760px){
  .casenav{grid-template-columns:1fr;text-align:left}
  .casenav .nx{text-align:left}
  .casenav .hub{justify-self:start}
  .case-cta{padding:26px 20px}
  .casecards{grid-template-columns:1fr}
}
.ps-cases{margin-top:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ps-cases a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--signal-d);padding-bottom:3px;transition:gap .2s}
.ps-cases a:hover{gap:13px}
.ps-cases a i{font-style:normal;color:var(--signal-d)}
.ps-hint{font-size:11.5px;letter-spacing:.04em;color:#6F7787}

/* typed text must never depend on the subset webfont */
input,textarea,select{font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif}

/* ===== 카카오톡 상담 · 지도 (2026-09) ===== */
.btn-kakao{background:#FEE500;color:#191919;text-decoration:none;font-weight:700}
.btn-kakao:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(254,229,0,.45)}
.btn-kakao::before{content:"";width:18px;height:18px;flex:0 0 18px;background:#191919;
  -webkit-mask:var(--kkicon) center/contain no-repeat;mask:var(--kkicon) center/contain no-repeat}
:root{--kkicon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.9 3 3 6.3 3 10.2c0 2.5 1.7 4.7 4.2 5.9l-.9 3.4c-.1.3.2.5.5.4l4-2.6c.4 0 .8.1 1.2.1 5.1 0 9-3.3 9-7.2S17.1 3 12 3z'/></svg>")}
.btn-kakao.is-fallback{background:var(--surface2);color:var(--paper);border:1px solid var(--line-2)}
.btn-kakao.is-fallback::before{background:var(--signal)}

.form .submit{background:#FEE500;color:#191919;display:flex;align-items:center;justify-content:center;gap:9px}
.form .submit::before{content:"";width:19px;height:19px;flex:0 0 19px;background:#191919;
  -webkit-mask:var(--kkicon) center/contain no-repeat;mask:var(--kkicon) center/contain no-repeat}
.form .submit:hover{box-shadow:0 14px 30px -12px rgba(254,229,0,.5)}

.kk-prev{margin:0 0 16px;border:1px solid var(--line);border-radius:11px;background:var(--ink2);overflow:hidden}
.kk-prev-h{font-size:10.5px;letter-spacing:.14em;color:var(--muted);padding:10px 14px 0}
.kk-prev pre,.kk-msg{margin:0;padding:10px 14px 14px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:12px;line-height:1.75;color:var(--paper-d);white-space:pre-wrap;word-break:break-word}
.kk-msg{margin-top:12px;border:1px solid var(--line-2);border-radius:10px;background:rgba(0,0,0,.28);
  max-height:230px;overflow:auto;user-select:all}

.confirm .c-nochannel,.confirm .c-nocopy{display:none}
.confirm.nochannel .c-ok{display:none}
.confirm.nochannel .c-nochannel{display:block}
.confirm.nocopy .c-ok,.confirm.nocopy .c-nochannel{display:none}
.confirm.nocopy .c-nocopy{display:block}
.kk-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.kk-act .btn{font-size:13.5px;padding:11px 16px}

.vcopy{font-size:12.5px;color:var(--paper-d);border:1px solid var(--line-2);background:var(--surface);
  padding:8px 13px;border-radius:9px;transition:border-color .2s,color .2s}
.vcopy:hover{border-color:var(--signal);color:var(--paper)}
.vcopy.done{border-color:var(--signal);color:var(--signal)}

.kk-map{width:100%;height:100%;filter:grayscale(.18) contrast(.98) brightness(.94)}
.kk-pin{background:var(--ink);color:var(--paper);border:1px solid var(--signal);border-radius:8px;
  padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.9)}
.kk-mapfb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--surface),var(--ink2));padding:22px}
.kk-mapfb-in{text-align:center;max-width:36ch}
.kk-mapfb-in b{display:block;font-size:15px;font-weight:600;color:var(--paper)}
.kk-mapfb-in span{display:block;margin-top:7px;font-size:12.5px;color:var(--muted);font-weight:300}
.kk-mapfb-btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
.kk-mapfb-btns a{font-size:12.5px;color:var(--signal);text-decoration:none;border:1px solid var(--line-2);
  padding:8px 13px;border-radius:9px;transition:border-color .2s}
.kk-mapfb-btns a:hover{border-color:var(--signal)}
.form .submit.is-fallback{background:var(--signal);color:#14161B}
.form .submit.is-fallback::before{display:none}
[data-kakao-chat][hidden]{display:none!important}
.nf{max-width:70ch;padding:clamp(40px,7vw,90px) 0}
.nf h1{font-size:clamp(30px,4.6vw,56px);line-height:1.2;margin:16px 0 0}
.nf-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:34px}
.nf-links a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;background:var(--surface);transition:border-color .2s,transform .2s}
.nf-links a:hover{border-color:var(--signal);transform:translateY(-2px)}
.nf-links b{display:block;font-size:15px;font-weight:600;color:var(--paper)}
.nf-links span{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);font-weight:300}