/* ===== tokens ===== */
:root{
  --or:rgb(var(--or-rgb)); --red:rgb(var(--red-rgb)); --yel:#ffe23a;
  --bk:#000; --bk-2:#0f0f0f; --bk-3:#231a17; --paper:#f2f2f2; --paper-2:#e4e4e4;
  --ink:#000; --mute:rgba(255,255,255,.72); --hair:rgba(var(--or-rgb),.55); --line:rgba(255,255,255,.14);
  --glow:0 0 12px rgba(var(--red-rgb),.45),0 0 28px rgba(var(--red-rgb),.2); --neon-gap:#140806;
  --glow-box:0 0 0 3px var(--or),0 0 14px 2px rgba(var(--or-rgb),.85),inset 0 0 14px rgba(var(--or-rgb),.6);
  --stripe:repeating-linear-gradient(90deg,transparent 0 7px,rgba(0,0,0,.16) 7px 8px);
  --stripe-or:repeating-linear-gradient(90deg,transparent 0 7px,rgba(var(--or-rgb),.28) 7px 8px);
  --paper-tex:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/4px 4px,linear-gradient(135deg,#f4f4f4,#e3e3e3);
  --dots:radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.5px) 0 0/26px 26px;
  --f-body:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --f-heavy:"Black Han Sans","Pretendard Variable",sans-serif;
  --f-serif:"Noto Serif KR",serif;
  --f-en:"Playfair Display",serif; --f-cap:"Cinzel",serif;
  --nuki-shadow:drop-shadow(0 18px 22px rgba(0,0,0,.38)); --hd-h:79px; --bar-h:51px; --gut:34px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* 포인트컬러 — 채널값만 바꾸면 전체가 따라온다 (코랄 #DD6857 확정 2026-10-05) */
:root{
  --or-rgb:221,104,87; --red-rgb:240,78,60; --glow-rgb:235,140,120; --lt-rgb:245,196,186;
  --deep-rgb:60,12,0; --burst-rgb:120,0,0; --or-dk:#b84a3b; --or-lt:#f0ada2; --or-pale:#e8bdb5;
  --red-dk:#b00; --deep-bg:#1b0d08; --deep-bg2:#2a0a00; --sig-edge:#e6b06a;
  --logo-tint:sepia(1) saturate(6) hue-rotate(-30deg) brightness(.95);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hd-h)}
body{margin:0;background:#000;color:#fff;font-family:var(--f-body);font-size:16px;line-height:1.6;letter-spacing:-.03em;word-break:keep-all;-webkit-font-smoothing:antialiased;padding-bottom:var(--bar-h);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
br.mo{display:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input{font:inherit;color:inherit}
section{position:relative;overflow:hidden}
mark{background:linear-gradient(transparent 55%,var(--yel) 55% 92%,transparent 92%);color:inherit;padding:0 2px}

/* page-wide hairlines (reference: x≈34 / 1246 vertical rules) */
.gridlines{position:fixed;inset:0;z-index:40;pointer-events:none;border-inline:1px solid var(--hair);margin-inline:var(--gut)}

/* ===== shared atoms ===== */
.neon-title{font-family:var(--f-serif);font-weight:900}
/* 레퍼 네온 글씨(recon_03 실측): 선명한 면 + 어두운 틈 + 바깥 주황 테두리 + 테두리 밖 옅은 번짐 */
.neon,.neon-title{position:relative;isolation:isolate;color:var(--or);text-shadow:none;-webkit-text-stroke:.08em var(--neon-gap);paint-order:stroke fill}
.neon-sm{color:var(--or);text-shadow:var(--glow)} /* 25px 이하는 테두리가 뭉개져서 면+바깥 번짐만 */
.neon::before,.neon-title::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;display:inherit;place-items:inherit;justify-content:inherit;align-items:inherit;text-align:inherit;white-space:inherit;color:var(--or);-webkit-text-stroke:.17em var(--or);paint-order:stroke fill;text-shadow:var(--glow)}
.neon-red{font-family:var(--f-en);font-weight:900;color:var(--red);text-shadow:0 0 6px rgba(var(--red-rgb),.8),0 0 16px rgba(var(--red-rgb),.5)}
.bigseal{position:absolute;top:76px;width:163px;height:163px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--f-heavy);font-size:92px;line-height:1;color:var(--ink)}
.bigseal--l{left:102px}.bigseal--r{right:102px}
.bigseal--ink{background:var(--ink);color:var(--or);border:0;box-shadow:0 0 0 4px var(--or),0 0 0 6px var(--ink)}
.arrow{position:absolute;top:50%;z-index:5;width:38px;height:38px;margin-top:-19px;border:0;border-radius:50%;background:var(--or);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:transform .2s}
.arrow:hover{transform:scale(1.1)}
.btn{display:inline-block;padding:12px 40px;border:0;background:var(--or);color:#fff;font-weight:800;font-size:18px;cursor:pointer;transition:background .2s;text-align:center}
.btn:hover{background:var(--or-dk)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ===== header ===== */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd-h);background:linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,0));border-bottom:1px solid var(--hair);transition:background .3s}
.hd.is-scrolled{background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.55))}
.hd__in{max-width:1100px;height:100%;margin:0 auto;display:flex;align-items:center}
.hd__logo img{height:30px;width:auto}
.hd__nav{display:flex;margin-left:auto;margin-right:auto;font-size:14px;font-weight:500;letter-spacing:-.04em}
.hd__nav a{width:80px;text-align:center;transition:color .2s}
.hd__nav a:hover{color:var(--or)}
.hd__cta{font-size:18px;letter-spacing:-.01em}
.hd__burger{display:none;margin-left:14px;background:none;border:0;width:36px;height:36px;padding:6px;cursor:pointer}
.hd__burger span{display:block;height:2px;background:#fff;margin:5px 0}

/* ===== fixed bar ===== */
.bar{position:fixed;inset:auto 0 0;z-index:60;height:var(--bar-h);background:var(--or);display:flex;align-items:center;justify-content:center;gap:10px}
.bar__tel{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:21px;color:#fff;margin-right:10px;letter-spacing:0}
.bar__fields{position:relative;display:flex;gap:11px;padding-top:12px}
.bar__fields input[name]:not([type=checkbox]){width:172px;height:28px;border:0;background:#fff;color:#333;text-align:center;font-size:13px}
.bar__agree{position:absolute;left:0;top:-4px;display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;white-space:nowrap}
.bar__agree input{width:12px;height:12px;margin:0;accent-color:#0a58ff}
.bar button{height:30px;margin-top:12px;padding:0 34px;border:0;background:#000;color:var(--or);font-weight:700;font-size:14px;cursor:pointer}
.totop{position:fixed;right:40px;bottom:calc(var(--bar-h) + 95px);z-index:55;width:52px;height:52px;border-radius:50%;background:var(--deep-bg);border:1px solid var(--or);box-shadow:0 0 0 4px var(--deep-bg),0 0 0 5px rgba(var(--or-rgb),.5);opacity:0;pointer-events:none;transition:opacity .3s}
.totop::before{content:"";position:absolute;left:50%;top:54%;width:12px;height:12px;border:solid var(--or);border-width:2px 0 0 2px;transform:translate(-50%,-50%) rotate(45deg)}
.totop.is-on{opacity:1;pointer-events:auto}

/* ===== footer ===== */
.ft{position:relative;background:#1a1a1a;padding:28px 0 40px;color:rgba(255,255,255,.6);font-size:11px}
.ft__in{position:relative;max-width:1216px;margin:0 auto;padding:0 20px}
.ft__tel{font-family:var(--f-en);font-style:italic;font-weight:900;color:#fff;font-size:14px;margin-bottom:22px}
.ft__sns{display:flex;gap:10px;margin-top:12px}
/* SNS 아이콘: 브랜드색 원 + 로고(마스크, simple-icons) */
.sns{--bg:#333;--fg:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg);transition:transform .2s}
.sns:hover{transform:translateY(-2px)}
.sns i{width:16px;height:16px;background:var(--fg);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.sns--naver{--bg:#03c75a;--ico:url(../images/sns/naver.svg)}.sns--naver i{width:13px;height:13px}
.sns--insta{--bg:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);--ico:url(../images/sns/instagram.svg)}
.sns--youtube{--bg:#ff0000;--ico:url(../images/sns/youtube.svg)}.sns--youtube i{width:18px;height:18px}
.sns--kakao{--bg:#fee500;--fg:#3c1e1e;--ico:url(../images/sns/kakaotalk.svg)}.sns--kakao i{width:18px;height:18px}
.ft__copy{margin-top:14px;color:#fff;font-weight:700}
.ft img{position:absolute;right:20px;top:40px;height:34px;width:auto;opacity:.75}

/* ===== canvas scale (ref: 1280 설계, 화면폭 비례) ===== */
main,.ft__in,.hd__in,.bar{zoom:var(--z,1)}
.gridlines{margin-inline:calc(var(--gut) * var(--z,1))}
.totop{zoom:var(--z,1)}

/* 고래 마크 (로고의 고래만 따서 마스크로 — 색은 color 로) */
.whale{display:inline-block;width:1em;aspect-ratio:347/334;background:currentColor;-webkit-mask:url(../images/whale_mark.png) center/contain no-repeat;mask:url(../images/whale_mark.png) center/contain no-repeat;vertical-align:-.12em}
.whale--flip{transform:scaleX(-1)}
.whale--wm{position:absolute;z-index:-1;pointer-events:none;width:260px}
section:has(> .whale--wm){isolation:isolate}
.sales > .whale--wm{right:-50px;bottom:-40px;color:rgba(var(--or-rgb),.08)}
.count > .whale--wm{left:-60px;top:-30px;width:280px;color:rgba(0,0,0,.09);transform:scaleX(-1)}
.cost > .whale--wm{right:-60px;top:20px;color:rgba(var(--or-rgb),.13)}