/* 2026-09-27 박스티브 방문자 메인 리뉴얼(최종 시안 C) — index.php·contents/html/policy.php 가 씀 */
:root{
  --bg:#141210; --bg-2:#1B1815; --panel:#211E1A; --panel-2:#2A2622; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#F5EFE6; --muted:#A79D91; --dim:#7B7268;
  --orange:#EA7B35; --orange-d:#D2651F; --kraft:#D7C2A7; --kraft-l:#E9DCCB;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;word-break:keep-all}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);letter-spacing:.04em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:14px;font-weight:700;font-size:16px;transition:transform .15s,background .2s,border-color .2s;white-space:nowrap}
.btn-o{background:var(--orange);color:#1a120b}
.btn-o:hover{background:#f08a47;transform:translateY(-1px)}
.btn-g{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.03)}
.btn-g:hover{border-color:var(--kraft);color:var(--kraft)}
.tagline{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--kraft);border:1px solid var(--line-2);padding:8px 14px;border-radius:999px}
.tagline i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.15);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.sec{padding:130px 0;position:relative}
.label{font-family:var(--mono);font-size:12.5px;color:var(--orange);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.label::before{content:"";width:22px;height:1px;background:var(--orange)}
.h2{font-size:48px;line-height:1.18;letter-spacing:-.04em;margin:16px 0 0;font-weight:800}
.sub{color:var(--muted);font-size:16.5px;line-height:1.75;margin:18px 0 0;max-width:520px}

/* 머리말 */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.hd.scrolled{background:rgba(20,18,16,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.hd .wrap{display:flex;align-items:center;height:78px;gap:40px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:44px;width:auto}
.gnb{display:flex;gap:34px;font-size:15.5px;font-weight:600;color:rgba(245,239,230,.78)}
.gnb a:hover{color:#fff}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.hd-r .tel{font-family:var(--mono);font-size:14px;color:var(--muted)}
.hd .btn{height:44px;padding:0 18px;border-radius:12px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);background:none;color:var(--text);border-radius:12px;font-size:20px}

/* 첫 화면 */
.hero{position:relative;min-height:100vh;padding-top:120px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(900px 500px at 78% 12%,rgba(234,123,53,.14),transparent 60%),radial-gradient(700px 400px at 10% 90%,rgba(215,194,167,.07),transparent 60%),var(--bg)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);opacity:.5;pointer-events:none}
.hero-top{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end}
.hero h1{font-size:74px;line-height:1.08;letter-spacing:-.05em;margin:22px 0 0;font-weight:800}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{color:var(--muted);font-size:17px;line-height:1.75;margin:0 0 26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.line-wrap{position:relative;margin-top:auto;padding-top:20px}
.line-pan{position:relative;width:100%;max-width:1440px;margin:0 auto}
.line-svg{display:block;width:100%;height:auto}
.stations{position:absolute;left:0;right:0;bottom:6px;height:0}
.st{position:absolute;transform:translateX(-50%);bottom:0;text-align:center;white-space:nowrap}
.st b{display:block;font-size:14px;font-weight:700;color:var(--text)}
.st span{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.08em}
.st::before{content:"";display:block;width:1px;height:26px;margin:0 auto 8px;background:linear-gradient(var(--orange),transparent)}

/* 생산 라인 그림 */
.belt-side{fill:#1b1815}.leg{fill:#26221e}
.belt-dash{stroke:#4d463f;stroke-width:2;stroke-dasharray:14 26;animation:belt .351s linear infinite}
.m-front{fill:#2d2925;stroke:#4a433c;stroke-width:1}.m-right{fill:#221f1b;stroke:#3b3631;stroke-width:1}.m-top{fill:#3a342e;stroke:#514942;stroke-width:1}
.sheet{fill:#D7C2A7;stroke:#BDA78F;stroke-width:1}.net{fill:#DCC8AD;stroke:#EA7B35;stroke-width:1.6}
.ink{fill:#EA7B35}.ink2{opacity:.75}.foldl{stroke:rgba(80,55,30,.6);stroke-width:1;stroke-dasharray:3 3}
.bx-top{fill:#EADAC5;stroke:#B39C82;stroke-width:.8}.bx-front{fill:#DAC4A7;stroke:#B39C82;stroke-width:.8}.bx-right{fill:#C2A988;stroke:#A48D72;stroke-width:.8}.tape{fill:#EA7B35;opacity:.85}
.pal-top{fill:#8a6b4a}.pal-front{fill:#6c5236}.pal-right{fill:#58432c}
.roller{stroke:url(#gRoll);stroke-width:18;stroke-linecap:round}.r2{stroke-width:12;opacity:.75}
.roller-ink{stroke:#EA7B35;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 9;animation:belt .45s linear infinite;transform:translateY(8px)}
.rod,.rod-top,.rod-r{fill:#8b847c}.plat-top{fill:#5a534b}.plat-front{fill:#48423b}.plat-right{fill:#38332e}.blade{fill:#EA7B35}
.arm-bar{fill:#C9C1B7;stroke:#EA7B35;stroke-width:1}
.accent{fill:#EA7B35}
.gauge-bg{fill:#171513;stroke:#5a534b;stroke-width:2}.needle{stroke:#EA7B35;stroke-width:2;stroke-linecap:round;animation:spin 2.4s linear infinite}
.lamp{fill:#3a342e}
.l-print{animation:lampP 3s infinite}.l-press{animation:lampS 3s infinite}.l-fold{animation:lampF 3s infinite}
.glow{opacity:.15;animation:glowP 3s infinite}
.press{animation:press 3s cubic-bezier(.6,0,.3,1) infinite}
.arm-l{animation:armL 3s ease-in-out infinite}.arm-r{animation:armR 3s ease-in-out infinite}
.glue{fill:#EA7B35;opacity:0;animation:glue 3s infinite}
.drop{animation:drop 3s cubic-bezier(.5,0,.4,1) infinite}
.item{animation:move 12s linear infinite}
.v1{animation:v1 12s linear infinite}.v2{animation:v2 12s linear infinite}.v3{animation:v3 12s linear infinite}.v4{animation:v4 12s linear infinite}
.i1,.i1 .v{animation-delay:-3s}.i2,.i2 .v{animation-delay:-6s}.i3,.i3 .v{animation-delay:-9s}
@keyframes belt{to{stroke-dashoffset:-40}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes move{0%{transform:translateX(-120px);opacity:0}2%{opacity:1}90%{transform:translateX(1110px);opacity:1}92%,100%{transform:translateX(1126px);opacity:0}}
@keyframes v1{0%,32.8%{opacity:1}32.9%,100%{opacity:0}}
@keyframes v2{0%,32.8%{opacity:0}32.9%,55.5%{opacity:1}55.6%,100%{opacity:0}}
@keyframes v3{0%,55.5%{opacity:0}55.6%,76%{opacity:1}76.1%,100%{opacity:0}}
@keyframes v4{0%,76%{opacity:0}76.1%,100%{opacity:1}}
@keyframes press{0%{transform:translateY(0)}14%,30%{transform:translateY(54px)}44%,100%{transform:translateY(0)}}
@keyframes armL{0%,14%{transform:rotate(-26deg)}32%,84%{transform:rotate(0)}100%{transform:rotate(-26deg)}}
@keyframes armR{0%,14%{transform:rotate(26deg)}32%,84%{transform:rotate(0)}100%{transform:rotate(26deg)}}
@keyframes glue{0%,2%{opacity:1}14%,100%{opacity:0}}
@keyframes glowP{0%,18%{opacity:.12}28%,40%{opacity:1}56%,100%{opacity:.12}}
@keyframes lampP{0%,20%{fill:#3a342e}26%,42%{fill:#EA7B35}48%,100%{fill:#3a342e}}
@keyframes lampS{0%,8%{fill:#3a342e}14%,32%{fill:#ff5a4f}40%,100%{fill:#3a342e}}
@keyframes lampF{0%,12%{fill:#3ddc84}20%,100%{fill:#3a342e}}
@keyframes drop{0%,56%{opacity:0;transform:translateY(-40px)}68%{opacity:1;transform:translateY(0)}92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .item,.v,.press,.arm,.glue,.drop,.belt-dash,.roller-ink,.needle,.glow,.lamp{animation:none!important}
  .v{opacity:0}.i0{transform:translateX(150px)}.i0 .v1{opacity:1}.i1{transform:translateX(480px)}.i1 .v2{opacity:1}.i2{transform:translateX(790px)}.i2 .v3{opacity:1}.i3{transform:translateX(1040px)}.i3 .v4{opacity:1}
}

/* 사실 띠 */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:34px 26px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact b{display:block;font-size:40px;font-weight:800;letter-spacing:-.04em}
.fact b em{font-style:normal;color:var(--orange)}
.fact span{color:var(--muted);font-size:14px}

/* 주문 */
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}
.op{border-radius:28px;padding:44px;position:relative;overflow:hidden;min-height:420px;display:flex;flex-direction:column;transition:transform .3s}
.op:hover{transform:translateY(-4px)}
.op.c{background:var(--kraft);color:#1c1611}
.op.p{background:var(--panel);border:1px solid var(--line-2)}
.op .num{font-family:var(--mono);font-size:13px;opacity:.7}
.op h3{font-size:38px;letter-spacing:-.04em;margin:14px 0 12px}
.op p{margin:0;line-height:1.75;font-size:16px;opacity:.85;max-width:440px}
.flow{display:flex;gap:8px;margin:28px 0 30px;flex-wrap:wrap}
.flow span{font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:10px;background:rgba(0,0,0,.08)}
.op.p .flow span{background:rgba(255,255,255,.06);color:var(--kraft)}
.op .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:17px;border-top:1px solid rgba(0,0,0,.15);padding-top:22px}
.op.p .go{border-color:var(--line-2)}
.op .go i{font-style:normal;width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#1c1611;color:var(--kraft);transition:transform .2s}
.op.p .go i{background:var(--orange);color:#1a120b}
.op:hover .go i{transform:translateX(4px)}
.op .big{position:absolute;right:28px;top:26px;font-family:var(--mono);font-size:96px;font-weight:700;opacity:.08;line-height:1}

/* 박스 형태 */
.types-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.arrows{display:flex;gap:8px}
.arrows button{width:48px;height:48px;border-radius:14px;border:1px solid var(--line-2);background:none;color:var(--text);font-size:18px;cursor:pointer}
.arrows button:hover{border-color:var(--orange);color:var(--orange)}
.types{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:44px;padding-bottom:12px;scrollbar-width:none}
.types::-webkit-scrollbar{display:none}
.type{flex:0 0 250px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;transition:border-color .25s,transform .25s}
.type:hover{border-color:var(--orange);transform:translateY(-4px)}
.type .imgbox{background:radial-gradient(circle at 50% 40%,#fff,#efe6da);border-radius:16px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.type img{width:82%;transition:transform .35s}
.type:hover img{transform:scale(1.07)}
.type .meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.type b{font-size:18px}
.type small{font-family:var(--mono);font-size:11.5px;color:var(--dim)}

/* 과정 */
.proc{margin-top:60px;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.proc::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--line-2)}
.pstep{position:relative;padding-right:22px}
.pstep .dot{width:54px;height:54px;border-radius:16px;background:var(--panel);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;color:var(--orange);position:relative;z-index:1}
.pstep:nth-child(5) .dot{background:var(--orange);color:#1a120b;border-color:var(--orange)}
.pstep h3{font-size:19px;margin:22px 0 10px}
.pstep p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7}

/* 레퍼런스 */
.bento{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;grid-auto-rows:220px;gap:14px;margin-top:48px}
.bento a{background:#F4EEE6;border-radius:22px;overflow:hidden;position:relative}
.bento a:first-child{grid-row:span 2}
.bento img{width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .4s}
.bento a:hover img{transform:scale(1.05)}
.bento span{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:11.5px;background:#1c1611;color:var(--kraft);padding:6px 10px;border-radius:8px}

/* 디자인 플랜 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.plan{border:1px solid var(--line-2);border-radius:24px;padding:34px;background:linear-gradient(180deg,var(--panel),var(--bg))}
.plan .pn{font-family:var(--mono);color:var(--orange);font-size:13px}
.plan .pr{font-size:42px;font-weight:800;letter-spacing:-.04em;margin:14px 0 2px}
.plan .pr small{font-size:16px;color:var(--muted);font-weight:600;margin-left:4px}
.plan .pd{color:var(--muted);font-size:14px}
.plan ul{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:12px}
.plan li{font-size:15px;color:rgba(245,239,230,.85);display:flex;gap:10px}
.plan li::before{content:"—";color:var(--orange)}

/* 공장 */
.factory{position:relative;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
.factory img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.factory::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.2),rgba(20,18,16,.92) 70%)}
.factory .wrap{position:relative;z-index:1;padding-bottom:80px;width:100%}
.fvals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.fval{background:rgba(20,18,16,.55);border:1px solid var(--line-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px;padding:24px}
.fval b{display:block;font-size:18px;margin-bottom:8px}
.fval span{color:var(--muted);font-size:14.5px;line-height:1.7}

/* 마무리 */
.cta{padding:120px 0;text-align:center;background:radial-gradient(600px 300px at 50% 100%,rgba(234,123,53,.22),transparent 70%)}
.cta h2{font-size:56px;letter-spacing:-.045em;margin:18px 0 18px;line-height:1.15}
.cta .hero-cta{justify-content:center;margin-top:34px}
.cta .cs{margin-top:28px;color:var(--muted);font-size:15px}
.cta .cs b{font-family:var(--mono);color:var(--text);font-size:20px;margin:0 6px}
.ft{border-top:1px solid var(--line);padding:40px 0 100px;color:var(--dim);font-size:13.5px;line-height:1.8}
.ft .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ft b{color:var(--muted)}




@media (max-width:1100px){
  .hero h1{font-size:58px}
  .hero-top{grid-template-columns:1fr;gap:18px}
  .proc{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .proc::before{display:none}
  .bento{grid-template-columns:1fr 1fr 1fr}
  .fvals{grid-template-columns:1fr}
}
@media (max-width:767px){
  .wrap{padding:0 18px}
  .hd .wrap{height:64px}
  .logo img{height:36px}
  .gnb,.hd-r .tel{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .hd .btn{height:40px;padding:0 14px;font-size:13.5px}
  .hero{padding-top:88px;min-height:0}
  .hero h1{font-size:40px;margin-top:16px}
  .hero .lead{font-size:15.5px}
  .hero-cta .btn{flex:1 1 100%;height:52px}
  .line-wrap{overflow:hidden;margin-top:24px}
  .line-pan{width:880px;max-width:none;animation:pan 14s ease-in-out infinite alternate}
  @keyframes pan{0%,8%{transform:translateX(0)}92%,100%{transform:translateX(calc(-880px + 100vw))}}
  .facts .wrap{grid-template-columns:1fr 1fr;padding:0}
  .fact{padding:22px 18px;border-top:1px solid var(--line)}
  .fact:nth-child(odd){border-left:0}
  .fact b{font-size:30px}
  .sec{padding:84px 0}
  .h2{font-size:32px}
  .order-grid,.plans{grid-template-columns:1fr}
  .op{padding:28px;min-height:0}
  .op h3{font-size:30px}
  .op .big{font-size:64px}
  .arrows{display:none}
  .type{flex-basis:62%}
  .proc{grid-template-columns:1fr;row-gap:26px}
  .pstep{display:grid;grid-template-columns:54px 1fr;column-gap:16px;padding:0}
  .pstep h3{margin:4px 0 6px}
  .pstep p{grid-column:2}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
  .factory{min-height:0}
  .factory .wrap{padding-top:260px;padding-bottom:56px}
  .cta h2{font-size:34px}
  
}

/* ===== C안: A안 첫 화면(어두운 톤) ===== */
.hc{position:relative;padding:118px 0 70px;overflow:hidden;background:radial-gradient(900px 520px at 80% 20%,rgba(234,123,53,.16),transparent 60%),radial-gradient(700px 420px at 5% 95%,rgba(215,194,167,.06),transparent 60%),var(--bg)}
.hc::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);opacity:.45;pointer-events:none}
.hc-grid{position:relative;display:grid;grid-template-columns:1fr 1.02fr;gap:44px;align-items:center;min-height:calc(100vh - 190px)}
.hc h1{font-size:66px;line-height:1.12;letter-spacing:-.05em;margin:22px 0 22px;font-weight:800}
.hc h1 em{font-style:normal;color:var(--orange)}
.hc .lead{color:var(--muted);font-size:17.5px;line-height:1.75;margin:0 0 34px;max-width:520px}
.hfacts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:30px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.hfacts b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em}
.hfacts b em{font-style:normal;color:var(--orange);font-size:.8em}
.hfacts span{font-size:13.5px;color:var(--dim)}
/* 박스 제작 애니메이션 */
.fb-stage{position:relative;height:620px;border-radius:32px;background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--paper-2) 70%);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.fb-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(189,167,143,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(189,167,143,.14) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(70% 60% at 50% 55%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(70% 60% at 50% 55%,#000 30%,transparent 80%)}
.fb-stage-label{position:absolute;left:22px;top:20px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-2);z-index:3}
.fb-stage-label i{width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.15);animation:fb_blink 1.4s infinite}
@keyframes fb_blink{50%{opacity:.35}}
.fb-scene{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 35%}
.fb-scene-in{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;--k:.86;animation:fb_sceneFade 14s infinite}
.fb-table{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:fb_table 14s cubic-bezier(.45,.05,.35,1) infinite}
.fb-sheet{position:absolute;left:-155px;top:-200px;width:310px;height:400px;background:linear-gradient(135deg,#E6D6C1,#D9C4A8);border-radius:3px;box-shadow:0 30px 60px rgba(80,50,20,.18);transform:translateZ(-1px);animation:fb_sheet 14s infinite}
.fb-dieline{position:absolute;left:-155px;top:-200px;width:310px;height:400px;transform:translateZ(1px);overflow:visible;pointer-events:none}
.fb-dieline .fb-cut{fill:none;stroke:var(--orange-d);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;animation:fb_cut 14s infinite}
.fb-dieline .fb-fold{fill:none;stroke:rgba(80,55,30,.45);stroke-width:1.2;stroke-dasharray:5 5;opacity:0;animation:fb_foldline 14s infinite}
.fb-roller{position:absolute;left:-175px;top:-13px;width:350px;height:26px;border-radius:13px;background:linear-gradient(180deg,#8d8680 0%,#e9e4de 40%,#fff 50%,#b8b0a8 70%,#6e6760 100%);box-shadow:0 18px 26px rgba(0,0,0,.18);animation:fb_roller 14s infinite}
.fb-roller::after{content:"";position:absolute;left:10px;right:10px;bottom:-5px;height:6px;border-radius:3px;background:var(--orange);opacity:.85;filter:blur(1px)}
.fb-shadow{position:absolute;left:-95px;top:-5px;width:190px;height:150px;border-radius:30px;background:radial-gradient(closest-side,rgba(60,40,20,.28),transparent);transform:translateZ(-2px);opacity:0;animation:fb_shadowin 14s infinite}
.fb-face{position:absolute;transform-style:preserve-3d;background:#DCC7AB;outline:1px solid rgba(90,60,30,.10)}
.fb-bottom{left:-75px;top:10px;width:150px;height:110px;background:#D5BFA2}
.fb-front{left:0;top:100%;width:150px;height:80px;transform-origin:50% 0;background:#E4D1B7;animation:fb_fFront 14s infinite}
.fb-back{left:0;bottom:100%;width:150px;height:80px;transform-origin:50% 100%;background:#CFB89B;animation:fb_fBack 14s infinite}
.fb-left{right:100%;top:0;width:80px;height:110px;transform-origin:100% 50%;background:#D9C3A6;animation:fb_fLeft 14s infinite}
.fb-right{left:100%;top:0;width:80px;height:110px;transform-origin:0 50%;background:#C8AF90;animation:fb_fRight 14s infinite}
.fb-lid{left:0;bottom:100%;width:150px;height:110px;transform-origin:50% 100%;background:#EADAC5;animation:fb_fLid 14s infinite}
.fb-tuck{left:8px;bottom:100%;width:134px;height:20px;transform-origin:50% 100%;background:#E2CFB5;border-radius:6px 6px 0 0;animation:fb_fTuck 14s infinite}
.fb-ink{position:absolute;inset:0;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(.6px)}
/* 접은 뒤 바깥쪽에서 보이는 인쇄면(면을 뒤집어 붙임 → 글자가 바르게 읽힘) */
.fb-out{position:absolute;inset:0;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateX(180deg) translateZ(.6px)}
.fb-out.fb-y{transform:rotateY(180deg) translateZ(.6px)}
.fb-out-front{background:var(--orange);display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-weight:800;font-size:15px;letter-spacing:.06em}
.fb-out-front svg{width:30px;height:30px}
.fb-out-lid{background:repeating-linear-gradient(90deg,#EADAC5 0 14px,rgba(234,123,53,.9) 14px 22px)}
.fb-out-lid::after{content:"BOXTIVE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--orange);color:#fff;font-weight:800;font-size:12px;letter-spacing:.2em;padding:5px 10px;border-radius:4px}
.fb-out-right{background:linear-gradient(90deg,#C8AF90 38%,rgba(234,123,53,.9) 38% 46%,#C8AF90 46% 56%,rgba(30,26,22,.35) 56% 60%,#C8AF90 60% 66%,rgba(30,26,22,.35) 66% 70%,#C8AF90 70%)}
.fb-ink-front{background:var(--orange);display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-weight:800;font-size:15px;letter-spacing:.06em;animation:fb_inkFront 14s infinite}
.fb-ink-front svg{width:30px;height:30px}
.fb-ink-lid{background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(234,123,53,.9) 14px 22px);clip-path:inset(0 0 100% 0);animation:fb_inkLid 14s infinite}
.fb-ink-lid::after{content:"BOXTIVE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(180deg);background:var(--orange);color:#fff;font-weight:800;font-size:12px;letter-spacing:.2em;padding:5px 10px;border-radius:4px}
.fb-ink-right{background:linear-gradient(transparent 38%,rgba(234,123,53,.9) 38% 46%,transparent 46% 56%,rgba(30,26,22,.35) 56% 60%,transparent 60% 66%,rgba(30,26,22,.35) 66% 70%,transparent 70%);animation:fb_inkRight 14s infinite}
.fb-done{position:absolute;left:50%;bottom:118px;transform:translateX(-50%) scale(.6);opacity:0;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;display:flex;gap:8px;align-items:center;z-index:3;animation:fb_done 14s infinite}
.fb-done svg{width:16px;height:16px}
.fb-steps{position:absolute;left:20px;right:20px;bottom:20px;z-index:3;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:18px;padding:12px}
.fb-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fb-steps li{text-align:center;font-size:13px;font-weight:700;color:var(--muted);padding:9px 4px;border-radius:12px;background:transparent}
.fb-steps li small{display:block;font-size:11px;font-weight:600;opacity:.8;margin-bottom:2px}
.fb-steps li:nth-child(1){animation:fb_s1 14s infinite}
.fb-steps li:nth-child(2){animation:fb_s2 14s infinite}
.fb-steps li:nth-child(3){animation:fb_s3 14s infinite}
.fb-steps li:nth-child(4){animation:fb_s4 14s infinite}
.fb-steps li:nth-child(5){animation:fb_s5 14s infinite}
.fb-bar{height:3px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}
.fb-bar i{display:block;height:100%;width:0;background:var(--orange);animation:fb_bar 14s linear infinite}

@keyframes fb_sceneFade{0%{opacity:0;scale:calc(var(--k) * .96)}3%{opacity:1;scale:var(--k)}40%{scale:var(--k)}60%,91%{opacity:1;scale:calc(var(--k) * 1.48)}96%,100%{opacity:0;scale:calc(var(--k) * 1.48)}}
@keyframes fb_table{0%,40%{transform:rotateX(58deg) rotateZ(-36deg) translate3d(0,0,0)}58%,70%{transform:rotateX(58deg) rotateZ(-36deg) translate3d(0,-65px,0)}90%,100%{transform:rotateX(58deg) rotateZ(324deg) translate3d(0,-65px,0)}}
@keyframes fb_sheet{0%{opacity:0;transform:translateZ(-1px) scale(.94)}5%,34%{opacity:1;transform:translateZ(-1px) scale(1)}42%,100%{opacity:0;transform:translateZ(-1px) scale(1)}}
@keyframes fb_roller{0%,7%{opacity:0;transform:translateY(-215px) translateZ(18px)}8%{opacity:1;transform:translateY(-215px) translateZ(18px)}24%{opacity:1;transform:translateY(215px) translateZ(18px)}26%,100%{opacity:0;transform:translateY(215px) translateZ(18px)}}
@keyframes fb_inkLid{0%,9%{clip-path:inset(0 0 100% 0)}13.5%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fb_inkRight{0%,16%{clip-path:inset(0 0 100% 0)}20.5%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fb_inkFront{0%,20.5%{clip-path:inset(0 0 100% 0)}23.5%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fb_cut{0%,25%{stroke-dashoffset:1;opacity:1}34%{stroke-dashoffset:0;opacity:1}40%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes fb_foldline{0%,30%{opacity:0}36%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes fb_shadowin{0%,42%{opacity:0}58%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes fb_fLeft{0%,42%{transform:rotateY(0)}51%,100%{transform:rotateY(90deg)}}
@keyframes fb_fRight{0%,43%{transform:rotateY(0)}52%,100%{transform:rotateY(-90deg)}}
@keyframes fb_fFront{0%,49%{transform:rotateX(0)}58%,100%{transform:rotateX(90deg)}}
@keyframes fb_fBack{0%,50%{transform:rotateX(0)}59%,100%{transform:rotateX(-90deg)}}
@keyframes fb_fLid{0%,60%{transform:rotateX(0)}68%,100%{transform:rotateX(-90deg)}}
@keyframes fb_fTuck{0%,66%{transform:rotateX(0)}72%,100%{transform:rotateX(-90deg)}}
@keyframes fb_done{0%,73%{opacity:0;transform:translateX(-50%) scale(.6)}77%,90%{opacity:1;transform:translateX(-50%) scale(1)}94%,100%{opacity:0;transform:translateX(-50%) scale(.9)}}
@keyframes fb_s1{0%,7.9%{background:var(--orange);color:#fff}8%,100%{background:transparent;color:var(--muted)}}
@keyframes fb_s2{0%,7.9%{background:transparent;color:var(--muted)}8%,25.9%{background:var(--orange);color:#fff}26%,100%{background:transparent;color:var(--muted)}}
@keyframes fb_s3{0%,25.9%{background:transparent;color:var(--muted)}26%,41.9%{background:var(--orange);color:#fff}42%,100%{background:transparent;color:var(--muted)}}
@keyframes fb_s4{0%,41.9%{background:transparent;color:var(--muted)}42%,71.9%{background:var(--orange);color:#fff}72%,100%{background:transparent;color:var(--muted)}}
@keyframes fb_s5{0%,71.9%{background:transparent;color:var(--muted)}72%,96%{background:var(--kraft);color:#1c1611}96.1%,100%{background:transparent;color:var(--muted)}}
@keyframes fb_bar{0%{width:0}96%,100%{width:100%}}
@media (prefers-reduced-motion:reduce){
  .fb-scene-in,.fb-table,.fb-sheet,.fb-roller,.fb-dieline .fb-cut,.fb-dieline .fb-fold,.fb-shadow,.fb-face,.fb-ink,.fb-done,.fb-steps li,.fb-bar i{animation:none!important}
  .fb-table{transform:rotateX(58deg) rotateZ(-36deg) translate3d(0,-65px,0)}
  .fb-scene-in{scale:calc(var(--k) * 1.48)}
  .fb-sheet,.fb-roller{opacity:0}.fb-dieline{display:none}.fb-shadow{opacity:1}
  .fb-left{transform:rotateY(90deg)}.fb-right{transform:rotateY(-90deg)}.fb-front{transform:rotateX(90deg)}.fb-back,.fb-lid,.fb-tuck{transform:rotateX(-90deg)}
}


/* 어두운 바탕 색 보정 */
.fb-stage{background:radial-gradient(120% 90% at 50% 0%,#2c2622 0%,#171412 72%);border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.4)}
.fb-stage::before{background-image:linear-gradient(rgba(215,194,167,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(215,194,167,.09) 1px,transparent 1px)}
.fb-stage-label{color:var(--muted)}
.fb-sheet{box-shadow:0 30px 60px rgba(0,0,0,.5)}
.fb-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.fb-done{background:var(--kraft);color:#1c1611}
.fb-done svg path{stroke:#1c1611}
.fb-steps{background:rgba(20,18,16,.72);border-color:var(--line-2)}
.fb-steps li{color:var(--dim)}
.fb-bar{background:rgba(255,255,255,.08)}

/* 생산 라인 섹션 */
.linesec{padding:110px 0 30px;border-top:1px solid var(--line);background:radial-gradient(800px 360px at 50% 100%,rgba(234,123,53,.10),transparent 70%),var(--bg-2);overflow:hidden}
.line-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.line-head .h2 em{font-style:normal;color:var(--orange)}
.linesec .line-wrap{margin-top:30px}

/* 박스 10종: 모두 보이는 격자(A안식) */
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
.tcard{background:#F7F2EA;color:#1c1611;border-radius:22px;padding:18px 16px 16px;transition:transform .25s,box-shadow .25s}
.tcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.tcard img{width:100%;aspect-ratio:1/1;object-fit:contain;transition:transform .35s}
.tcard:hover img{transform:scale(1.06) rotate(-2deg)}
.tcard b{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-top:8px}
.tcard b small{font-size:12.5px;color:var(--orange-d);font-weight:700;opacity:0;transition:opacity .2s}
.tcard:hover b small{opacity:1}


/* 6단계: A안식 카드 */
.process{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process .pgrid{margin-top:48px}
/* 제작 과정 */
.process{background:var(--ink);color:#fff}
.process .sec-head p{color:rgba(255,255,255,.7)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:28px;position:relative;overflow:hidden}
.pcard .no{font-size:52px;font-weight:800;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(234,123,53,.9);line-height:1}
.pcard h3{font-size:21px;margin:18px 0 10px}
.pcard p{color:rgba(255,255,255,.7);line-height:1.7;margin:0;font-size:15px}
.pcard .ic{position:absolute;right:22px;top:24px;width:56px;height:56px;border-radius:16px;overflow:hidden;opacity:.9}
.pcard .ic img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}


@media (max-width:1100px){
  .hc-grid{grid-template-columns:1fr;min-height:0}
  .hc h1{font-size:54px}
  .tgrid{grid-template-columns:repeat(3,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .hc{padding:84px 0 44px}
  .hc-grid{gap:26px}
  .hc h1{font-size:38px;margin:16px 0}
  .hc .lead{font-size:15.5px;margin-bottom:24px}
  .hfacts{grid-template-columns:repeat(2,1fr);gap:18px 20px;margin-top:28px}
  .hfacts b{font-size:22px}
  .fb-stage{height:400px;border-radius:24px;order:-1}
  .fb-scene-in{top:43%;--k:.66}
  .fb-steps{left:10px;right:10px;bottom:10px;padding:8px}
  .fb-steps li{font-size:11.5px;padding:7px 2px}
  .fb-steps li small{font-size:10px}
  .fb-done{bottom:92px;white-space:nowrap;font-size:12.5px;padding:8px 13px}
  .linesec{padding:70px 0 20px}
  .tgrid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
  .tcard{padding:12px 12px 12px;border-radius:18px}
  .tcard b small{opacity:1}
  .pgrid{grid-template-columns:1fr}
  .types-head{flex-wrap:wrap}
}

/* ===== 실제 사이트용 추가(2026-09-27) ===== */
.hd .kakao{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border-radius:12px;background:#FEE500;color:#191600;font-weight:700;font-size:14px}
.hd .kakao svg{width:17px;height:17px}
/* 휴대폰 메뉴 */
.mnav{position:fixed;inset:0;z-index:80;background:rgba(14,12,10,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;flex-direction:column;padding:18px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto}
.mnav.on{display:flex}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:44px;margin-bottom:18px}
.mnav-top img{height:36px}
.mnav-close{width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:none;color:var(--text);font-size:22px}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav > ul > li{border-bottom:1px solid var(--line)}
.mnav > ul > li > a{display:flex;justify-content:space-between;align-items:center;padding:17px 2px;font-size:20px;font-weight:700}
.mnav > ul > li > a::after{content:"→";color:var(--dim);font-size:16px}
.mnav .sub{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 16px}
.mnav .sub a{font-size:14px;color:var(--muted);border:1px solid var(--line-2);padding:7px 12px;border-radius:999px}
.mnav-cta{display:grid;gap:10px;margin-top:24px}
.mnav-cta .btn{width:100%}
.mnav-tel{margin-top:18px;color:var(--muted);font-size:14px;text-align:center}
.mnav-tel b{font-family:var(--mono);color:var(--text);font-size:18px;margin-left:6px}
body.menu-open{overflow:hidden}
/* 꼬리말 */
.ft2{border-top:1px solid var(--line);background:#0f0d0c;color:var(--muted);font-size:14px}
.ft2-top{display:grid;grid-template-columns:1.1fr 2fr;gap:40px;padding-top:64px;padding-bottom:44px}
.ft2-brand img{height:46px}
.ft2-brand p{margin:18px 0 0;line-height:1.75;max-width:320px;color:var(--dim)}
.ft2-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ft2-cols h4{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--kraft);font-weight:700;text-transform:uppercase}
.ft2-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft2-cols a:hover{color:var(--text)}
.ft2-cs b{display:block;font-family:var(--mono);font-size:20px;color:var(--text);margin-bottom:8px}
.ft2-cs span{display:block;line-height:1.8;color:var(--dim)}
.ft2-bottom{border-top:1px solid var(--line);padding-top:22px;padding-bottom:110px;display:flex;flex-direction:column;gap:10px}
.ft2-policy{display:flex;gap:18px;flex-wrap:wrap}
.ft2-policy a{color:var(--muted);font-weight:600}
.ft2-policy a.b{color:var(--text);font-weight:800}
.ft2-policy a:hover{color:var(--orange)}
.ft2-info{color:var(--dim);line-height:1.8}
.ft2-copy{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#5f574f}
/* 떠 있는 카카오톡 상담 */
.kakao-fab{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px;border-radius:999px;background:#FEE500;color:#191600;font-weight:800;font-size:14.5px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.kakao-fab svg{width:20px;height:20px}
.top-fab{position:fixed;right:18px;bottom:80px;z-index:70;width:48px;height:48px;border-radius:50%;background:rgba(245,239,230,.12);border:1px solid var(--line-2);color:var(--text);display:none;align-items:center;justify-content:center;font-size:18px;backdrop-filter:blur(6px)}
.top-fab.on{display:flex}
/* 관리자 팝업(inc/inc_popup.php) — 부트스트랩 없이 보이도록 */
#pop-up{color:#222;font-size:14px;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);max-width:520px}
#pop-up .pop-up_contents{color:#222;line-height:1.6}
#pop-up .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
#pop-up .col-12{flex:1 1 auto;width:auto}
#pop-up .btn{display:inline-block;padding:7px 16px;border:1px solid #ddd;border-radius:8px;color:#333;background:#fff;text-align:center}
#pop-up .d-block{display:inline-block!important}
#pop-up .form-check-input{width:16px;height:16px;vertical-align:middle;margin:0 6px 0 0;accent-color:#EA7B35}
/* 약관 보기 */
.pol{padding:130px 0 90px;background:radial-gradient(700px 360px at 80% 0%,rgba(234,123,53,.12),transparent 60%),var(--bg)}
.pol-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.pol-head h1{font-size:44px;letter-spacing:-.04em;margin:14px 0 0}
.pol-tabs{display:flex;gap:8px}
.pol-tabs a{height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line-2);display:inline-flex;align-items:center;font-weight:700;color:var(--muted)}
.pol-tabs a.on{background:var(--orange);border-color:var(--orange);color:#1a120b}
.pol-body{background:#F7F2EA;color:#231d17;border-radius:24px;padding:48px 52px;line-height:1.9;font-size:15.5px;word-break:keep-all;overflow-wrap:anywhere}
.pol-body h3,.pol-body h4{margin:1.6em 0 .6em;letter-spacing:-.02em}
.pol-empty{text-align:center;padding:40px 10px;color:#6b6157}
.pol-empty b{display:block;font-size:18px;color:#231d17;margin-bottom:8px}
.pol-meta{margin-top:14px;color:var(--dim);font-size:13px}
@media (max-width:1100px){.ft2-top{grid-template-columns:1fr}.ft2-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  .hd .kakao{display:none}
  .ft2-top{padding-top:44px;gap:28px}
  .ft2-cols{gap:26px 16px}
  .ft2-bottom{padding-bottom:96px}
  .kakao-fab{height:48px;padding:0 15px;font-size:13.5px;right:14px;bottom:14px}
  .top-fab{right:14px;bottom:72px;width:44px;height:44px}
  .pol{padding:92px 0 60px}
  .pol-head h1{font-size:32px}
  .pol-tabs{width:100%}
  .pol-tabs a{flex:1 1 0;justify-content:center;padding:0 10px;font-size:14px}
  .pol-body{padding:26px 20px;font-size:14.5px;border-radius:18px}
}