/* ============================================================================
   인디스튜디오 — 리스킨 토큰 & 베이스
   ----------------------------------------------------------------------------
   역할: 기존 사이트의 "레이아웃은 그대로" 두고, 색·폰트 규칙만 교체하기 위한
         토큰/베이스 레이어. 구조(그리드·포지션·간격)는 각 페이지의 인라인
         스타일이 계속 담당한다. 컴포넌트 클래스를 두지 않는 이유가 이것이다.

   레퍼런스: https://blkit.agczero.com/?jointo=hong#demo
     · 폰트      Paperlogy 단일 (2026-10-22 Pretendard → Paperlogy, 두께·크기 유지.
                 Paperlogy 에 없는 글자만 Pretendard 로 대체)
     · 중립색    Tailwind slate
     · 카드      radius 24px / border slate-100 / shadow 0 8px 30px rgb(0,0,0,.04)
     · 버튼      radius 12px (rounded-xl)  ← 승인됨
     · 강조카드  메인컬러 솔리드 + 흰 글자  ← 승인됨
     · 헤더      스크롤 시 다크 글래스 유지 ← 승인됨 (header-scroll.js 동작 보존)

   메인컬러: Indigo #4F46E5 — 흰 바탕 대비 6.26:1 (WCAG AA)
   ========================================================================== */

/* ── Paperlogy (눈누 projectnoonnu, 상업 이용 무료) — 9단계 두께, 쓰는 두께만 내려받는다 ── */
@font-face{font-family:'Paperlogy';font-weight:100;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:200;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:300;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:500;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:600;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:700;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:800;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:900;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2')}

:root{
  /* ── Primary ─────────────────────────────────────────── */
  --pri-50:#EEF2FF;  --pri-100:#E0E7FF; --pri-200:#C7D2FE; --pri-300:#A5B4FC;
  --pri-400:#818CF8; --pri-500:#6366F1; --pri-600:#4F46E5; --pri-700:#4338CA;
  --pri-800:#3730A3; --pri-900:#312E81;

  /* ── Neutral (Tailwind slate) ────────────────────────── */
  --w:#ffffff;
  --s50:#f8fafc;  --s100:#f1f5f9; --s200:#e2e8f0; --s300:#cbd5e1;
  --s400:#94a3b8; --s500:#64748b; --s600:#475569; --s700:#334155;
  --s800:#1e293b; --s900:#0f172a; --s950:#020617;

  /* ── Elevation (레퍼런스 실측값) ─────────────────────── */
  --sh-card:0 8px 30px rgba(0,0,0,.04);
  --sh-card-h:0 8px 30px rgba(0,0,0,.08);
  --sh-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --sh-2xl:0 25px 50px -12px rgba(0,0,0,.25);
}

/* ── RESET & BASE ────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Paperlogy','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:#e2e8f0;
  background:var(--bg,#0f172a);
  line-height:1.625;              /* 레퍼런스 leading-relaxed */
  -webkit-font-smoothing:antialiased;
  /* 한글은 어절 단위로 끊어야 한다. 없으면 "지속광·순/간광" 처럼 단어 중간에서
     줄이 바뀐다. break-word 는 이메일·URL 같이 안 끊기는 문자열의 오버플로 방지용. */
  word-break:keep-all;
  overflow-wrap:break-word;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
#_slotloader{display:none!important}

/* 숫자·가격을 본문 폰트 안에서 고르게 — 레퍼런스도 별도 숫자 폰트를 쓰지 않는다 */
body{font-feature-settings:'tnum' 0}

/* ── 히어로 진입 애니메이션 (기존 동작 유지) ───────────────────────────── */
@keyframes heroFade{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── 가로 슬라이더 스크롤바 숨김 (리뷰 슬라이더 · 구역 캐러셀) ─────────── */
#reviews-track,[data-track]{scrollbar-width:none;-ms-overflow-style:none}
#reviews-track::-webkit-scrollbar,[data-track]::-webkit-scrollbar{display:none}

/* ── 앵커 점프가 sticky 헤더(74px)에 가려지지 않게 ────────────────────── */
section[id]{scroll-margin-top:92px}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::marker{content:''}
/* 기존 사이트엔 화살표 회전 규칙이 빠져 있어 열려도 안 돌았다 — 여기서 보완 */
details[open] .faq-ar{transform:rotate(180deg)}

/* ── 반응형 ──────────────────────────────────────────────────────────────
   원본 레이아웃은 인라인 style 로 고정 그리드를 쓰고 미디어쿼리가 없었다.
   구조(마크업)를 건드리지 않기로 했으므로, 인라인 문자열을 속성 선택자로
   잡아 폭만 접는다. !important 는 인라인 스타일을 이기기 위해 불가피하다.
   ──────────────────────────────────────────────────────────────────────── */

/* 넓은 태블릿 */
@media (max-width:1100px){
  [style*="grid-template-columns:repeat(7,1fr)"]{grid-template-columns:repeat(4,1fr)!important;gap:28px 12px!important}
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(3,1fr)!important}
  /* 프로세스 연결선은 줄바꿈되면 의미가 없다 */
  [style*="left:7.14%"],
  [style*="left:10%;right:10%"]{display:none!important}
}

/* 태블릿·모바일 */
@media (max-width:900px){
  /* 데스크탑 전용 줄바꿈 접기 — 과도한 줄나눔 방지 */
  br.md{display:none}

  /* 다단 그리드 → 2단 */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(7,1fr)"]{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}

  /* 2단 분할(이미지+텍스트) → 1단. order 도 풀어 텍스트가 먼저 오게 둔다 */
  [style*="grid-template-columns:1fr 1.05fr"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns:1fr 1.12fr"],
  [style*="grid-template-columns:1.12fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1.5fr 0.9fr"],   /* 요금안내 시간제 요금표 | 요금 계산기 → 요금표 다음에 계산기 */
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:28px!important}

  /* 제작패키지 사진: 2단에서는 글 높이에 맞춰 늘어나지만 1단에서는 4:3 고정 */
  [style*="min-height:520px"]{min-height:0!important;height:auto!important;aspect-ratio:4/3;object-fit:cover}

  /* 2단 옆에 붙어 있던 sticky 컬럼은 1단이 되면 아래 내용 위에 겹치므로 풀어 준다 */
  [style*="position:sticky;top:100px"]{position:static!important}

  /* 사진 그리드의 2×2 대형 타일은 모바일에서 한 칸으로 */
  [style*="grid-auto-rows:230px"]{grid-auto-rows:200px!important}
  [style*="grid-column:span 2"]{grid-column:span 2!important;grid-row:span 1!important}

  /* 섹션 좌우 여백 */
  section[data-screen-label]{padding-left:24px!important;padding-right:24px!important}
  header [style*="padding:0 40px"],
  section [style*="padding:0 40px"]{padding-left:24px!important;padding-right:24px!important}
  footer[data-screen-label]{padding-left:24px!important;padding-right:24px!important}

  /* 히어로 높이 */
  [style*="min-height:760px"]{min-height:620px!important}
  [style*="min-height:680px"],[style*="min-height:660px"]{min-height:560px!important}

  /* 네비게이션은 좁은 화면에서 가로 스크롤로 접근 가능하게 둔다 */
  header nav{gap:18px!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  header nav::-webkit-scrollbar{display:none}
  header nav a{white-space:nowrap}
}

/* 폰 */
@media (max-width:640px){
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr!important}
  /* 프로세스 스텝만 2단 유지 — 1단이면 너무 길어진다 */
  [style*="grid-template-columns:repeat(7,1fr)"]{grid-template-columns:repeat(2,1fr)!important}

  [style*="grid-column:span 2"]{grid-column:span 1!important}
  [style*="grid-auto-rows:230px"]{grid-auto-rows:220px!important}

  section[data-screen-label]{padding-left:16px!important;padding-right:16px!important}
  header [style*="padding:0 40px"],
  section [style*="padding:0 40px"]{padding-left:16px!important;padding-right:16px!important}
  footer[data-screen-label]{padding-left:16px!important;padding-right:16px!important}

  /* 영문 아이브로·배지: Paperlogy 영문 폭이 넓어 넓은 자간이면 폰에서 줄바꿈된다 */
  [style*="letter-spacing:.12em"]{letter-spacing:.05em!important}

  /* 홈 h1 은 56px 고정이라 폰에서 넘친다 */
  [style*="font-size:56px"]{font-size:32px!important}
  [style*="min-height:760px"]{min-height:540px!important}

  /* 가격표 행: 라벨과 금액이 한 줄에 안 들어간다 */
  [style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr!important;gap:8px!important}

  /* 제작패키지: PC 의 넓은 위아래 여백(112px)은 폰에서 과하다 */
  section[data-screen-label^="Package-"]{padding-top:64px!important;padding-bottom:64px!important}

  /* 리뷰 카드 */
  [style*="flex:0 0 320px"]{flex:0 0 272px!important}
}

/* 좁은 폰(360px 등) — 홈 h1 두 줄과 히어로 배지가 한 줄씩 들어가게 */
@media (max-width:380px){
  [style*="font-size:56px"]{font-size:28px!important}
  [style*="letter-spacing:.12em"][style*="border-radius:99px"]{font-size:12px!important;letter-spacing:.02em!important}

  /* 헤더: 로고·예약 버튼 한 줄, 메뉴는 아래 줄 가로 스크롤 — 한 줄이면 버튼이 화면 밖으로 밀린다 */
  header > div{flex-wrap:wrap!important;height:auto!important;padding-top:12px!important;gap:10px 12px!important}
  header nav{order:3;width:100%;margin-left:0!important;padding-bottom:12px}
  header nav + a{margin-left:auto!important;padding:9px 16px!important;font-size:13px!important}
}

/* ── 요금안내 제작 패키지 섹션의 고정 배경 사진 ──
   iOS·안드로이드는 background-attachment:fixed 를 무시하거나 확대해 그리므로 터치 기기에선 일반 배경으로 */
@media (hover:none),(max-width:900px){
  section[data-screen-label="Pricing-Package"]{background-attachment:scroll!important}
}

/* ── 공간대여 FAQ 목록 ── */
[data-faq] input[type=search]:focus{border-color:var(--acInk,#4F46E5)!important;background:#fff!important}
[data-faq] input[type=search]::-webkit-search-cancel-button{cursor:pointer}
[data-faq-tabs]::-webkit-scrollbar{display:none}
.faq-row:hover > span:nth-child(2){color:var(--acInk,#4F46E5)!important}
.faq-ans p:last-child{margin-bottom:0!important}
@media (max-width:640px){
  .faq-row{grid-template-columns:30px 1fr 16px!important;gap:10px!important}
  .faq-row .faq-path{display:none}
  .faq-row > span:nth-child(2){font-size:16px!important}
  .faq-ans{padding-left:46px!important}
}

/* ── 홈 Space: 구역 카드 ↔ 평면도 연동 ─────────────────────────────────────
   JS 없이 :has() 로만 — 시안(.dc.html)과 테마에서 똑같이 동작한다.
   카드(.sp-card[data-spz]) 에 올리면 평면도의 같은 구역(.sp-z[data-spz])이,
   평면도 구역에 올리면 같은 카드가 강조된다. 아무것도 안 올리면 A→B→C 순환. */
.sp-card{color:inherit;text-decoration:none;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.sp-card :is(img,image-slot){transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.sp-card .sp-more{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.sp-card:hover .sp-more,.sp-card:focus-visible .sp-more{opacity:1;transform:none}
.sp-card:hover :is(img,image-slot){transform:scale(1.06)}

.sp-plan-img{transition:opacity .35s}
.sp-z{cursor:pointer;outline:none}
.sp-z polygon{fill:var(--acInk,#4F46E5);fill-opacity:0;stroke:var(--acInk,#4F46E5);stroke-width:8;stroke-opacity:0;stroke-linejoin:round;transition:fill-opacity .35s,stroke-opacity .35s}
.sp-z circle{fill:#0f172a;stroke:#fff;stroke-width:8;transform-box:fill-box;transform-origin:center;transition:fill .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.sp-z text{fill:#fff;font-size:64px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}

/* 활성 구역 (카드 호버 · 구역 호버 · 키보드 포커스) */
.sp-grid:has(.sp-card[data-spz="a"]:is(:hover,:focus-visible)) .sp-z[data-spz="a"] polygon,
.sp-grid:has(.sp-card[data-spz="b"]:is(:hover,:focus-visible)) .sp-z[data-spz="b"] polygon,
.sp-grid:has(.sp-card[data-spz="c"]:is(:hover,:focus-visible)) .sp-z[data-spz="c"] polygon,
.sp-z:is(:hover,:focus-visible) polygon{fill-opacity:.24;stroke-opacity:1}
.sp-grid:has(.sp-card[data-spz="a"]:is(:hover,:focus-visible)) .sp-z[data-spz="a"] circle,
.sp-grid:has(.sp-card[data-spz="b"]:is(:hover,:focus-visible)) .sp-z[data-spz="b"] circle,
.sp-grid:has(.sp-card[data-spz="c"]:is(:hover,:focus-visible)) .sp-z[data-spz="c"] circle,
.sp-z:is(:hover,:focus-visible) circle{fill:var(--acInk,#4F46E5);transform:scale(1.18)}
.sp-grid:has(.sp-card:is(:hover,:focus-visible),.sp-z:is(:hover,:focus-visible)) .sp-plan-img{opacity:.5}

/* 카드 강조 — 카드 자신에 올렸을 때, 그리고 평면도의 같은 구역에 올렸을 때 */
.sp-card:is(:hover,:focus-visible),
.sp-grid:has(.sp-z[data-spz="a"]:is(:hover,:focus-visible)) .sp-card[data-spz="a"],
.sp-grid:has(.sp-z[data-spz="b"]:is(:hover,:focus-visible)) .sp-card[data-spz="b"],
.sp-grid:has(.sp-z[data-spz="c"]:is(:hover,:focus-visible)) .sp-card[data-spz="c"]{transform:translateY(-6px);box-shadow:0 0 0 3px var(--acInk,#4F46E5),0 18px 36px rgba(15,23,42,.18)}
.sp-grid:has(.sp-z[data-spz="a"]:is(:hover,:focus-visible)) .sp-card[data-spz="a"] :is(img,image-slot),
.sp-grid:has(.sp-z[data-spz="b"]:is(:hover,:focus-visible)) .sp-card[data-spz="b"] :is(img,image-slot),
.sp-grid:has(.sp-z[data-spz="c"]:is(:hover,:focus-visible)) .sp-card[data-spz="c"] :is(img,image-slot){transform:scale(1.06)}

/* 대기 상태: 평면도가 A→B→C 를 차례로 비춰 '올려 보라'는 신호를 준다 */
@keyframes spPulse{0%,4%{fill-opacity:0;stroke-opacity:0}10%,26%{fill-opacity:.2;stroke-opacity:.9}33%,100%{fill-opacity:0;stroke-opacity:0}}
@keyframes spBadge{0%,4%{fill:#0f172a}10%,26%{fill:var(--acInk,#4F46E5)}33%,100%{fill:#0f172a}}
.sp-grid:not(:has(.sp-card:is(:hover,:focus-visible),.sp-z:is(:hover,:focus-visible))) .sp-z polygon{animation:spPulse 7.5s infinite}
.sp-grid:not(:has(.sp-card:is(:hover,:focus-visible),.sp-z:is(:hover,:focus-visible))) .sp-z circle{animation:spBadge 7.5s infinite}
.sp-z[data-spz="b"] :is(polygon,circle){animation-delay:2.5s!important}
.sp-z[data-spz="c"] :is(polygon,circle){animation-delay:5s!important}

/* 스크롤로 들어올 때 카드가 차례로 떠오른다 — 지원 브라우저만 (나머지는 그냥 보인다).
   호버의 transform 과 겹치지 않게 translate 속성을 쓴다 */
@supports (animation-timeline:view()){
  @keyframes spIn{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
  .sp-grid > *{animation:spIn linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
  .sp-grid > :nth-child(2){animation-range:entry 12% entry 62%}
  .sp-grid > :nth-child(3){animation-range:entry 19% entry 69%}
  .sp-grid > :nth-child(4){animation-range:entry 26% entry 76%}
}
@media (prefers-reduced-motion:reduce){
  .sp-grid > *,.sp-z :is(polygon,circle){animation:none!important}
  .sp-card,.sp-card :is(img,image-slot){transition:none}
}

/* ── 팝업(<dialog class="indie-modal">) — 예약하기 '개인정보 처리방침' ─────────────
   showModal() 로 열어 Esc·포커스 가두기는 브라우저가 처리한다. 머리·발은 고정, 본문만 스크롤 */
.indie-modal{margin:auto;   /* 리셋(*{margin:0})이 dialog 기본 가운데 정렬을 지운다 */
  width:min(760px,calc(100vw - 32px));max-height:min(86vh,820px);padding:0;border:none;border-radius:16px;
  background:#fff;color:#0f172a;box-shadow:0 30px 80px rgba(2,6,23,.35);overflow:hidden}
.indie-modal[open]{display:flex;flex-direction:column;animation:indieModalIn .22s ease}
.indie-modal::backdrop{background:rgba(2,6,23,.55);backdrop-filter:blur(2px)}
@keyframes indieModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.indie-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;border-bottom:1px solid #e2e8f0}
.indie-modal-head h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.indie-modal-x{width:40px;height:40px;border:none;border-radius:10px;background:none;color:#475569;font-size:20px;cursor:pointer;transition:background-color .2s,color .2s}
.indie-modal-x:hover{background:#f1f5f9;color:#0f172a}
.indie-modal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 28px;font-size:15px;line-height:1.8;color:#334155}
.indie-modal-body h4{margin-top:22px;font-size:16px;font-weight:700;color:#0f172a}
.indie-modal-body h4:first-child{margin-top:0}
.indie-modal-body p{margin-top:6px}
.indie-modal-body ol{margin-top:4px;padding-left:1.3em;list-style:decimal}
.indie-modal-sub{margin-top:14px!important;font-weight:600;color:#0f172a}
.indie-modal-note{margin-top:24px!important;padding-top:16px;border-top:1px solid #e2e8f0;font-size:14px;color:#64748b}
.indie-modal-foot{display:flex;justify-content:center;padding:16px 28px;border-top:1px solid #e2e8f0}
.indie-modal-foot button{min-width:120px;font-family:inherit;font-size:15px;font-weight:600;color:var(--acInk,#4F46E5);background:#fff;
  border:1.5px solid var(--acBorderStrong,rgba(79,70,229,.6));border-radius:10px;padding:12px 24px;cursor:pointer;transition:background-color .2s,color .2s}
.indie-modal-foot button:hover{background:var(--acInk,#4F46E5);border-color:var(--acInk,#4F46E5);color:#fff}
:is(.indie-modal-x,.indie-modal-foot button):focus-visible{outline:3px solid var(--acInk,#4F46E5);outline-offset:2px}
@media (max-width:640px){
  .indie-modal{max-height:90vh;border-radius:14px}
  .indie-modal-head{padding:18px 20px}.indie-modal-head h3{font-size:19px}
  .indie-modal-body{padding:20px 20px 24px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.indie-modal[open]{animation:none}}