/* internet.css — 인터넷·TV 축 전용 (임무 I4)
   토큰은 stage.css 의 시맨틱 이름(--bg-* --fg-* --border-*)만 쓴다. 새 색값을 만들지 않는다.
   컨테이너 1024 · 세로 리듬 PC 88px 0 · 모바일 40px 0 · 모바일 거터 20 (사양서 §2-1 · §2-2)
   🔴 링크색 규칙에는 제외 토큰을 함께 쓴다(불변규칙 5).
   🔴 2026-09-29 세로띠 투톤 전환 — 면·글자·선은 전부 시맨틱 토큰이라 값이 stage.css 에서 바뀌며 따라왔다.
      이 파일에서 손댄 것은 선언 안에 박혀 있던 색값 두 종류(카드 그림자 · 요약바 그림자)뿐이다. */

/* 🔴 --int-summary-h 는 :root 에 둔다(2026-09-14 최종 QA · 하단 고정 요약바가 푸터를 덮은 건).
   앞판은 이 토큰을 .internet-page(=main)에 두어 푸터(main 의 형제)가 값을 물려받지 못했다.
   푸터 여백을 이 토큰으로 잡으려면 두 형제의 공통 조상에 있어야 한다.
   값은 자리표시(폰트·줄바꿈에 따라 실제 높이가 달라진다)이고, internet.js 의 ResizeObserver 가 실측 px 로 덮어쓴다.
   이 파일은 인터넷·TV 화면에서만 불린다(다른 화면의 :root 를 건드리지 않는다). */
:root{ --int-summary-h:184px; }
.internet-page{ --int-container:1024px; background:var(--bg-primary); }
.internet-page .int-inner{ width:100%; max-width:var(--int-container); margin:0 auto; padding:0 20px; }
.internet-page{ padding-bottom:calc(var(--int-summary-h) + 24px); }
/* 🔴 하단 고정 요약바가 있는 화면에서는 푸터 아래 여백도 그만큼 늘린다(2026-09-14 최종 QA).
   stage.css 821행은 탭바(--cs-tabbar-h)만 비워 두므로, 그 위에 얹힌 .int-summary(실측 390 259px · 768 245 · 1280 162)가
   푸터 마지막 줄(사업자 정보 펼침 = 법정 표시로 가는 유일한 통로)을 어느 스크롤 위치에서도 덮었다.
   선택자는 형제 결합자다 — 요약바가 실제로 있는 문서(/internet/<통신사>/ 8장)에서만 걸리고, 허브 /internet/ 은 걸리지 않는다.
   qa-390-probe (b)/(b3) 가 「화면 폭을 가로지르는 하단 고정 바 전부」 기준으로 3뷰포트에서 이것을 잰다. */
.int-summary ~ .site-footer{ padding-bottom:calc(16px + var(--cs-tabbar-h) + var(--int-summary-h)); }
.internet-page.internet-hub-page{ padding-bottom:64px; }

.internet-page a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)){ color:var(--fg-brand); }
.internet-page a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)):hover{ color:var(--fg-brand-hover); }

/* ── 빵부스러기 ── */
.int-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:16px 0 0; font-size:.8125rem; color:var(--fg-secondary); }
.int-crumb__sep{ color:var(--border-primary); }
.int-crumb__here{ color:var(--fg-secondary); }

/* ── 히어로 ── */
.int-hero{ padding:24px 0 8px; }
.int-hero__eyebrow{ margin:0 0 6px; font-size:.8125rem; font-weight:700; color:var(--fg-brand); }
.int-hero__title{ margin:0 0 10px; font-size:clamp(1.5rem,4.4vw,2.25rem); line-height:1.28; letter-spacing:-.01em; color:var(--fg-primary); word-break:keep-all; }
.int-hero__lead{ margin:0; max-width:62ch; font-size:.9375rem; line-height:1.7; color:var(--fg-secondary); word-break:keep-all; }

/* ── 섹션 공통 ── */
.int-sec{ padding:40px 0 0; }
.int-sec__title{ margin:0 0 6px; font-size:1.125rem; font-weight:700; color:var(--fg-primary); }
.int-sec__lead{ margin:0 0 14px; font-size:.875rem; line-height:1.65; color:var(--fg-secondary); word-break:keep-all; }
.int-note{ margin:10px 0 0; font-size:.8125rem; line-height:1.6; color:var(--fg-secondary); word-break:keep-all; }

/* ── 통신사 타일 (허브 · 통신사 페이지 상단 공용) ── */
.int-carriers{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0; padding:0; }
.int-carrier-tile{ display:flex; flex-direction:column; gap:6px; min-height:96px; padding:14px; border:1px solid var(--border-secondary); border-radius:16px; background:var(--bg-surface-plain); text-decoration:none; }
.int-carrier-tile:hover{ border-color:var(--border-brand-light); background:var(--bg-brand-subtle); }
.int-carrier-tile[aria-current="page"]{ border-color:var(--border-selected); background:var(--bg-brand-subtle); }
.int-mark{ align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:26px; padding:0 8px; border-radius:6px; background:var(--bg-neutral); color:var(--fg-primary); font-size:.75rem; font-weight:700; letter-spacing:.02em; }
.int-carrier-tile[aria-current="page"] .int-mark,
.int-carrier-tile:hover .int-mark{ background:var(--bg-brand); color:var(--fg-on-color); }
.int-carrier-tile__name{ font-size:.9375rem; font-weight:700; color:var(--fg-primary); word-break:keep-all; }
.int-carrier-tile__meta{ font-size:.75rem; color:var(--fg-secondary); }
.int-badge{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:9999px; background:var(--bg-brand-subtle); color:var(--fg-brand); font-size:.6875rem; font-weight:700; }

/* ── 셀렉터 ── */
.int-select{ margin-top:28px; border:1px solid var(--border-secondary); border-radius:20px; background:var(--bg-surface-plain); padding:18px; }
.int-field{ padding:16px 0; border-top:1px solid var(--border-tertiary); }
.int-field:first-child{ padding-top:0; border-top:0; }
.int-field__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0 0 10px; }
.int-field__label{ margin:0; font-size:.9375rem; font-weight:700; color:var(--fg-primary); }
.int-field__hint{ margin:0; font-size:.8125rem; color:var(--fg-secondary); }

.int-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.int-chip{ min-height:44px; padding:10px 16px; border:1px solid var(--border-strong); border-radius:9999px; background:var(--bg-surface-plain); color:var(--fg-secondary); font-size:.875rem; font-weight:400; cursor:pointer; }
.int-chip[aria-pressed="true"]{ border-color:var(--border-selected); background:var(--bg-brand); color:var(--fg-on-color); font-weight:700; }

.int-check{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:10px; font-size:.875rem; color:var(--fg-secondary); cursor:pointer; }
.int-check input{ width:20px; height:20px; accent-color:var(--bg-brand); }

.int-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }

/* 🔴 2026-09-09 — 첫 카드만 위로 6px 솟던 원인.
   stage.css §「산문」의 :where(.page-main) :where(li + li){margin-top:.35em} 이 이 목록에도 걸린다.
   16px 기준 5.6px 이고 첫 항목에는 안 붙으므로, 2번째부터만 아래로 밀려 첫 카드가 홀로 떠 보였다.
   덤으로 그리드 행 높이가 카드(103.58)보다 큰 109.17 로 부풀어 있었다.
   catalog.css 는 같은 이유로 그리드마다 이 무력화를 이미 11곳에 두고 있다 — 인터넷 목록만 빠져 있었다. */
.int-cards li + li,
.int-scroller__track li + li{ margin-top:0; }

.int-card{
  display:flex; flex-direction:column; gap:4px; width:100%; min-height:92px;
  padding:14px; border:1px solid var(--border-strong); border-radius:14px;
  background:var(--bg-surface-plain); text-align:left; cursor:pointer;
  /* 🔴 기본값을 none 으로 두면 안 된다. box-shadow 는 그림자 개수와 inset 여부가 양쪽에서 같아야 보간된다 —
     none → inset 은 규격상 보간 불가라 브라우저가 첫 프레임에 결과값으로 건너뛴다(전이를 걸어도 툭 바뀐다).
     그래서 「안쪽 링 + 바깥 그림자」 두 장을 항상 두고 투명도만 움직인다.
     🔴 2026-09-29 세로띠 투톤 전환 — 그림자 색을 옛 브랜드 파랑에서 잉크 채널 토큰으로 옮겼다.
        새 브랜드(딥그린 #17302a)는 지면 잉크(#101f1b)와 사실상 같은 색이라 브랜드용 채널 토큰을 새로 만들지 않고,
        stage.css 가 이미 가진 --cs-ink-rgb 를 쓴다(알파를 곁들이는 자리의 채널값 토큰 · 새 색값 신설 0).
        알파 0 짜리도 같은 색으로 둔다 — 색이 다르면 전이 중간 프레임에 엉뚱한 색이 스친다. */
  box-shadow:inset 0 0 0 0 rgb(var(--cs-ink-rgb) / 0), 0 0 0 0 rgb(var(--cs-ink-rgb) / 0);
  /* 규격 = effects.css 머리말(이징 하나 · 카드 .5s · 버튼 .25s · 눌림 .12s).
     새 이징을 만들지 않는다. transform·box-shadow 만 움직여 레이아웃을 건드리지 않는다. */
  transition:transform var(--fx-btn,.25s) var(--fx-ease,cubic-bezier(.22,1,.36,1)),
             box-shadow var(--fx-card,.5s) var(--fx-ease,cubic-bezier(.22,1,.36,1)),
             border-color var(--fx-btn,.25s) ease,
             background-color var(--fx-btn,.25s) ease;
}
@media (hover:hover){
  .int-card:hover{ border-color:var(--border-selected); box-shadow:inset 0 0 0 0 rgb(var(--cs-ink-rgb) / 0), 0 4px 14px rgb(var(--cs-ink-rgb) / .12); transform:translateY(-2px); }
}
.int-card:active{ transform:translateY(0) scale(.985); transition-duration:var(--fx-press,.12s); }

/* 선택 상태. 종전에는 border-width 를 1→2 로 키우고 padding 을 14→13 으로 되돌려 크기를 맞췄다.
   그러면 전이가 걸리는 순간 테두리·안쪽여백이 함께 움직여 레이아웃을 다시 계산한다(끊겨 보이고 느리다).
   같은 굵기를 안쪽 그림자 1px 로 그리면 상자 크기가 한 번도 안 변해 합성기에서만 움직인다.
   🔴 색만으로 구분하지 않는다 — 링 굵기(1→2)와 배경이 함께 바뀐다. */
.int-card[aria-pressed="true"]{
  border-color:var(--border-selected);
  box-shadow:inset 0 0 0 1px var(--border-selected), 0 0 0 0 rgb(var(--cs-ink-rgb) / 0);
  background:var(--bg-brand-subtle);
}
@media (hover:hover){
  .int-card[aria-pressed="true"]:hover{ box-shadow:inset 0 0 0 1px var(--border-selected), 0 4px 14px rgb(var(--cs-ink-rgb) / .12); }
}
.int-card__name{ font-size:.9375rem; font-weight:700; color:var(--fg-primary); }
.int-card__desc{ font-size:.75rem; color:var(--fg-secondary); word-break:keep-all; }
.int-card__fee{ margin-top:auto; font-size:.875rem; font-weight:700; color:var(--fg-brand); }
.int-card__fee--soft{ color:var(--fg-secondary); font-weight:400; }

/* TV 채널 = 가로 스크롤 + 화살표 */
.int-scroller{ position:relative; }
.int-scroller__track{ display:flex; gap:10px; margin:0; padding:2px 0 8px; list-style:none; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:thin; }
.int-scroller__track > li{ flex:0 0 216px; }
.int-scroller__track .int-card{ height:100%; }
.int-scroller__arrow{ display:none; position:absolute; top:38%; z-index:2; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--border-strong); border-radius:9999px; background:var(--bg-surface-plain); color:var(--fg-secondary); cursor:pointer; }
/* 🔴 2026-09-09 — 종전 left:-6px 은 화살표(36px)를 트랙 왼쪽 끝에 겹쳐 놓아 첫 카드를 30px 덮었다
   (실측: prev.right 280 vs 첫 카드 x 250). 고객 지적 「화살표가 메뉴명을 가리지 않도록」이 이 자리다.
   스크롤러 자체에 좌우 54(버튼 44 + 간격 10 · 09-14 I-40 에서 36 → 44)를 비워 화살표가 그 여백 안에만 있게 한다.
   음수 offset 으로 컨테이너 밖에 두지 않는 이유: 768~1024 구간은 좌우 여백이 없어 가로 넘침이 난다. */
.int-scroller__arrow[data-dir="prev"]{ left:0; }
.int-scroller__arrow[data-dir="next"]{ right:0; }
.int-scroller__arrow[hidden]{ display:none; }

/* ── 안내 블록 ── */
.int-panel{ margin-top:14px; border:1px solid var(--border-secondary); border-radius:16px; background:var(--bg-surface-subtle); padding:16px; }
.int-panel__title{ margin:0 0 8px; font-size:.9375rem; font-weight:700; color:var(--fg-primary); }
.int-dl{ margin:0; }
.int-dl > div{ display:flex; flex-wrap:wrap; gap:4px 10px; padding:7px 0; border-top:1px solid var(--border-tertiary); font-size:.8125rem; line-height:1.6; }
.int-dl > div:first-child{ border-top:0; }
.int-dl dt{ min-width:132px; color:var(--fg-secondary); }
.int-dl dd{ margin:0; flex:1 1 180px; color:var(--fg-secondary); word-break:keep-all; }
.int-table-wrap{ overflow-x:auto; }
.int-table{ width:100%; border-collapse:collapse; font-size:.8125rem; }
.int-table th,.int-table td{ padding:8px 10px; border-bottom:1px solid var(--border-tertiary); text-align:left; color:var(--fg-secondary); white-space:nowrap; }
.int-table th{ color:var(--fg-primary); font-weight:700; }
.int-caution{ margin-top:14px; border:1px solid var(--border-secondary); border-left:3px solid var(--bg-brand); border-radius:12px; background:var(--bg-surface-plain); padding:14px 16px; }
.int-caution ul{ margin:0; padding-left:18px; }
.int-caution li{ font-size:.8125rem; line-height:1.7; color:var(--fg-secondary); word-break:keep-all; }

.int-state{ margin-top:20px; border:1px dashed var(--border-primary); border-radius:16px; background:var(--bg-surface-subtle); padding:20px; font-size:.875rem; line-height:1.7; color:var(--fg-secondary); }

/* ── 하단 고정 요약바 ── */
/* 🔴 모바일 하단 탭바(--cs-tabbar-h 60px) 위에 앉힌다. ≥768 에서 그 토큰이 0 이 되어 화면 바닥에 붙는다. */
.int-summary{ position:fixed; left:0; right:0; bottom:var(--cs-tabbar-h,0px); z-index:40; border-top:1px solid var(--border-secondary); background:var(--bg-surface-plain); box-shadow:0 -8px 24px rgb(var(--cs-shadow-rgb) / .08); padding:12px 0 calc(12px + env(safe-area-inset-bottom)); }
.int-summary__inner{ width:100%; max-width:1024px; margin:0 auto; padding:0 20px; }
.int-summary__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px; margin:0 0 8px; }
.int-summary__title{ margin:0; font-size:.8125rem; font-weight:700; color:var(--fg-secondary); }
.int-summary__pick{ margin:0; font-size:.8125rem; color:var(--fg-secondary); word-break:keep-all; }
.int-rows{ margin:0 0 10px; }
.int-rows > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:4px 0; font-size:.8125rem; }
.int-rows dt{ color:var(--fg-secondary); word-break:keep-all; }
.int-rows dd{ margin:0; color:var(--fg-secondary); font-weight:400; text-align:right; }
.int-rows .int-row--base dt{ color:var(--fg-secondary); font-weight:700; }
.int-rows .int-row--base dd{ color:var(--fg-primary); font-size:1.25rem; font-weight:700; }
.int-rows .int-row--gift dt{ color:var(--fg-brand); font-weight:700; }
.int-rows .int-row--gift dd{ color:var(--fg-brand); font-weight:700; }
.int-rows .int-value--consult{ color:var(--fg-secondary); font-weight:400; }
.int-summary__ctas{ display:flex; gap:8px; }
.int-summary__ctas .btn{ flex:1 1 0; }
.int-summary__foot{ margin:8px 0 0; font-size:.6875rem; line-height:1.5; color:var(--fg-secondary); word-break:keep-all; }

@media (min-width:768px){
  :root{ --int-summary-h:132px; }   /* 자리표시 · internet.js 가 실측 px 로 덮어쓴다(위 :root 주석) */
  .int-carriers{ grid-template-columns:repeat(4,1fr); }
  .int-select{ padding:24px 28px; }
  .int-hero{ padding:32px 0 8px; }
  .int-sec{ padding:56px 0 0; }
  .int-scroller__arrow{ display:flex; }
  .int-scroller{ padding-inline:54px; }   /* 버튼 44 + 간격 10 — 화살표가 카드를 덮지 않게 비워 두는 폭 (2026-09-14 I-40: 36 → 44 터치 타깃) */
  /* 참고 사이트 요약바 배치: 왼쪽 제목·선택요약 · 가운데 금액 4칸(라벨 위 · 값 아래) · 오른쪽 버튼 2개 */
  .int-summary__inner{ display:grid; grid-template-columns:minmax(170px,210px) 1fr minmax(250px,290px); align-items:center; gap:20px; }
  .int-summary__head{ display:block; margin:0; }
  .int-rows{ display:flex; flex-wrap:wrap; gap:2px 28px; margin:0; }
  .int-rows > div{ display:block; padding:0; }
  .int-rows dt{ display:block; font-size:.75rem; white-space:nowrap; }
  .int-rows dd{ display:block; text-align:left; white-space:nowrap; }
  .int-summary__ctas{ display:flex; gap:8px; }
  .int-summary__foot{ grid-column:1 / -1; margin:6px 0 0; }
}
@media (min-width:1024px){
  .internet-page .int-inner{ padding:0 20px; }
  .int-sec{ padding:88px 0 0; }
  .int-rows > div{ font-size:.875rem; }
}
@media (prefers-reduced-motion:reduce){
  .int-scroller__track{ scroll-behavior:auto; }
  /* 상태 변화는 남기고 움직임만 없앤다 — 선택된 카드가 어느 것인지는 여전히 보여야 한다 */
  .int-card{ transition:none; }
  .int-card:hover,
  .int-card:active{ transform:none; }
}

/* ── 🔴 2026-09-13 임무 ④ 마감 라운드 — 거친 포인터(휴대폰) 터치 타깃 44 ──────────────
   qa-390-probe (c) 실측: .int-crumb a 가 11×21 · 52×21 이었다(이 빵부스러기에는 크기 규칙이 아예 없었다).
   catalog.css 의 .cat-crumb a 와 같은 방식으로 맞춘다 — 데스크톱은 그대로다. */
@media (hover:none){
  .int-crumb a{ display:inline-flex; align-items:center; min-height:var(--cs-hit); min-width:var(--cs-hit); }
}