/* ============================================
   직통웹 — 디자인 토큰 (PLAN.md 4번, 수정 금지)
   모든 색·크기는 반드시 이 변수로만 지정합니다.
   ============================================ */
:root{
  /* 배경 */
  --bg:        #0A0A0C;
  --bg-soft:   #101014;
  --card:      #16161B;
  --card-hi:   #1D1D24;
  --line:      #2A2A33;

  /* 글자 */
  --text:      #F5F5F7;
  --text-dim:  #A0A0AC;
  --text-mute: #6E6E7A;

  /* 브랜드 */
  --brand:     #FF6B00;
  --brand-hot: #FF3D00;
  --red:       #E01A1A;
  --glow:      rgba(255,107,0,.45);

  /* 상태 */
  --ok:        #34D07F;
  --no:        #4A4A55;

  /* 글자 크기 (모바일 자동 축소) */
  --h1:   clamp(30px, 7.5vw, 60px);
  --h2:   clamp(24px, 5.5vw, 40px);
  --h3:   clamp(18px, 4vw,   24px);
  --body: clamp(15px, 3.6vw, 17px);
  --sm:   14px;
  --xs:   12px;

  --w-black: 900;
  --w-bold:  700;
  --w-med:   500;
  --w-reg:   400;

  --lh-tight: 1.25;
  --lh-body:  1.7;

  /* 간격 (8px 배수) */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px;
  --s5:32px; --s6:48px; --s7:64px; --s8:96px;

  --sec-pc: 96px;
  --sec-mo: 56px;
  --wrap: 1120px;
  --gut: 20px;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;

  /* 폰트 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* ============================================
   기본 리셋 + 뼈대
   ============================================ */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--body);
  line-height:var(--lh-body);
  font-weight:var(--w-reg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

h1,h2,h3,h4{
  line-height:var(--lh-tight);
  letter-spacing:-0.02em;
  font-weight:var(--w-black);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* 숫자·영문 라벨용 모노스페이스 */
.mono{ font-family:var(--font-mono); color:var(--brand); }

/* 공통 레이아웃 */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gut);
  position:relative;
  z-index:2; /* 직통선 위에 내용이 올라오도록 */
}

section{ padding:var(--sec-mo) 0; position:relative; }
@media (min-width:768px){
  section{ padding:var(--sec-pc) 0; }
}
.sec-soft{ background:var(--bg-soft); }

/* 섹션 제목 공통 */
.sec-head{ margin-bottom:var(--s6); }
.sec-head h2{ font-size:var(--h2); }
.sec-head .sec-sub{ margin-top:var(--s3); color:var(--text-dim); }

/* 아이콘 (단색 라인 + 주황 글로우) */
.icon{
  width:28px; height:28px; flex:none;
  stroke:var(--brand); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--glow));
}

/* ============================================
   버튼
   ============================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s2);
  min-height:48px; padding:0 var(--s4);
  border-radius:var(--r-full);
  font-weight:var(--w-bold); font-size:var(--body);
  white-space:nowrap;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active{ transform:scale(.97); }

.btn-main{ background:var(--brand); color:var(--bg); position:relative; overflow:hidden; }
.btn-main:hover{ background:var(--brand-hot); }
.btn-main::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 40%,
             rgba(255,180,80,.9) 50%,transparent 60%);
  transform:translateX(-100%);
}
.btn-main:hover::after{ transform:translateX(100%); transition:transform .6s ease; }

.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-dim); }

.btn-sm{ min-height:44px; padding:0 var(--s3); font-size:var(--sm); }

/* 카톡 등 아이콘 전용 버튼 */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:none;
  border-radius:var(--r-full);
  border:1px solid var(--line);
}
.btn-icon:hover{ border-color:var(--text-dim); }
.btn-icon .icon{ width:22px; height:22px; filter:none; stroke:var(--text); }

/* ============================================
   효과 (PLAN.md 6번 — 이 3곳 외 사용 금지)
   ============================================ */
@keyframes breathe{
  0%,100%{ filter:drop-shadow(0 0 6px var(--glow)); }
  50%    { filter:drop-shadow(0 0 16px var(--glow)); }
}
.glow{ animation:breathe 3.5s ease-in-out infinite; }

/* ============================================
   직통선 (시그니처)
   ============================================ */
.thread{
  position:absolute;
  width:1px;
  left:max(16px, calc((100% - var(--wrap)) / 2 - 56px));
  top:0; height:0;              /* JS가 위치·높이를 계산해 넣음 */
  background:var(--line);
  z-index:1;
  pointer-events:none;
}
.thread-fill{
  position:absolute; top:0; left:0; width:1px; height:0;
  background:linear-gradient(to bottom, var(--brand), var(--brand-hot));
  box-shadow:0 0 8px var(--glow);
  transition:height .9s ease;
}
.thread-node{
  position:absolute; left:0;
  transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:var(--r-full);
  background:var(--bg);
  border:2px solid var(--line);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.thread-node.on{
  border-color:var(--brand);
  box-shadow:0 0 10px var(--glow);
}
@media (max-width:767px){
  /* 모바일: 화면 중앙, 점등 효과 없음 (효과 2·3 끔) */
  .thread{ left:50%; opacity:.5; }
  .thread-fill{ display:none; }
}

/* ============================================
   S0. 상단 고정 바
   ============================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.topbar.scrolled{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.topbar-in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.logo{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-weight:var(--w-black); font-size:20px; letter-spacing:-0.02em;
  line-height:1;
}
.logo .logo-icon{ width:26px; height:26px; }
.logo .jik{ color:var(--brand); }
.logo .web{ color:var(--text); }
.topbar-actions{ display:flex; align-items:center; gap:var(--s2); }

/* ============================================
   S1. 히어로
   ============================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-start;   /* 문구는 왼쪽 상단 (trionn 구조) */
  padding-top:calc(96px + var(--s5)); padding-bottom:var(--s7);
}
/* 3D 연출 캔버스 — 화면에 고정되어 1~3페이지 배경으로 지속됨.
   스크롤 위치에 따라 hero.js 가 파편·투명도를 조절 */
.hero-canvas{
  position:fixed; inset:0; z-index:0;
  display:block; width:100%; height:100%;
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ font-size:var(--h1); }
.hero h1 .em{ color:var(--brand); }
.hero .hero-sub{
  margin-top:var(--s4);
  color:var(--text-dim);
  font-size:var(--h3);
  font-weight:var(--w-reg);
  line-height:var(--lh-body);
}
.hero-cta{
  margin-top:var(--s6);
  display:flex; flex-wrap:wrap; gap:var(--s3);
}
.hero-note{ margin-top:var(--s3); font-size:var(--sm); color:var(--text-mute); }

/* ============================================
   S2. 고민 3카드
   ============================================ */
.cards3{ display:grid; gap:var(--s3); }
@media (min-width:768px){ .cards3{ grid-template-columns:repeat(3,1fr); gap:var(--s4); } }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
}
.card h3{ font-size:var(--h3); margin-bottom:var(--s3); }
.card p{ color:var(--text-dim); }

/* ============================================
   S3. 저는 이렇게 합니다 (핵심 섹션 — 가장 크게)
   ============================================ */
.promise-grid{ display:grid; gap:var(--s3); }
@media (min-width:768px){ .promise-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } }
.promise-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
}
.promise-card h3{ font-size:var(--h2); margin-bottom:var(--s3); }
.promise-card h3 .mono{ font-size:.95em; }
.promise-card p{ color:var(--text-dim); font-size:var(--body); }
.promise-foot{
  margin-top:var(--s6);
  text-align:center;
  color:var(--text-dim);
  font-size:var(--sm);
}
.promise-foot .em{ color:var(--brand); font-weight:var(--w-bold); }

/* ============================================
   S4. 제작 범위 6개
   ============================================ */
.feature-list{ display:grid; gap:var(--s3); }
@media (min-width:768px){ .feature-list{ grid-template-columns:repeat(3,1fr); gap:var(--s4); } }
.feature{
  display:flex; gap:var(--s3); align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s4);
}
.feature b{ display:block; font-weight:var(--w-bold); }
.feature p{ color:var(--text-dim); font-size:var(--sm); margin-top:var(--s1); }

/* ============================================
   S5. 요금 카드
   ============================================ */
.price-grid{ display:grid; gap:var(--s4); }
@media (min-width:900px){ .price-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.price-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3);
}
.price-card.featured{
  border-color:var(--brand);
  box-shadow:0 0 24px var(--glow);
}
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:var(--bg);
  font-size:var(--xs); font-weight:var(--w-bold);
  padding:var(--s1) var(--s3);
  border-radius:var(--r-full);
  white-space:nowrap;
}
.price-name{ font-size:var(--h3); font-weight:var(--w-bold); }
.price-num{
  font-family:var(--font-mono); color:var(--brand);
  font-size:var(--h2); font-weight:var(--w-black);
  line-height:1;
}
.price-num small{ font-size:.45em; font-weight:var(--w-bold); }
.price-for{ color:var(--text-dim); font-size:var(--sm); }
.price-feats{ list-style:none; display:grid; gap:var(--s2); margin-top:var(--s2); }
.price-feats li{
  display:flex; gap:var(--s2); align-items:flex-start;
  font-size:var(--sm); color:var(--text-dim);
}
.price-feats .ck{
  width:16px; height:16px; flex:none; margin-top:4px;
  stroke:var(--ok); fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.price-more{
  margin-top:var(--s5); text-align:center;
}
.price-more a{
  color:var(--brand); font-weight:var(--w-bold);
}
.price-notes{
  margin-top:var(--s5);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s4);
  font-size:var(--sm); color:var(--text-dim);
}
.sec-soft .price-notes{ background:var(--card); }
.price-notes b{ color:var(--text); }
.price-notes ul{ list-style:none; display:grid; gap:var(--s2); margin-top:var(--s2); }
.price-notes li{ padding-left:var(--s3); position:relative; }
.price-notes li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:5px; height:5px; border-radius:var(--r-full);
  background:var(--text-mute);
}
.price-notes + .price-notes{ margin-top:var(--s3); }

/* ============================================
   S6. 절차 타임라인
   ============================================ */
.steps{
  list-style:none;
  position:relative;
  padding-left:40px;
}
.steps::before{
  content:""; position:absolute; left:11px; top:6px; bottom:6px;
  width:1px; background:var(--line);
}
.step{ position:relative; padding-bottom:var(--s6); }
.step:last-child{ padding-bottom:0; }
.step::before{
  content:""; position:absolute; left:-35px; top:6px;
  width:13px; height:13px; border-radius:var(--r-full);
  background:var(--bg); border:2px solid var(--line);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.step.on::before{ border-color:var(--brand); box-shadow:0 0 10px var(--glow); }
.step-head{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.step-no{ font-family:var(--font-mono); color:var(--brand); font-weight:var(--w-bold); }
.step-head h3{ font-size:var(--h3); }
.step-days{
  font-family:var(--font-mono); color:var(--brand);
  font-size:var(--sm);
  border:1px solid var(--line); border-radius:var(--r-full);
  padding:0 var(--s3); line-height:26px;
}
.step p{ color:var(--text-dim); margin-top:var(--s2); }

/* ============================================
   S7. 서비스 그리드 3×3
   ============================================ */
/* --- 기본 모습: 격자 ---
   자바스크립트가 없거나 '움직임 줄이기' 설정이면 이 모습 그대로 보입니다. */
.ring-orbit{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
@media (min-width:768px){ .ring-orbit{ grid-template-columns:repeat(3,1fr); gap:var(--s4); } }
.ring-item{
  display:block; width:100%; text-align:left;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s4);
  color:inherit; font:inherit; cursor:pointer;
}
.ring-item .icon{ width:24px; height:24px; }
.ring-item b{ display:block; margin-top:var(--s3); font-weight:var(--w-bold); font-size:var(--sm); }
.ring-item__sub{ display:block; color:var(--text-dim); font-size:var(--xs); margin-top:var(--s1); }
.ring-hub, .ring-bar{ display:none; }
.svc-note{ margin-top:var(--s4); text-align:center; font-size:var(--sm); color:var(--text-mute); }
.svc-note b{ color:var(--brand); font-weight:var(--w-bold); }

/* --- 원형 띠 모드 (JS가 .ring-on 을 붙였을 때만) ---
   구간 안에서만 화면이 고정되고, 다 돌면 풀려서 다음 섹션으로 넘어갑니다. */
.ring-track.ring-on{ height:280vh; }
@media (min-width:768px){ .ring-track.ring-on{ height:320vh; } }

.ring-on .ring-stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(64px + var(--s3)) 0 var(--s3);
  overflow:hidden;
}
.ring-on .ring-stage > .wrap{
  display:flex; flex-direction:column;
  width:100%; height:100%;   /* auto 여백 때문에 폭이 줄어드는 것 방지 */
}
.ring-on .sec-head{ margin-bottom:var(--s3); text-align:center; flex:none; }

/* 항목이 도는 무대 */
.ring-on .ring{ position:relative; flex:1 1 auto; min-height:240px; }
.ring-on .ring-orbit{ position:absolute; inset:0; display:block; gap:0; }

/* 띠(안내용 점선 원) — JS가 크기를 계산해 넣습니다 */
.ring-on .ring::before{
  content:""; position:absolute; left:50%; top:50%;
  width:var(--ring-w,0); height:var(--ring-h,0);
  transform:translate(-50%,-50%);
  border:1px dashed var(--line); border-radius:50%;
  opacity:.5; pointer-events:none;
}

.ring-on .ring-item{
  position:absolute; left:50%; top:50%;
  width:104px; padding:var(--s3) var(--s2);
  text-align:center; border-radius:var(--r-md);
  transform:translate(-50%,-50%);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  will-change:transform, opacity;
}
.ring-on .ring-item .icon{ width:26px; height:26px; }
.ring-on .ring-item b{ margin-top:var(--s2); font-size:12px; line-height:1.35; }
.ring-on .ring-item__sub{ display:none; }
.ring-on .ring-item.is-pop{ transition:transform .3s cubic-bezier(.2,.9,.3,1.35), box-shadow .25s ease; }

/* 지금 앞에 나와 있는 항목 */
.ring-on .ring-item.is-active{
  background:var(--card-hi);
  border-color:color-mix(in srgb, var(--brand) 70%, var(--line));
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 26px var(--glow);
}
.ring-on .ring-item.is-active .icon{ filter:drop-shadow(0 0 12px var(--glow)); }

/* 모바일: 아이콘만 보이는 동그란 알약 (이름은 가운데 안내판에 표시) */
@media (max-width:767px){
  .ring-on .ring-item{
    width:66px; height:66px; padding:0;
    display:grid; place-items:center; border-radius:var(--r-full);
  }
  .ring-on .ring-item b{ display:none; }
}

/* 원 가운데 안내판 */
.ring-on .ring-hub{
  display:block; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(320px, 68%); text-align:center;
  pointer-events:none; z-index:60;
}
.ring-hub b{ display:block; font-size:var(--h3); font-weight:var(--w-black); letter-spacing:-.02em; }
.ring-hub p{ margin-top:var(--s1); color:var(--text-dim); font-size:var(--sm); }
.ring-hub__hint{ display:inline-block; margin-top:var(--s2); font-size:var(--xs); color:var(--brand); }

/* 모바일: 원이 작아서 안내판이 크면 돌아가는 항목과 부딪힙니다.
   (이 규칙은 반드시 위 .ring-hub 규칙보다 아래에 있어야 적용됩니다) */
@media (max-width:767px){
  .ring-on .ring-hub{ width:min(176px, 48%); }
  .ring-on .ring-hub b{ font-size:17px; }
  .ring-on .ring-hub p{ display:none; }   /* 한 줄 설명은 팝업에서 보여줍니다 */
  .ring-on .ring-hub__hint{ margin-top:var(--s1); }
}

/* 아래쪽: 진행 막대 + 몇 번째인지 */
.ring-on .ring-foot{ flex:none; }
.ring-on .ring-bar{
  display:block; max-width:260px; margin:0 auto;
  height:3px; border-radius:var(--r-full);
  background:var(--line); overflow:hidden;
}
.ring-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--brand), var(--brand-hot));
  box-shadow:0 0 10px var(--glow);
}
.ring-on .svc-note{ margin-top:var(--s2); }

/* 자세히 보기 팝업 */
dialog.svc-dialog{ max-width:520px; }
dialog.svc-dialog h3{ font-size:var(--h3); }
dialog.svc-dialog .svcd-lead{ margin-top:var(--s1); color:var(--brand); font-size:var(--sm); }
dialog.svc-dialog ul{ margin-top:var(--s4); list-style:none; display:grid; gap:var(--s3); }
dialog.svc-dialog li{ position:relative; padding-left:var(--s4); font-size:var(--sm); color:var(--text-dim); }
dialog.svc-dialog li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:6px; height:6px; border-radius:var(--r-full); background:var(--brand);
}
dialog.svc-dialog .svcd-note{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--xs); color:var(--text-mute);
}

/* 팝업이 열려 있는 동안 뒷 배경이 스크롤되지 않게 */
body.no-scroll{ overflow:hidden; }

/* ============================================
   S8. 작업 예시
   ============================================ */
.work-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s7) var(--s5);
  text-align:center;
}
.badge{
  display:inline-block;
  font-size:var(--xs); font-weight:var(--w-bold);
  border:1px solid var(--brand); color:var(--brand);
  border-radius:var(--r-full);
  padding:var(--s1) var(--s3);
}
.work-card h3{ font-size:var(--h2); margin-top:var(--s4); }

/* ============================================
   S9. FAQ 아코디언
   ============================================ */
.faq-list{ border-top:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4) 0;
  font-weight:var(--w-bold);
  cursor:pointer;
  min-height:48px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-family:var(--font-mono);
  color:var(--brand);
  font-size:20px; font-weight:var(--w-bold);
  flex:none;
  transition:transform .25s ease;
}
.faq[open] summary::after{ transform:rotate(45deg); }
.faq .faq-a{ padding:0 0 var(--s4); color:var(--text-dim); }

/* ============================================
   S10. 문의 폼
   ============================================ */
.form-card{
  max-width:640px; margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
}
.form-field{ margin-bottom:var(--s4); }
.form-field > label{
  display:block; font-weight:var(--w-med); margin-bottom:var(--s2);
}
.form-field .req{ color:var(--brand); }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field textarea{
  width:100%;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text);
  font:inherit;
  padding:var(--s3);
  min-height:48px;
}
.form-field textarea{ min-height:96px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--text-mute); }

/* 통화 가능한 시간 — 반드시 버튼 */
.time-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.time-btns input{ position:absolute; opacity:0; pointer-events:none; }
.time-btns label{
  display:flex; align-items:center; justify-content:center;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  font-weight:var(--w-med);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.time-btns input:checked + label{
  border-color:var(--brand);
  color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, transparent);
}
.time-btns input:focus-visible + label{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

.consent{
  display:flex; gap:var(--s2); align-items:flex-start;
  font-size:var(--sm); color:var(--text-dim);
  margin-bottom:var(--s4);
}
.consent input{ width:18px; height:18px; margin-top:3px; accent-color:var(--brand); flex:none; }
.consent button{
  text-decoration:underline; color:var(--text-mute); font-size:var(--xs);
}

.form-actions{ display:grid; gap:var(--s2); }
.form-actions .btn{ width:100%; }
.form-foot{ margin-top:var(--s4); text-align:center; font-size:var(--sm); color:var(--text-mute); }

.form-msg{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s4);
  margin-top:var(--s3);
}
.form-msg.ok{ border-color:var(--ok); }
.form-msg.ok b{ color:var(--ok); }
[hidden]{ display:none !important; }

/* ============================================
   S11. 푸터
   ============================================ */
footer{
  border-top:1px solid var(--line);
  padding:var(--s6) 0 var(--s7);
}
.footer-in{
  display:grid; gap:var(--s3);
  font-size:var(--sm); color:var(--text-dim);
}
.footer-links{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }
.footer-links a, .footer-links button{
  color:var(--text-dim); font-size:var(--sm);
}
.footer-links a:hover, .footer-links button:hover{ color:var(--text); }
@media (max-width:767px){
  footer{ padding-bottom:calc(var(--s8) + var(--s5)); } /* 하단 고정 바 자리 */
}

/* ============================================
   하단 고정 상담바 (모바일 전용)
   ============================================ */
.ctabar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:var(--s2); align-items:center;
  padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.ctabar .btn-main{ flex:1; }
@media (min-width:768px){ .ctabar{ display:none; } }

/* ============================================
   개인정보 처리 안내 (dialog)
   ============================================ */
dialog.privacy{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
  max-width:420px; width:calc(100% - var(--s5));
  margin:auto;
}
dialog.privacy::backdrop{ background:color-mix(in srgb, var(--bg) 70%, transparent); }
dialog.privacy h3{ font-size:var(--h3); margin-bottom:var(--s3); }
dialog.privacy ul{ list-style:none; display:grid; gap:var(--s2); font-size:var(--sm); color:var(--text-dim); }
dialog.privacy b{ color:var(--text); }
dialog.privacy .btn{ margin-top:var(--s4); width:100%; }

/* ============================================
   서브 페이지 공통 (pricing / promise)
   ============================================ */
.page-head{ padding-top:calc(64px + var(--s7)); }
.page-head h1{ font-size:var(--h2); }
.page-head p{ margin-top:var(--s3); color:var(--text-dim); }

.spec-list{ list-style:none; display:grid; gap:var(--s2); margin-top:var(--s3); }
.spec-list li{
  display:flex; justify-content:space-between; gap:var(--s3);
  font-size:var(--sm);
  padding:var(--s2) 0;
  border-bottom:1px solid var(--line);
}
.spec-list li:last-child{ border-bottom:none; }
.spec-list .k{ color:var(--text-dim); }
.spec-list .v{ font-weight:var(--w-med); text-align:right; }
.spec-list .v.yes{ color:var(--ok); }
.spec-list .v.no{ color:var(--no); }

.rule-block{ margin-bottom:var(--s6); }
.rule-block h2{ font-size:var(--h3); margin-bottom:var(--s3); }
.rule-block ul{ list-style:none; display:grid; gap:var(--s2); color:var(--text-dim); }
.rule-block li{ padding-left:var(--s3); position:relative; }
.rule-block li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:5px; height:5px; border-radius:var(--r-full);
  background:var(--brand);
}

/* ============================================
   움직임 줄이기 설정 존중 (필수)
   ============================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .glow{ animation:none; }
  .btn-main::after{ display:none; }
  .thread{ animation:none; }
  .thread-fill{ transition:none; }
  .btn, .thread-node, .step::before{ transition:none; }
}

/* ============================================
   ⚡ 화려 레이어 (2026-08-12 사용자 요청)
   레퍼런스: k95.it — 거대 타이포 + 커스텀 커서 + 살아있는 화면
   ============================================ */
:root{
  /* 대형 전시용 글자 크기 (기존 토큰 위에 추가) */
  --d1: clamp(44px, 11vw, 112px);
  --d2: clamp(34px, 7.5vw, 76px);
}

h1, h2, h3{ word-break:keep-all; }

/* 히어로: 화면을 꽉 채우는 타이포 */
.hero{ overflow:hidden; }
.hero h1{ font-size:var(--d1); letter-spacing:-0.04em; }
.sec-head h2{ font-size:var(--d2); letter-spacing:-0.03em; }
.sec-head{ margin-bottom:var(--s7); }

/* 필름 노이즈 질감 */
body::before{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 흐르는 문구 띠 */
.marquee{
  overflow:hidden;
  padding:var(--s4) 0;
  background:var(--bg-soft);
  position:relative; z-index:2;
}
.marquee-track{ display:flex; width:max-content; }
.marquee-seg{
  display:flex; align-items:center; gap:var(--s6);
  padding-right:var(--s6);
  animation:marquee 26s linear infinite;
}
.marquee-item{
  font-size:clamp(20px, 4vw, 34px);
  font-weight:var(--w-black);
  letter-spacing:-0.02em;
  white-space:nowrap;
}
.marquee .bolt{
  width:22px; height:22px; flex:none;
  fill:var(--brand); stroke:none;
  filter:drop-shadow(0 0 8px var(--glow));
}
@keyframes marquee{ to{ transform:translateX(-100%); } }

/* 스크롤 등장 연출 */
html.rv-on .rv{ opacity:0; transform:translateY(30px); }
html.rv-on .rv.in{
  opacity:1; transform:none;
  transition:opacity .8s ease var(--rvd,0s), transform .8s cubic-bezier(.22,.61,.36,1) var(--rvd,0s);
}

/* 카드 호버: 번개 빔이 테두리를 도는 효과 (PC 전용) */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@media (hover:hover) and (min-width:768px){
  .card, .svc, .feature, .promise-card, .price-card, .work-card{
    position:relative;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  html:not(.fx) .card:hover, html:not(.fx) .svc:hover, html:not(.fx) .feature:hover,
  html:not(.fx) .promise-card:hover, html:not(.fx) .price-card:hover, html:not(.fx) .work-card:hover{
    transform:translateY(-6px);
  }
  .card:hover, .svc:hover, .feature:hover, .promise-card:hover, .price-card:hover, .work-card:hover{
    border-color:color-mix(in srgb, var(--brand) 55%, var(--line));
    box-shadow:0 16px 44px color-mix(in srgb, var(--bg) 60%, transparent), 0 0 26px var(--glow);
  }
  .card::after, .svc::after, .feature::after, .promise-card::after, .price-card::after, .work-card::after{
    content:""; position:absolute; inset:-1px; border-radius:inherit;
    padding:1px; pointer-events:none; opacity:0;
    background:conic-gradient(from var(--ang),
      transparent 0 68%, var(--brand) 80%, var(--brand-hot) 86%, transparent 96%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    transition:opacity .25s ease;
  }
  .card:hover::after, .svc:hover::after, .feature:hover::after,
  .promise-card:hover::after, .price-card:hover::after, .work-card:hover::after{
    opacity:1;
    animation:spin-ang 1.5s linear infinite;
  }
  .svc .icon, .feature .icon{ transition:transform .3s ease, filter .3s ease; }
  .svc:hover .icon, .feature:hover .icon{
    transform:scale(1.2) rotate(-4deg);
    filter:drop-shadow(0 0 14px var(--glow));
  }
}
@keyframes spin-ang{ to{ --ang:360deg; } }

/* 커스텀 커서 (JS가 html.fx를 붙였을 때만) */
html.fx, html.fx *{ cursor:none !important; }
.cursor-dot{
  position:fixed; left:0; top:0; z-index:10001;
  width:8px; height:8px; border-radius:var(--r-full);
  background:var(--brand);
  box-shadow:0 0 10px var(--glow);
  pointer-events:none;
  will-change:transform;
}
.cursor-ring{
  position:fixed; left:0; top:0; z-index:10000;
  width:38px; height:38px; border-radius:var(--r-full);
  border:1.5px solid color-mix(in srgb, var(--text) 90%, transparent);
  mix-blend-mode:difference;
  pointer-events:none;
  will-change:transform;
  transition:width .25s ease, height .25s ease, border-color .25s ease;
}
.cursor-ring.big{
  width:70px; height:70px;
  border-color:var(--brand);
  mix-blend-mode:normal;
}
#fx-canvas{
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
}

/* ============================================
   ⚡ 전기 점등 레이어 (2026-08-13 사용자 요청: 사이트 전체 화려하게)
   전부 스크롤 진입 시 1회만 재생 — 계속 깜빡이는 효과 아님
   ============================================ */

/* 섹션 제목: 형광등 켜지듯 지지직 점등 */
html.rv-on .sec-head.in h2{
  animation:title-ignite .9s steps(1,end) both;
}
@keyframes title-ignite{
  0%  { opacity:.15; text-shadow:none; }
  7%  { opacity:1;   text-shadow:0 0 26px var(--glow); }
  14% { opacity:.3;  text-shadow:none; }
  21% { opacity:1;   text-shadow:0 0 34px var(--glow); }
  34% { opacity:.75; text-shadow:0 0 8px var(--glow); }
  46% { opacity:1;   text-shadow:0 0 28px var(--glow); }
  100%{ opacity:1;   text-shadow:0 0 10px rgba(255,107,0,.16); }
}

/* 직통선: 켜진 구간을 따라 전류가 흐름 */
.thread-fill{
  background:repeating-linear-gradient(180deg,
    var(--brand) 0px, #ffcf9a 16px, var(--brand) 32px);
  background-size:100% 64px;
  animation:current-flow 1.4s linear infinite;
}
@keyframes current-flow{ to{ background-position:0 64px; } }

/* 직통선 노드: 점등 순간 파동 1회 */
.thread-node.on{ animation:node-pop .55s ease-out; }
@keyframes node-pop{
  0%  { box-shadow:0 0 0 0 rgba(255,107,0,.75); }
  100%{ box-shadow:0 0 10px var(--glow), 0 0 0 16px rgba(255,107,0,0); }
}

/* 가격 숫자: 등장할 때 한 번 확 밝아짐 */
html.rv-on .price-card.in .price-num{
  animation:num-flare 1s ease-out .25s backwards;
}
/* 절차 단계 번호: 점등될 때 같은 연출 */
.step.on .step-no{ animation:num-flare .9s ease-out; }
@keyframes num-flare{
  0%  { text-shadow:none; }
  35% { text-shadow:0 0 24px var(--glow), 0 0 56px var(--glow); }
  100%{ text-shadow:0 0 10px rgba(255,107,0,.22); }
}

/* ============================================
   3D 배경 지속 구간 (trionn 구조, 2026-08-13)
   1~3페이지(히어로·띠·고민·약속)는 배경을 비워 3D가 비쳐 보이고,
   4페이지(#scope)부터는 불투명 배경이 3D를 덮으며 올라옴
   ============================================ */
section{ background:var(--bg); }          /* 기본: 불투명 (3D를 덮음) */
.sec-soft{ background:var(--bg-soft); }
.hero, #worry, #how, .marquee{ background:transparent; }
.thread{ z-index:1; }                     /* 섹션 배경 위, 내용(.wrap z2) 아래 */

/* 4페이지 등장 (trionn 방식, 스크롤 연동):
   화면이 보이지 않는 가로 5칸으로 나뉘어 있고,
   전환 구간을 지나는 동안 맨 아래 칸부터 다음 페이지 배경(bg-soft)이
   차오르며 3D 화면을 덮음. 다 덮이는 순간 실제 4페이지와 색이 이어짐 */
.cover{ display:none; }
html.rv-on .cover{
  display:block; position:fixed; inset:0;
  z-index:20;              /* 1~3페이지 내용 위, 상단 바(100) 아래 */
  pointer-events:none;
}
.cover-row{ position:absolute; left:0; right:0; overflow:hidden; }
.cover-row:nth-child(1){ top:0;   height:20.2%; }
.cover-row:nth-child(2){ top:20%; height:20.2%; }
.cover-row:nth-child(3){ top:40%; height:20.2%; }
.cover-row:nth-child(4){ top:60%; height:20.2%; }
.cover-row:nth-child(5){ top:80%; height:20.2%; }
.cover-row i{
  position:absolute; inset:0; display:block;
  background:var(--bg-soft);
  transform:translateY(101%);
  will-change:transform;
}
/* 전환 구간: 연출이 켜졌을 때만 스크롤 길이(한 화면)를 차지 */
.cover-zone{ height:0; }
html.rv-on .cover-zone{ height:100vh; }

/* S3(핵심 섹션) 카드: 등장할 때 잠깐 달아올랐다 식음 */
html.rv-on .promise-card.in{ animation:card-ignite .9s ease-out .1s backwards; }
@keyframes card-ignite{
  0%  { box-shadow:none; border-color:var(--line); }
  40% { box-shadow:0 0 30px rgba(255,107,0,.16), inset 0 0 24px rgba(255,107,0,.05);
        border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); }
  100%{ box-shadow:none; }
}

/* 움직임 줄이기: 화려 레이어 전체 끔 */
@media (prefers-reduced-motion:reduce){
  .marquee-seg{ animation:none; }
  html.rv-on .rv{ opacity:1; transform:none; }
  .card::after, .svc::after, .feature::after,
  .promise-card::after, .price-card::after, .work-card::after{ display:none; }
  .thread-fill, .thread-node.on, .step.on .step-no{ animation:none; }
}