/* ============================================================
   homepage/css/style.css — 쇼피스토 홈페이지 v1 (홈/제품 소개)
   ── 팔레트: 다크 네이비 배경 + 그린 accent (판매배포 §7-2 페이지①)
   ── 순수 정적 CSS. 전처리기·프레임워크·빌드 스텝 없음(판매배포 §7-1).
   🔴 ui/css/app.css(오프라인 exe 앱 셸, 쿨라이트 팔레트)와 무관·미참조.
      변수명이 겹쳐 보여도 값이 정반대이므로 두 파일을 함께 로드하지 않는다.
   🔴 색상 리터럴은 아래 :root 블록 안에만 존재한다. 규칙 본문은 var(--…)만 쓴다.

   [폰트 로딩 전략 — 가정 A5 실측 결과]
   Pretendard v1.3.9 CDN(static/pretendard.css)을 2026-07-30 실측한 결과
   9개 @font-face 전부에 `font-display: swap`이 포함돼 있다. 따라서 이 파일에서
   font-display를 오버라이드하지 않는다. CDN 차단·장애 시를 대비해
   --font-sans 에 시스템 한글 폴백(Malgun Gothic / Apple SD Gothic Neo)을 필수로 둔다.
   후속(회귀 R3): woff2 self-host + CSP font-src 정합 검토.
   ============================================================ */

/* ---- 1. 디자인 토큰 ------------------------------------------------ */
:root{
  /* 색 */
  --bg:#0e1a33;
  --text:#e8ecf3;
  --muted-1:#a8b2c4;                    /* 상급: 히어로 부제·섹션 부제 (8.1:1) */
  --muted-2:#8892a4;                    /* 중급: 카드 설명 (5.5:1) */
  --muted-3:#7d879a;                    /* 최하급: 잔글씨 전용 ≥14px (4.8:1) */
  --accent:#39ff9d;
  --accent-text:#0e1a33;
  --accent-border:#39ff9d55;
  --accent-soft:#39ff9d22;
  --card-bg:rgba(255,255,255,0.03);
  --card-border:rgba(255,255,255,0.08);
  --header-bg:rgba(14,26,51,0.9);
  --slot-border:rgba(255,255,255,0.1);
  --ghost-border:rgba(255,255,255,0.16);

  /* 모양 */
  --radius-card:10px;
  --radius-btn:6px;
  --radius-logo:6px;

  /* 타이포 */
  --font-sans:Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;

  /* 레이아웃 (색이 아닌 수치 토큰 — 반복 상수 제거용) */
  --container-max:1120px;
  --container-pad:24px;
}

/* ---- 2. 기본 ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* sticky 헤더에 앵커 제목이 가려지지 않도록 여유를 준다 */
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  /* 한글 가독성: 어절 단위 줄바꿈 + 초장문 토큰만 강제 분리 */
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease, filter .18s ease, transform .18s ease;
}

/* 모든 인터랙티브 요소에 보이는 포커스 링(키보드 순회) */
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

/* ---- 3. 레이아웃 유틸 ---------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.section{padding:96px 0}

/* 특장점·가격 섹션 구분선 */
.section-ruled{
  border-top:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
}

/* kicker는 heading이 아니다(계층 오염 방지) */
.kicker{
  margin-bottom:14px;
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
}

.section-title{
  font-size:32px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
}

.lead{
  margin-top:18px;
  max-width:56ch;
  color:var(--muted-1);
  font-size:16.5px;
  line-height:1.75;
}

/* 잔글씨 — --muted-3 은 대비 여유가 작아 14px 이상에서만 사용한다 */
.fineprint{
  color:var(--muted-3);
  font-size:14px;
  line-height:1.7;
}

/* ---- 4. 버튼 · 링크 ------------------------------------------------ */
.btn{
  display:inline-block;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  font-size:15px;
  font-weight:700;
  text-align:center;
}

.btn-solid{
  background:var(--accent);
  color:var(--accent-text);
}
.btn-solid:hover{
  filter:brightness(1.07);
  transform:translateY(-1px);
}

.btn-ghost{
  background:transparent;
  border-color:var(--ghost-border);
  color:var(--text);
}
.btn-ghost:hover{
  border-color:var(--accent-border);
  color:var(--accent);
}

.btn-sm{padding:10px 16px;font-size:14px}

.text-link{color:var(--muted-1);font-size:15px;font-weight:600}
.text-link:hover{color:var(--text)}

.arrow-link{
  display:inline-block;
  margin-top:26px;
  color:var(--accent);
  font-size:15px;
  font-weight:700;
}
.arrow-link:hover{filter:brightness(1.12);transform:translateX(2px)}

/* ---- 5. 헤더 (sticky) ---------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--header-bg);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-border);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:28px;
  min-height:66px;
}

.brand{display:flex;align-items:center;gap:9px}

/* 로고마크: CSS만(이미지·SVG 파일 0). Claude Design "아이콘 디자인.dc.html" 마스터 마크와 동형 —
   그라데이션 150deg(--accent→--accent-text, 파비콘과 동일 색) + 흰색 "S" 글리프(::before, 마크업 변경 0). */
.logomark{
  flex:none;
  width:24px;
  height:24px;
  border-radius:var(--radius-logo);
  background:linear-gradient(150deg, var(--accent), var(--accent-text));
  display:flex;
  align-items:center;
  justify-content:center;
}

.logomark::before{
  content:"S";
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:800;
  color:#fff;
}

.brand-name{font-size:17px;font-weight:800;letter-spacing:-.01em}

.brand-sub{
  padding-left:9px;
  border-left:1px solid var(--card-border);
  color:var(--muted-2);
  font-size:13.5px;
  font-weight:600;
}

.site-nav{margin-left:auto}
.nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.nav-link{color:var(--muted-1);font-size:15px;font-weight:600}
.nav-link:hover{color:var(--text)}

.header-actions{display:flex;align-items:center;gap:18px}

/* ---- 6. 히어로 ----------------------------------------------------- */
.hero{padding:88px 0 104px}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}

.hero-copy{min-width:0}

.badge{
  display:inline-block;
  margin-bottom:26px;
  padding:7px 14px;
  border:1px solid var(--accent-border);
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:13.5px;
  font-weight:700;
}

.hero-copy h1{
  font-size:44px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.025em;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.hero-copy .fineprint{margin-top:22px}

/* ---- 7. 이미지 자리표시 (실제 스크린샷 도착 시 교체) ---------------- */
.shot{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  /* 카드 톤과 구분되도록 점선 테두리 + accent 옅은 배경 */
  border:1px dashed var(--slot-border);
  border-radius:var(--radius-card);
  background:var(--accent-soft);
  text-align:center;
}

/* 🔴 글자색은 반드시 --muted-1 이다. --muted-2 는 .shot 의 --accent-soft 틴트 배경에서
   AA(4.5:1) 미달이다 — 직접 배치(랜딩, --bg 위 합성 #143941) 3.96:1 · 카드 중첩(설치 안내,
   .ins-step 안 합성 #1a3f46) 3.63:1, 둘 다 미달. --muted-1 은 각각 5.81:1·5.33:1로 통과한다
   (--placeholder(:587)를 실합성 배경 기준 재계산한 것과 같은 방식).
   [정합 · 2026-08-02] 원래 미달이던 걸 설치 안내 라운드가 `.ins-shot .shot-label` 스코프
   오버라이드로 그 페이지만 회피했었다(당시 랜딩은 검수·커밋 완료된 정본이라 손대지 않음).
   이번에 이 규칙 자체를 고쳐 오버라이드를 제거했다 — 두 페이지 다 이 규칙 하나로 통과한다. */
.shot-label{
  color:var(--muted-1);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
}

.shot-hero{min-height:400px}
.shot-screen{min-height:360px}

/* ---- 8. 신뢰 스트립 ------------------------------------------------ */
.trust{
  border-top:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
}

.trust-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px 28px;
  padding:22px 0;
}

.trust-list li{
  position:relative;
  padding-left:16px;
  color:var(--muted-1);
  font-size:14.5px;
  font-weight:600;
}

.trust-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--accent);
}

/* ---- 9. 공통 카드 -------------------------------------------------- */
.step,.feature,.plan{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  transition:border-color .18s ease, transform .18s ease;
}
.step:hover,.feature:hover,.plan:hover{
  border-color:var(--accent-border);
  transform:translateY(-2px);
}

.card-title{font-size:16.5px;font-weight:700;letter-spacing:-.01em}

.card-desc{
  margin-top:9px;
  color:var(--muted-2);
  font-size:14.5px;
  line-height:1.7;
}

/* ---- 10. 사용 흐름 ------------------------------------------------- */
.step-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:44px;
}

.step{padding:24px 20px}

.step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-bottom:16px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:14px;
  font-weight:800;
}

/* ---- 11. 특장점 ---------------------------------------------------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:44px;
}

.feature{padding:28px 24px}

.feature-num{
  display:block;
  margin-bottom:18px;
  color:var(--accent);
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
}

/* ---- 12. 실제 화면 ------------------------------------------------- */
.screen-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:56px;
  align-items:center;
}

.screen-copy{min-width:0}

/* ---- 13. 가격 ------------------------------------------------------ */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:44px;
}

.plan{padding:26px 22px}

/* 12개월 강조 */
.plan-featured{
  position:relative;
  border-color:var(--accent-border);
  background:var(--accent-soft);
}

/* '추천'은 실제 텍스트 노드다(CSS content 미사용 — 스크린리더 노출 유지) */
/* 카드 문서 흐름 밖에 띄워 나머지 3장과 본문 높이를 맞춘다 */
.plan-flag{
  position:absolute;
  top:-11px;
  left:20px;
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-text);
  font-size:12.5px;
  font-weight:800;
}

.plan-name{color:var(--muted-1);font-size:15px;font-weight:700}

.plan-price{
  margin-top:10px;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.plan-unit{
  margin-left:2px;
  color:var(--muted-2);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
}

.plan-save{margin-top:10px;color:var(--muted-1);font-size:14px;font-weight:700}
.plan-featured .plan-save{color:var(--accent)}

.plan-term{
  margin-top:6px;
  padding-top:14px;
  border-top:1px solid var(--card-border);
  color:var(--muted-2);
  font-size:14px;
}

.plan-grid + .fineprint{margin-top:26px}

/* ---- 14. 최종 CTA -------------------------------------------------- */
.final{padding:104px 0}
.final-inner{text-align:center}
.final-inner .lead{margin-inline:auto}
.final-inner .btn{margin-top:32px}

/* ---- 15. 푸터 ------------------------------------------------------ */
.site-footer{border-top:1px solid var(--card-border)}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px 32px;
  padding-top:56px;
  padding-bottom:48px;
}

/* 그리드 아이템 기본 min-width:auto 로 인한 오버플로 방지(.hero-copy·.screen-copy 와 동일) */
.footer-brand,.footer-col{min-width:0}

.footer-desc{
  margin-top:16px;
  color:var(--muted-2);
  font-size:14.5px;
  line-height:1.75;
}

.footer-title{
  margin-bottom:16px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
}

.footer-links{display:grid;gap:11px}
.footer-links a{color:var(--muted-1);font-size:14.5px}
.footer-links a:hover{color:var(--accent)}

.footer-bar{border-top:1px solid var(--card-border)}
.footer-bar .fineprint{padding:22px 0}

/* ---- 16. 반응형 — 860px ------------------------------------------- */
/* 히어로 h1 / 실제화면 h2 의 <br>만 해제한다.
   줄바꿈은 반응형, 카피 텍스트는 불변(문자열 변경 없음). */
@media (max-width:860px){
  .hero-copy h1 br,
  .screen-copy h2 br{display:none}

  .header-inner{
    flex-wrap:wrap;
    gap:12px 20px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .brand{order:1}
  .header-actions{order:2;margin-left:auto}
  .site-nav{order:3;flex-basis:100%;margin-left:0}
  .nav-list{gap:20px}

  .hero{padding:56px 0 64px}
  .hero-grid,
  .screen-grid{grid-template-columns:1fr;gap:36px}
  .hero-copy h1{font-size:32px}

  .section{padding:64px 0}
  .final{padding:72px 0}
  .section-title{font-size:26px}

  /* 2열/3열 → 1열 · 4열/5열 → 2열 */
  .trust-list,
  .step-grid,
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr}

  .step-grid,
  .feature-grid,
  .plan-grid{margin-top:32px}

  /* 자리표시 높이는 좁은 폭에서 축소(라벨 텍스트는 유지) */
  .shot-hero,
  .shot-screen{min-height:240px}

  .footer-grid{grid-template-columns:repeat(2,1fr);padding-top:44px}
}

/* ---- 17. 반응형 — 480px ------------------------------------------- */
@media (max-width:480px){
  :root{--container-pad:18px}

  .header-actions{flex-basis:100%;margin-left:0;gap:14px}
  .brand-sub{display:none}

  .hero-copy h1{font-size:28px}
  .cta-row .btn{flex:1 1 100%}

  /* 4열/5열 → 1열 · 푸터 4열 → 1열 */
  .trust-list,
  .step-grid,
  .plan-grid,
  .footer-grid{grid-template-columns:1fr}

  .shot-hero,
  .shot-screen{min-height:200px}

  .section-title{font-size:24px}
}

/* ---- 18. 모션 최소화 선호 ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a,.step,.feature,.plan{transition:none}
  .btn-solid:hover,
  .arrow-link:hover,
  .step:hover,
  .feature:hover,
  .plan:hover{transform:none}
}

/* ============================================================
   로그인 페이지 (login.html) 전용 — 2026-07-30 추가
   🔴 위 1~572줄(랜딩 index.html 규칙)은 수정하지 않는다. append-only.
   ── 아래 :root는 이 파일의 두 번째 :root 블록이다.
      파일 상단 규율(색 리터럴은 :root 안에만 · 규칙 본문은 var(--…)만)을 그대로 따른다.
   ── 로그인 전용 클래스는 전부 auth- 접두사다. 랜딩 셀렉터를 재정의하지 않는다.
      auth- 는 로그인 전용이 아니라 인증 계열 공용 이름이다(회귀 R9 —
      후속 signup·mypage가 같은 카드 레이아웃을 재사용한다).
   ============================================================ */

/* ---- 19. 로그인 토큰 (신규 7개 · 기존 :root에 없던 값만) ------------ */
:root{
  /* 색 */
  --placeholder:#8490ad;                 /* placeholder 전용 — 카드 실합성 배경(#1f2a41) 대비 4.50:1(AA). [정합·2026-07-30] #5c6478(2.43:1)에서 재계산 */
  --input-bg:rgba(255,255,255,0.04);     /* --card-bg(0.03)와 다른 값 */
  --input-border:rgba(255,255,255,0.34); /* 카드 배경 대비 3.06:1(WCAG 1.4.11). [정합·2026-07-30] .14(1.54:1 미달)에서 상향, 결정권자 Don */
  --social-bg:rgba(255,255,255,0.05);
  --social-border:rgba(255,255,255,0.12);
  --naver-bg:#03c75a;                    /* 🔴 네이버 고유 브랜드 컬러 — --accent(#39ff9d)로 치환 금지 */
  --naver-text:#03230f;                  /* 🔴 네이버 브랜드 규격 진한 그린 — --accent-text로 치환 금지 */
}

/* ---- 20. 로그인 레이아웃 ------------------------------------------- */
.auth-main{
  display:flex;
  align-items:center;
  justify-content:center;
  /* 헤더(.header-inner min-height 66px + .site-header 하단 보더 1px)를 뺀 나머지에서 세로 중앙.
     min-height라 카드가 더 길어지면 컨테이너가 늘어난다 — 짧은 뷰포트에서도 잘리지 않는다. */
  min-height:calc(100vh - 67px);
  min-height:calc(100dvh - 67px);   /* 모바일 주소창 변동 대응. 미지원 브라우저는 위 줄을 그대로 쓴다 */
  padding:72px var(--container-pad);
}

.auth-card{
  width:100%;
  max-width:420px;
  padding:36px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
}

/* 🔴 .step/.feature/.plan 과 달리 hover 리프트를 넣지 않는다 — 카드가 인터랙티브 요소가 아니다 */

.auth-card h1{
  font-size:27px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.02em;
}

.auth-sub{
  margin-top:9px;
  color:var(--muted-1);
  font-size:14.5px;
}

/* ---- 21. 소셜 로그인 (폼 위 2개가 전부 · 하단 중복 블록 없음) ------- */
.auth-social-group{
  display:grid;
  gap:10px;
  margin-top:24px;
}

.auth-social{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:13px 16px;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  font-size:14.5px;
  font-weight:700;
  text-align:center;
}

.auth-social-google{
  background:var(--social-bg);
  border-color:var(--social-border);
  color:var(--text);
}
.auth-social-google:hover{
  border-color:var(--accent-border);
  color:var(--accent);
}

.auth-social-naver{
  background:var(--naver-bg);
  border-color:var(--naver-bg);
  color:var(--naver-text);
}
.auth-social-naver:hover{filter:brightness(1.07)}

/* ---- 22. 구분선 ---------------------------------------------------- */
/* 라벨 '또는 이메일로 로그인'은 실제 텍스트 노드다(CSS content 미사용 —
   스크린리더 노출 유지 · .plan-flag 원칙 승계). 좌우 선만 장식으로 그린다. */
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
  color:var(--muted-2);
  font-size:13.5px;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--card-border);
}

/* ---- 23. 입력 필드 ------------------------------------------------- */
.auth-form{margin-top:22px}

.auth-field + .auth-field{margin-top:16px}

.auth-field label{
  display:block;
  margin-bottom:7px;
  color:var(--muted-1);
  font-size:14px;
  font-weight:600;
}

.auth-field input{
  width:100%;
  padding:13px 14px;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-btn);
  color:var(--text);
  /* input은 body 폰트를 상속하지 않는다 — 명시 필수 */
  font-family:inherit;
  font-size:15px;
  transition:border-color .18s ease;
}

.auth-field input::placeholder{color:var(--placeholder)}

/* 🔴 기존 :81 의 a:focus-visible 은 input에 적용되지 않는다.
   키보드 순회에서 입력 칸도 보이는 포커스 링을 갖도록 별도로 둔다. */
.auth-field input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent-border);
}

/* ---- 24. 액션 행 · 제출 · 하단 안내 -------------------------------- */
/* 자식은 '비밀번호를 잊으셨나요?' 링크 1개뿐이고 오른쪽으로 붙인다 */
.auth-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.auth-actions a{
  color:var(--muted-1);
  font-size:14px;
  font-weight:600;
}
.auth-actions a:hover{color:var(--text)}

/* .btn 은 inline-block 이라 전체 너비를 여기서 지정한다 */
.auth-submit{
  display:block;
  width:100%;
  margin-top:18px;
}

.auth-foot{
  margin-top:20px;
  color:var(--muted-2);
  font-size:14px;
  text-align:center;
}
.auth-foot a{color:var(--accent);font-weight:700}
.auth-foot a:hover{filter:brightness(1.12)}

/* ---- 25. 로그인 반응형 — 480px ------------------------------------ */
/* 기존 :542 블록은 수정하지 않는다 — --container-pad 18px 축소는 그 블록이 담당한다 */
@media (max-width:480px){
  .auth-main{padding:44px var(--container-pad)}
  .auth-card{padding:24px 20px}
  .auth-card h1{font-size:24px}
}

/* ---- 26. 로그인 모션 최소화 선호 ----------------------------------- */
/* 기존 :564 블록은 수정하지 않는다. 로그인 요소 중 <a>(소셜·제출·링크)의 transition과
   .btn-solid:hover 의 transform은 이미 그 블록이 해제한다.
   여기서는 그 블록이 다루지 못하는 input 의 transition만 추가로 해제한다. */
@media (prefers-reduced-motion:reduce){
  .auth-field input{transition:none}
}

/* ============================================================
   회원가입 페이지 (signup.html) 전용 — 2026-07-31 추가
   🔴 위 1~769줄(랜딩 index.html + 로그인 login.html 규칙)은 수정하지 않는다. append-only.
      특히 .auth-card{max-width:420px}(:610)는 로그인 페이지가 그 값으로 검수·커밋된
      규칙이므로 값을 바꾸지 않는다 — 폭 변경은 아래 --wide 모디파이어 병기로만 한다.
   ── 아래 :root는 이 파일의 세 번째 :root 블록이다.
      파일 상단 규율(색 리터럴은 :root 안에만 · 규칙 본문은 var(--…)만)을 그대로 따른다.
   ── 회원가입 전용 클래스도 auth- 접두사다(:580 회귀 R9 — auth-는 로그인 전용이 아니라
      인증 계열 공용 이름이며 signup이 같은 카드 레이아웃을 재사용한다).
      기존 auth- 규칙은 재사용만 하고 재정의하지 않는다. 랜딩 셀렉터도 재정의하지 않는다.
   ============================================================ */

/* ---- 27. 회원가입 토큰 (신규 1개 · 기존 :root에 없던 값만) --------- */
:root{
  /* 힌트 박스 전용 톤 — --card-bg(0.03)·--input-bg(0.04)와 겹치지 않는 값.
     [대비 계산 근거 · 아래 .auth-hint 글자색이 --muted-1 인 이유]
     힌트 박스의 실합성 배경 = --bg(#0e1a33) + --card-bg(0.03) + --hint-bg(0.05) ≈ #212c43.
     그 배경 대비 --muted-2(#8892a4) = 4.45:1 → AA(4.5:1) 미달,
                  --muted-1(#a8b2c4) = 6.53:1 → 통과.
     🔴 :23 에 적힌 --muted-2 의 5.5:1 은 --bg 직접 대비값이라 힌트 배경 위에서는 성립하지
     않는다. :587 --placeholder 를 카드 실합성 배경(#1f2a41) 기준으로 재계산한 것과 같은 방식. */
  --hint-bg:rgba(255,255,255,0.05);
}

/* ---- 28. 카드 폭 모디파이어 ---------------------------------------- */
/* 🔴 .auth-card{max-width:420px}(:610) 규칙 자체는 손대지 않는다.
   특정도가 .auth-card 와 동일(0,1,0)이므로 소스 순서로 이긴다 — 이 블록이 뒤에 있어 성립한다.
   따라서 !important 는 쓰지 않는다. signup.html 에서 두 클래스를 병기한다. */
.auth-card--wide{max-width:460px}

/* ---- 29. 사업자 정보 2열 그리드 ------------------------------------ */
/* .auth-biz-grid 자신은 .auth-field 가 아니라서 :691 인접 규칙이 적용되지 않는다
   → 앞 필드와의 세로 리듬(16px)을 여기서 직접 준다. */
.auth-biz-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px;
}

/* 🔴 반대로 그리드 '안'에서는 :691 .auth-field + .auth-field{margin-top:16px} 가 먹어
   2번째 칸만 16px 내려가 두 열의 상단선이 어긋난다. 그리드 안에서만 해제한다
   (특정도 0,3,0 > 0,2,0). */
.auth-biz-grid .auth-field + .auth-field{margin-top:0}

/* 좁은 폭에서는 2열 → 1열. 기존 480px 블록(:542 · :757)은 수정하지 않고 별도로 둔다
   (--container-pad 축소와 .auth-main/.auth-card 패딩은 그 블록들이 이미 담당한다).
   신규 미디어쿼리는 이 1건뿐이다. */
@media (max-width:480px){
  .auth-biz-grid{grid-template-columns:1fr}
}

/* ---- 30. 안내 힌트 박스 · 섹션 소제목 ------------------------------ */
/* 🔴 글자색은 반드시 --muted-1 이다. --muted-2 는 이 박스의 실합성 배경에서 4.45:1 로
   AA 미달이다(계산 근거는 위 27절 --hint-bg 주석).
   --muted-3(잔글씨 전용 ≥14px)도 13.5px 에는 부적합하다.
   .shot/.shot-label(:265) 재사용 금지 — 점선+accent 배경은 '스크린샷 자리표시' 신호라
   안내 힌트에 쓰면 의미가 뒤집힌다. */
.auth-hint{
  /* 아래 16px = 뒤따르는 .auth-field 의 리듬 보전(:691 인접 규칙이 적용되지 않는 구간) */
  margin:12px 0 16px;
  padding:12px 14px;
  background:var(--hint-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-btn);
  color:var(--muted-1);
  font-size:13.5px;
  line-height:1.55;
}

/* 계정 정보 ↔ 사업자 정보 구획선(460px 카드에 필드가 6개라 구획이 필요하다).
   🔴 .kicker(:104) 재사용 금지 — accent 색 + 큰 자간의 랜딩 섹션 아이브로우 전용이다. */
.auth-section-label{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--card-border);
  color:var(--text);
  font-size:14.5px;
  font-weight:800;
  letter-spacing:-.01em;
}

/* ---- 31. 약관 동의 체크박스 ---------------------------------------- */
/* 🔴 color-scheme:dark 를 선언하지 않는다. 선언하지 않아야 UA 가 체크박스를 라이트 스킴으로
   렌더해 흰 박스 + 회색 테두리가 되고, 다크 카드 위에서 미체크 상태의 경계가 뚜렷하다.
   color-scheme:dark 를 넣으면 미체크 상태가 다크-온-다크가 되어 경계가 사라진다.
   accent-color 는 '체크된' 상태의 채움색만 바꾸므로 이 전제와 충돌하지 않는다.
   네이티브 체크박스에 border/box-shadow 를 강제하는 방식은 브라우저별 렌더가 불안정해 쓰지 않는다. */
.auth-terms{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.auth-terms label{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted-1);
  font-size:14px;
  cursor:pointer;
}

.auth-terms input[type="checkbox"]{
  flex:0 0 auto;   /* 라벨이 2줄로 접혀도 체크박스가 찌그러지지 않는다 */
  width:17px;
  height:17px;
  margin:0;
  accent-color:var(--accent);
  cursor:pointer;
}

/* 🔴 :81 의 a:focus-visible 은 input 에 적용되지 않는다.
   :718 이 입력 칸에 준 것과 같은 처리를 체크박스에도 준다(키보드 순회에서 보이는 포커스 링). */
.auth-terms input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* 문장 안에 놓이는 약관·처리방침 링크. 밑줄로 링크임을 표시한다. */
.auth-terms a{
  color:var(--muted-1);
  text-decoration:underline;
}
.auth-terms a:hover{color:var(--text)}

/* ============================================================
   문서 페이지 (terms.html · privacy.html) 전용 — 2026-07-31 추가
   🔴 위 1~895줄(랜딩 index.html + 로그인 login.html + 회원가입 signup.html 규칙)은
      수정하지 않는다. append-only — 삭제·변경 라인 0.
   ── 아래 :root는 이 파일의 네 번째 :root 블록이다.
      파일 상단 규율(색 리터럴은 :root 안에만 · 규칙 본문은 var(--…)만)을 그대로 따른다.
   ── 문서 전용 클래스는 전부 doc- 접두사다. 랜딩·auth 셀렉터를 재정의하지 않는다.
      .site-header/.container/.brand/.site-footer/.footer-* 는 재사용만 한다.
   ============================================================ */

/* ---- 32. 문서 페이지 토큰 (신규 값만 · 기존 :root에 없던 값) -------- */
:root{
  /* 본문 텍스트 컬럼 폭 — 랜딩의 --container-max(1120px)와 별개다.
     법률 문서는 한 줄이 길면 행 추적이 어려워 좁은 컬럼을 따로 둔다. */
  --doc-max:820px;

  /* [정합 · 2026-08-02] 초안 배너 전용 색 토큰 5개(경고 톤 3 · 안내 톤 2)를 여기서 삭제했다 —
     terms·privacy 두 문서가 배너를 걷어내 참조가 0이 됐다(경위는 34절 톰스톤).
     🔴 설계 근거는 보존한다: 경고 톤에 --accent(그린)를 쓰지 않은 것은 이 사이트에서 그린이
        '정상·강조' 신호라 "초안·미확정 경고"에 쓰면 의미가 뒤집히기 때문이다(그래서 노랑 계열).
        안내 톤은 배경·테두리만 신규 토큰이고 글자색은 기존 --accent 재사용이었다(41절이 인용). */

  /* 표 — 0.06 은 --card-bg(0.03)·--input-bg(0.04)·--hint-bg(0.05) 어느 것과도 겹치지 않는 값 */
  --doc-th-bg:rgba(255,255,255,0.06);
  --doc-cell-border:rgba(255,255,255,0.10);

  /* 강조 박스 */
  --doc-box-bg:rgba(255,255,255,0.045);
  --doc-formula-bg:rgba(57,255,157,0.07);

  /* [TBD] 자리표시 · '법무 검토 후 확정' 배지 공용 톤.
     🔴 회색(--muted-3)으로 숨기지 않는다 — 미기재·미확정 항목이 조용히 배포되는 것을 막는 신호다.
     [대비 계산] --doc-flag(#ffd166): 실합성 배경(#2b3039) 대비 8.9:1 · --bg 직접 대비 12.0:1 → AA 통과. */
  --doc-flag:#ffd166;
  --doc-flag-bg:rgba(255,209,102,0.12);
  --doc-flag-border:rgba(255,209,102,0.45);
}

/* ---- 33. 문서 레이아웃 --------------------------------------------- */
/* 🔴 .doc-main 자신이 중앙 정렬 컬럼이다 — .container 를 겹쳐 쓰지 않는다.
   초안 배너가 <main>의 '첫 자식'이어야 스크롤 없이 보이므로(법적 고지 요건),
   배너를 .doc-wrap 안으로 넣지 않고 .doc-main 직속에 둔다. */
.doc-main{
  width:100%;
  max-width:calc(var(--doc-max) + var(--container-pad) * 2);
  margin-inline:auto;
  padding:40px var(--container-pad) 88px;
}

.doc-wrap{margin-top:36px}

.doc-head{
  padding-bottom:26px;
  border-bottom:1px solid var(--card-border);
}

/* .section-title(:112) 재사용 금지 — 그쪽은 섹션 h2 전용이고 문서 h1 은 상단 여백 규칙이 다르다 */
.doc-title{
  font-size:32px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
}

.doc-meta{
  margin-top:16px;
  color:var(--muted-1);
  font-size:15px;
  line-height:1.9;
}
.doc-meta strong{color:var(--text)}

/* ---- 34. (삭제됨) 초안 배너 — 2026-08-02 ---------------------------- */
/* 이 절의 규칙 7개를 삭제했다. terms.html(b175ea5)·privacy.html(0e21073) 이 각각 준비중·초안
   고지 상자를 걷어내 확정 문서로 전환하면서 HTML/JS 참조가 0이 됐다. 32절의 전용 색 토큰 5개와
   40절 480px 블록의 오버라이드 1줄도 같은 이유로 함께 걷어냈다.
   🔴 절 번호는 비우지 않는다 — 이 파일이 절 번호로 상호참조하고 있어(41·49·51·66절) 재번호는
      범위 밖 대량 변경이 된다. 그래서 규칙만 지우고 절은 톰스톤으로 남긴다.
   🔴 보존하는 설계 원칙: "배너는 본문보다 약하면 안 되는 고지다" — 글자색을 --muted-* 가 아니라
      --text 로 두는 근거다. 51절 해지 카드 안내문이 지금도 이 원칙을 승계하고 있다.
   [정합 · 2026-08-02] 이 파일은 append-only 규율이고 이번 삭제는 명시적으로 승인된 예외다
   (46e3da0 의 .shot-label 대비 정정에 이은 두 번째 예외). 위쪽 append-only 가드 문구는
   46e3da0 과 같은 방식으로 손대지 않고, 예외 기록은 이 현장 주석 한 곳에 남긴다. */

/* ---- 35. 목차 ------------------------------------------------------ */
.doc-toc{
  margin-top:32px;
  padding:20px 22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
}

.doc-toc-title{
  color:var(--text);
  font-size:14.5px;
  font-weight:800;
  letter-spacing:-.01em;
}

.doc-toc-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 20px;
  margin-top:14px;
}
.doc-toc-list a{color:var(--muted-1);font-size:14.5px}
.doc-toc-list a:hover{color:var(--accent)}

/* ---- 36. 조항 본문 -------------------------------------------------- */
.doc-article{margin-top:40px}

.doc-art-title{
  padding-bottom:10px;
  border-bottom:1px solid var(--card-border);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
}

.doc-sub{
  margin-top:26px;
  color:var(--text);
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.01em;
}

.doc-p{
  margin-top:14px;
  color:var(--muted-1);
  font-size:15.5px;
  line-height:1.85;
}

/* 🔴 :72 의 ul,ol{padding:0;list-style:none} 로 마커가 죽어 있다.
   전역 규칙을 수정하지 않고 문서 스코프 안에서만 되살린다(법조문은 항 번호가 의미를 갖는다). */
.doc-list,.doc-olist{
  margin-top:14px;
  padding-left:22px;
  color:var(--muted-1);
  font-size:15.5px;
  line-height:1.85;
}
.doc-list{list-style:disc}
.doc-olist{list-style:decimal}
.doc-list li + li,.doc-olist li + li{margin-top:9px}
.doc-list .doc-list,.doc-olist .doc-list,.doc-olist .doc-olist{margin-top:9px}

/* 본문 강조 — <strong> 은 본문(--muted-1)보다 밝게 올린다 */
.doc-p strong,.doc-list strong,.doc-olist strong,
.doc-note strong,.doc-table td strong{color:var(--text)}

/* 본문 링크 — 밑줄로 링크임을 표시한다(문서 페이지는 링크 밀도가 낮아 색만으로는 약하다) */
.doc-p a,.doc-list a,.doc-olist a,.doc-note a{
  color:var(--accent);
  text-decoration:underline;
}
.doc-p a:hover,.doc-list a:hover,.doc-olist a:hover,.doc-note a:hover{filter:brightness(1.12)}

/* ---- 37. 표 (가로 스크롤) ------------------------------------------ */
/* 🔴 표는 반드시 .doc-table-wrap 으로 감싼다 — 좁은 화면에서 페이지 전체(body)가 아니라
   표 안에서만 가로 스크롤되게 한다. */
.doc-table-wrap{
  margin-top:16px;
  overflow-x:auto;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
}

.doc-table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
  line-height:1.65;
}

.doc-caption{
  padding:12px 14px;
  border-bottom:1px solid var(--doc-cell-border);
  color:var(--muted-2);
  font-size:13.5px;
  text-align:left;
}

.doc-table th,.doc-table td{
  padding:11px 14px;
  border-bottom:1px solid var(--doc-cell-border);
  text-align:left;
  vertical-align:top;
}

.doc-table thead th{
  background:var(--doc-th-bg);
  color:var(--text);
  font-weight:700;
  white-space:nowrap;
}

.doc-table td{color:var(--muted-1)}

.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td{border-bottom:0}

/* 금액 열 — 자릿수 비교가 목적이라 우측 정렬 + 줄바꿈 금지 */
.doc-num{text-align:right;white-space:nowrap}

/* ---- 38. 강조 박스 -------------------------------------------------- */
.doc-note{
  margin-top:16px;
  padding:14px 16px;
  background:var(--doc-box-bg);
  border:1px solid var(--card-border);
  border-left:3px solid var(--accent-border);
  border-radius:var(--radius-btn);
  color:var(--muted-1);
  font-size:14.5px;
  line-height:1.8;
}
.doc-note + .doc-note{margin-top:12px}

.doc-formula{
  margin-top:16px;
  padding:18px 20px;
  background:var(--doc-formula-bg);
  border:1px solid var(--accent-border);
  border-radius:var(--radius-card);
  color:var(--text);
  font-size:16px;
  font-weight:700;
  line-height:1.9;
  text-align:center;
}

.doc-formula-note{
  display:block;
  margin-top:8px;
  color:var(--muted-1);
  font-size:13.5px;
  font-weight:400;
}

/* '법무 검토 후 확정' 인라인 배지.
   🔴 문구는 반드시 HTML 텍스트로 둔다 — CSS content: 로 넣으면 스타일 미로드 시 사라져
   법적으로 필요한 '미확정' 고지가 사용자에게 전달되지 않고, 검수 grep 에도 걸리지 않는다. */
.doc-pending{
  display:inline-block;
  padding:1px 9px;
  background:var(--doc-flag-bg);
  border:1px solid var(--doc-flag-border);
  border-radius:999px;
  color:var(--doc-flag);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

/* ---- 39. TBD 자리표시 · 사업자 정보 -------------------------------- */
/* 🔴 회색으로 숨기지 않는다. 미기재 항목이 조용히 배포되는 것을 막는 것이 이 스타일의 목적이다.
   점선 테두리로 '아직 채워지지 않은 칸'임을 시각적으로도 알린다. */
.doc-tbd{
  display:inline-block;
  padding:1px 9px;
  background:var(--doc-flag-bg);
  border:1px dashed var(--doc-flag-border);
  border-radius:var(--radius-btn);
  color:var(--doc-flag);
  font-size:13.5px;
  font-weight:700;
}

/* 사업자 정보 · 개인정보보호책임자 표 — thead 없이 행 머리글(th scope=row)만 쓰는 2열 표.
   .doc-table th(0,1,1) 와 특정도가 같아 소스 순서로 이긴다 → !important 불필요. */
.doc-bizinfo th{
  width:190px;
  background:var(--doc-th-bg);
  color:var(--text);
  font-weight:700;
  white-space:nowrap;
}

/* ---- 40. 문서 반응형 — 860 / 480 ----------------------------------- */
/* 기존 :500 · :542 · :757 · :819 미디어 블록은 수정하지 않고 별도로 둔다. */
@media (max-width:860px){
  .doc-main{padding:32px var(--container-pad) 64px}
  .doc-title{font-size:26px}
  .doc-art-title{font-size:18.5px}
  .doc-toc-list{grid-template-columns:1fr}
}

@media (max-width:480px){
  .doc-main{padding:24px var(--container-pad) 52px}
  .doc-wrap{margin-top:28px}
  .doc-title{font-size:23px}
  /* [정합 · 2026-08-02] 초안 배너 오버라이드 1줄은 34절 규칙 삭제와 함께 걷어냈다. */
  .doc-toc{padding:16px 16px}
  .doc-p,.doc-list,.doc-olist{font-size:15px}
  .doc-table{font-size:13.5px}
  .doc-table th,.doc-table td{padding:9px 11px}
  .doc-formula{padding:14px 14px;font-size:14.5px}
  /* 라벨 열 고정폭 해제 — 좁은 화면에서 값 열이 짓눌리는 것을 막는다 */
  .doc-bizinfo th{width:auto}
}

/* ============================================================
   마이페이지 (mypage.html) 전용 — 2026-07-31 추가
   🔴 위 1~1225줄(랜딩 index.html + 로그인 login.html + 회원가입 signup.html +
      문서 terms.html·privacy.html 규칙)은 수정하지 않는다. append-only — 삭제·변경 라인 0.
   ── 아래 :root는 이 파일의 다섯 번째 :root 블록이다.
      파일 상단 규율(색 리터럴은 :root 안에만 · 규칙 본문은 var(--…)만)을 그대로 따른다.
   ── 마이페이지 전용 클래스는 전부 mp- 접두사다. 랜딩·auth·doc 셀렉터를 재정의하지 않는다.
      .site-header/.container/.header-inner/.brand/.logomark/.brand-name/.text-link/
      .btn·.btn-solid·.btn-ghost·.btn-sm/.arrow-link/.auth-field 는 재사용만 한다.
   ── 🔴 재사용 토큰 확인 (디자인 원본의 옛 값이 되살아나는 것을 막는다):
      --input-border 는 :589 의 rgba(255,255,255,0.34) 를 그대로 쓴다. 알파 .14 는 로그인
      라운드에서 WCAG 1.4.11 미달(1.54:1)로 폐기된 값이라 이 블록에 다시 넣지 않는다.
      🔴 위에서 폐기 알파를 앞자리 0 없이 적은 것은 :589 의 표기와 같은 이유다 —
         회귀 검수가 그 리터럴을 grep 할 때 '경고 주석'이 '실제 값'으로 잡히면 안 된다.
      --placeholder 도 :587 의 #8490ad 를 그대로 쓴다. 그 자리에서 밀려난 옛 값(2.43:1 미달)은
      같은 이유로 여기 다시 적지 않는다 — 폐기 헥사값이 이 파일에 남는 곳은 :587 의 근거 주석
      1곳뿐이어야 한다.
   ============================================================ */

/* ---- 41. 마이페이지 토큰 (신규 값만 · 기존 :root에 없던 값) --------- */
:root{
  /* 좌측 프로필 컬럼 폭 — 색이 아닌 수치 토큰(--container-max·--doc-max 와 같은 계열) */
  --mp-sidebar-w:280px;

  /* 해지 카드(위험 톤). 🔴 적색이라 기존 백색 오버레이(--card-bg 0.03 · --input-bg 0.04 ·
     --doc-box-bg 0.045 · --hint-bg 0.05 · --doc-th-bg 0.06)와 알파가 겹쳐 보여도 색이 달라
     충돌이 아니다. */
  --mp-danger-bg:rgba(255,80,80,0.04);
  --mp-danger-border:rgba(255,80,80,0.18);

  /* 🔴 해지 버튼 텍스트 — 디자인 원본의 #c94747 을 검증 없이 옮기지 않는다.
     [대비 계산] .mp-card--danger 는 .mp-card 의 background 를 '대체'하므로(51절)
     실합성 배경 = --bg(#0e1a33) + --mp-danger-bg(0.04) ≈ #181c34.
       #c94747 → 3.57:1  AA(4.5:1) 미달  ← 원본 값. 채택하지 않는다
       #e57373 → 5.60:1  AA 통과         ← 채택
     배경을 --card-bg(0.03) 위에 겹치는 해석으로 계산해도(≈ #1f233a)
       #c94747 → 3.30:1 미달 / #e57373 → 5.19:1 통과 로 결론이 같다.
     :587(--placeholder 재계산)과 같은 형식의 근거다. 32절 초안 배너 경고 톤 토큰의 대비 계산도
     같은 형식이었으나 2026-08-02 배너 삭제 때 그 토큰과 함께 없어졌다(34절 톰스톤). */
  --mp-danger-text:#e57373;

  /* 라이선스 키 전용 스택 — 색이 아닌 값 토큰. 마스킹 별표와 tail 4자의 자릿수를
     눈으로 세기 쉽도록 고정폭으로 둔다. */
  --mp-mono:ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

/* 🔴 상태 배지 색은 신규 토큰을 만들지 않는다 — 기존 --accent-soft/--accent-border/--accent
   와 --hint-bg/--card-border/--muted-1 을 규칙 본문에서 그대로 참조한다(49절).
   32절의 초안 배너 안내 톤 토큰이 배경·테두리만 신규로 두고 글자색은 기존 --accent 를 규칙
   본문에서 그대로 재사용했던 것과 같은 방식이다(그 토큰과 규칙은 2026-08-02 삭제 · 34절 톰스톤).
   🔴 --muted-3(#7d879a)은 이 페이지에서 쓰지 않는다 — 카드 실합성 배경(#152139)에서
      4.44:1 로 AA 미달이다(:24 의 4.8:1 은 --bg 직접 대비값이라 카드 위에서는 성립하지 않는다). */

/* ---- 42. 헤더 우측 정렬 -------------------------------------------- */
/* 🔴 .header-actions(:222) 자체는 수정하지 않는다 — :511 의 860px 블록이 이미
   .header-actions{order:2;margin-left:auto} 로 그 클래스를 쓰고 있다.
   .header-actions 에는 margin-left:auto 가 없고, index.html 에서는 앞의
   .site-nav{margin-left:auto}(:217)가 밀어줘서 우측에 붙는다. 내비가 없는 마이페이지에는
   그 밀어주기가 없으므로 아래 클래스를 병기해 우측 정렬을 준다. */
.mp-header-actions{margin-left:auto}

/* ---- 43. 마이페이지 레이아웃 --------------------------------------- */
/* 🔴 .mp-main 자신이 중앙 정렬 컬럼이다 — .container 를 겹쳐 쓰지 않는다(.doc-main :946 승계). */
.mp-main{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding:40px var(--container-pad) 88px;
}

/* .section-title(:112)·.doc-title(:961) 재사용 금지 — 각각 섹션 h2·문서 h1 전용 리듬이다 */
.mp-title{
  font-size:32px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
}

/* 좌 프로필 고정폭 + 우 카드 가변. minmax(0,1fr) 로 두어 표가 길어져도 열이 밀리지 않는다.
   align-items:start 로 좌측 카드가 우측 높이만큼 늘어나지 않게 한다. */
.mp-grid{
  display:grid;
  grid-template-columns:var(--mp-sidebar-w) minmax(0,1fr);
  gap:24px;
  margin-top:32px;
  align-items:start;
}

/* ---- 44. 좌측 프로필 카드 ------------------------------------------ */
.mp-profile{
  padding:26px 22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  text-align:center;
}

/* 이니셜 아바타 — 이미지·SVG 파일 0(.logomark :199 와 같은 방식) */
.mp-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border:1px solid var(--accent-border);
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:26px;
  font-weight:800;
}

.mp-profile-email{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  /* 긴 이메일이 280px 칸을 밀어내지 않도록 — body 의 word-break:keep-all(:66) 보완 */
  overflow-wrap:anywhere;
}

/* 배지는 inline-block 이라 가로 중앙은 .mp-profile 의 text-align 이 담당한다 */
.mp-profile .mp-badge{margin-top:10px}

/* 🔴 ul,ol 과 달리 hr 은 :71-72 리셋 대상이 아니라 UA 기본 스타일(음영 보더·마진)이 남아 있다 */
.mp-profile-divider{
  height:0;
  margin:20px 0;
  border:0;
  border-top:1px solid var(--card-border);
}

/* 280px 칸에서 라벨-값을 좌우로 벌리면 값이 짓눌린다 → 세로로 쌓는다 */
.mp-profile-row{
  display:grid;
  gap:4px;
  text-align:left;
}

/* ---- 45. 카드 공통 -------------------------------------------------- */
.mp-cards{display:grid;gap:20px}

/* 🔴 .auth-card(:608) 재사용 금지 — 420/460px 고정폭 인증 카드라 대시보드 폭과 맞지 않는다.
   .step/.feature/.plan(:320) 의 hover 리프트도 넣지 않는다(:617 원칙 — 카드 자체가
   인터랙티브 요소가 아니다). */
.mp-card{
  padding:24px 22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
}

/* 제목 + (있으면) 우측 버튼. 버튼이 없는 카드도 같은 구조를 써서 제목 리듬을 맞춘다. */
.mp-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 14px;
  margin-bottom:16px;
}

/* .card-title(:331) 재사용 금지 — 랜딩 카드 전용이고 .card-desc 와 짝을 이루는 리듬이다 */
.mp-card-title{
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-.01em;
}

/* ---- 46. 라벨-값 행 · 입력 · 버튼 배치 ------------------------------ */
.mp-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:4px 16px;
  padding:12px 0;
  border-top:1px solid var(--card-border);
}

/* 카드 제목행 바로 아래 첫 행은 윗선을 생략한다(.mp-card-head 가 이미 간격을 준다) */
.mp-card-head + .mp-row{
  padding-top:0;
  border-top:0;
}

.mp-row-label{
  color:var(--muted-1);
  font-size:14px;
  font-weight:600;
}

.mp-row-value{
  color:var(--text);
  font-size:15px;
  font-weight:600;
  overflow-wrap:anywhere;
}

/* 이메일 input + 우측 버튼 가로 배치. label 은 첫 행 전체를 차지한다.
   🔴 .auth-field(:693) 를 그대로 쓰지 않는 이유: 그쪽은 label+input 세로 스택 전용이라
      버튼을 옆에 둘 자리가 없다. 다만 토큰과 :focus-visible 처리는 :701-722 를 그대로 승계한다. */
.mp-inline-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px 10px;
}

.mp-inline-field label{
  grid-column:1 / -1;
  color:var(--muted-1);
  font-size:14px;
  font-weight:600;
}

.mp-inline-field input{
  width:100%;
  padding:13px 14px;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-btn);
  color:var(--text);
  /* input 은 body 폰트를 상속하지 않는다 — 명시 필수(:708 승계) */
  font-family:inherit;
  font-size:15px;
  transition:border-color .18s ease;
}

.mp-inline-field input::placeholder{color:var(--placeholder)}

/* 🔴 :81 의 a:focus-visible 은 input 에 적용되지 않는다 — :718 과 같은 처리를 여기에도 둔다. */
.mp-inline-field input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent-border);
}

.mp-inline-field + .mp-row{margin-top:6px}

.mp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

/* ---- 47. 카드 안내문 ------------------------------------------------ */
/* 🔴 글자색은 --muted-1 이다. --muted-2 는 이 박스의 실합성 배경
   (--bg + --card-bg 0.03 + --hint-bg 0.05 ≈ #212c43)에서 4.45:1 로 AA 미달이다
   (계산 근거는 :786-791 과 같은 배경). --muted-3 은 41절 주석대로 이 페이지에서 쓰지 않는다.
   🔴 .auth-hint(:829) 를 그대로 쓰지 않는 이유: margin 이 12px 0 16px 로 auth 폼 리듬에
      맞춰져 있어, 카드의 마지막 요소로 놓이면 아래 여백이 카드 패딩과 겹쳐 커진다.
   🔴 .shot/.shot-label(:265) 재사용 금지 — 점선+accent 배경은 '스크린샷 자리표시' 신호다.
   🔴 .doc-note(:1131) 재사용 금지 — 문서 페이지 전용이고 마이페이지는 문서가 아니다. */
.mp-note{
  margin-top:16px;
  padding:12px 14px;
  background:var(--hint-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-btn);
  color:var(--muted-1);
  font-size:13.5px;
  line-height:1.6;
}

.mp-card-head + .mp-note{margin-top:0}

/* ---- 48. 도매상 표 -------------------------------------------------- */
/* 🔴 표는 반드시 .mp-table-wrap 으로 감싼다 — 좁은 화면에서 페이지 전체(body)가 아니라
   표 안에서만 가로 스크롤되게 한다(.doc-table-wrap :1086 원칙 승계).
   🔴 .doc-table(:1093) 를 직접 재사용하지 않는다 — doc- 는 문서 페이지 전용 이름이고,
      이 표는 셀에 배지가 들어가 정렬(vertical-align)과 줄바꿈 규칙이 다르다. */
.mp-table-wrap{
  margin-top:16px;
  overflow-x:auto;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
}

.mp-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.6;
}

.mp-table th,.mp-table td{
  padding:11px 14px;
  border-bottom:1px solid var(--card-border);
  text-align:left;
  vertical-align:middle;
  /* 셀이 접히는 대신 .mp-table-wrap 안에서 가로 스크롤되게 한다 */
  white-space:nowrap;
}

/* 열 머리글 — 배경 채움 없이 색·굵기로만 구분한다(신규 배경 토큰을 만들지 않기 위함).
   --muted-2 는 카드 실합성 배경(#152139)에서 5.12:1 로 AA 통과다. */
.mp-table thead th{
  color:var(--muted-2);
  font-size:13.5px;
  font-weight:700;
}

/* 행 머리글 = 도매상명(scope="row") — 값 열보다 밝게 둔다 */
.mp-table tbody th{color:var(--text);font-weight:700}
.mp-table td{color:var(--muted-1)}

.mp-table tbody tr:last-child th,
.mp-table tbody tr:last-child td{border-bottom:0}

/* ---- 49. 상태 배지 -------------------------------------------------- */
/* 🔴 도매상 상태값 도메인은 3종이다 — 사용 / 신청중 / 만료 (수집기 §4-3:462).
   아래 모디파이어가 2개인 것은 이번 샘플이 「사용」·「신청중」만 쓰기 때문이며
   「만료」가 없다는 뜻이 아니다. 「만료」용 톤은 실데이터 배선 시 추가한다(YAGNI).
   🔴 .badge(:236) 재사용 금지 — margin-bottom:26px 가 붙어 있어 표 셀에서 행이 밀린다.
      대신 그 배지가 쓰는 토큰(--accent-soft/--accent-border/--accent)을 그대로 승계한다. */
.mp-badge{
  display:inline-block;
  padding:3px 10px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

/* 실합성 배경 ≈ #1a3e46 대비 --accent(#39ff9d) 8.71:1 → AA 통과 */
.mp-badge--ok{
  background:var(--accent-soft);
  border-color:var(--accent-border);
  color:var(--accent);
}

/* 실합성 배경 ≈ #212c43 대비 --muted-1(#a8b2c4) 6.53:1 → AA 통과 */
.mp-badge--neutral{
  background:var(--hint-bg);
  border-color:var(--card-border);
  color:var(--muted-1);
}

/* ---- 50. 라이선스 키 ------------------------------------------------ */
.mp-key-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* 🔴 읽기 전용 표시다 — input 이 아니므로 --input-bg/--input-border 를 쓰지 않는다
   (편집 가능한 칸으로 오해되지 않게 한다). */
.mp-key{
  padding:10px 14px;
  background:var(--hint-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-btn);
  color:var(--text);
  font-family:var(--mp-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
}

/* ---- 51. 위험(해지) 카드 -------------------------------------------- */
/* 🔴 .mp-card 의 background 를 '대체'한다(겹쳐 쌓지 않는다) — 41절 --mp-danger-text 의
   대비 계산이 이 전제 위에 서 있다. 특정도가 .mp-card 와 같아(0,1,0) 소스 순서로 이긴다.
   따라서 !important 는 쓰지 않는다. mypage.html 에서 두 클래스를 병기한다. */
.mp-card--danger{
  background:var(--mp-danger-bg);
  border-color:var(--mp-danger-border);
}

/* 🔴 이 카드의 안내문은 기획서가 요구하는 필수 고지다(판매배포 §7-4:465) — 본문보다 약하면
   안 되므로 --muted-1 이 아니라 --text 를 쓴다(34절 초안 배너의 "배너는 본문보다 약하면
   안 되는 고지다" 원칙 승계 — 규칙 자체는 2026-08-02 삭제됐고 원칙 문장만 그 절 톰스톤에
   남아 있다). 실합성 배경(≈ #23283e) 대비 --text 12.31:1 → AA 통과. */
.mp-card--danger .mp-note{color:var(--text)}

/* 해지 버튼 — .btn-ghost 위에 글자색만 덮는다.
   :hover 를 함께 두는 이유는 .btn-ghost:hover(:159)가 글자를 --accent(그린)로 바꿔
   위험 신호가 사라지기 때문이다. 특정도가 같아(0,2,0) 소스 순서로 이긴다.
   brightness 는 .btn-solid:hover(:150)·.arrow-link:hover(:176) 와 같은 관용구다. */
.mp-btn-danger{color:var(--mp-danger-text)}
.mp-btn-danger:hover{
  border-color:var(--mp-danger-border);
  color:var(--mp-danger-text);
  filter:brightness(1.12);
}

/* ---- 52. 마이페이지 반응형 — 860 / 480 ------------------------------ */
/* 기존 :500 · :542 · :757 · :819 · :1206 · :1213 미디어 블록은 수정하지 않고 별도로 둔다. */
@media (max-width:860px){
  .mp-main{padding:32px var(--container-pad) 64px}
  .mp-title{font-size:26px}
  /* 2열 → 1열. 좌측 프로필 카드가 우측 카드 묶음 위로 올라간다. */
  .mp-grid{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    margin-top:26px;
  }
}

@media (max-width:480px){
  .mp-main{padding:24px var(--container-pad) 52px}
  .mp-title{font-size:23px}
  .mp-profile,.mp-card{padding:20px 16px}

  /* 🔴 :545 가 .header-actions 에 flex-basis:100% 를 주어 링크가 한 줄을 통째로 차지한다.
     이 페이지의 헤더 우측에는 로그아웃 링크 1개뿐이라 그럴 이유가 없어 같은 줄로 되돌린다.
     특정도가 같아(0,1,0) 이 블록이 뒤에 있어 이긴다 — :545 자체는 수정하지 않는다. */
  .mp-header-actions{flex-basis:auto;margin-left:auto}

  /* 이메일 input + 수정 버튼: 좁은 폭에서는 세로로 쌓고 버튼을 왼쪽에 붙인다 */
  .mp-inline-field{grid-template-columns:minmax(0,1fr)}
  .mp-inline-field .btn{justify-self:start}
}

/* ---- 53. 마이페이지 모션 최소화 선호 -------------------------------- */
/* 기존 :564 · :767 블록은 수정하지 않는다. :566 의 a{transition:none} 이 카드 안 링크·버튼의
   transition 을, :570 이 .btn-solid:hover 의 transform 을 이미 해제한다.
   여기서는 그 블록들이 다루지 못하는 .mp-inline-field input 의 transition 만 해제한다
   (:768 이 .auth-field input 에 한 것과 같다). */
@media (prefers-reduced-motion:reduce){
  .mp-inline-field input{transition:none}
}

/* ============================================================
   다운로드 페이지 (download.html) 전용 — 2026-08-02 추가
   🔴 위 1~1649줄(랜딩 index.html + 로그인 login.html + 회원가입 signup.html +
      문서 terms.html·privacy.html + 마이페이지 mypage.html 규칙)은 수정하지 않는다.
      append-only — 삭제·변경 라인 0.
   ── 다운로드 전용 클래스는 전부 dl- 접두사다. 랜딩·auth·doc·mp 셀렉터를 재정의하지 않는다.
      .site-header/.container/.header-inner/.brand/.logomark/.brand-name/
      .auth-main/.auth-card/.auth-card h1/.btn·.btn-solid·.btn-ghost 는 재사용만 한다.
   🔴 .mp-*(마이페이지)·.doc-*(문서) 클래스는 재사용하지 않는다(:1233·:1497 규율).
      .mp-avatar·.mp-row 는 '수치와 구조'만 참고해 아래에서 dl- 로 동형 정의한다.
   ── 🔴 신규 색 토큰 0개 — 이 블록에는 :root 가 없다(페이지 블록 중 처음이다).
      --text(:21)·--muted-1(:22)·--muted-2(:23)·--accent(:25)·--card-border(:30)·
      --radius-card(:36)·--radius-btn(:37)·--hint-bg(:792) 를 그대로 참조한다.
   ── 🔴 신규 미디어쿼리 0개.
      :757(480px)이 .auth-main padding·.auth-card padding·.auth-card h1 24px 를 이미 축소하고,
      :564(모션 최소화)가 a{transition:none} 과 .btn-solid:hover{transform:none} 을 이미 해제한다.
      이 페이지의 인터랙티브 요소는 전부 <a> 이고 .btn-ghost:hover(:159)에는 transform 이 없다
      → 추가로 해제할 transition 이 없다(:767·:1647 이 input 때문에 필요했던 것과 다르다).
   ── 근거: 판매배포 §7-2 페이지②(D9 — 다운로드가 "직링크"에서 "회원가입 후"로 반전) · §7-1(코드서명 미보유).
   ============================================================ */

/* ---- 54. 카드 폭 모디파이어 ---------------------------------------- */
/* 🔴 .auth-card{max-width:420px}(:610)도 .auth-card--wide{460px}(:799)도 손대지 않는다.
   특정도가 .auth-card 와 동일(0,1,0)이므로 소스 순서로 이긴다 — 이 블록이 뒤에 있어 성립한다.
   따라서 !important 는 쓰지 않는다. download.html 에서 두 클래스를 병기한다(28절 --wide 선례). */
.auth-card--xl{max-width:520px}

/* ---- 55. 잠금 아이콘 ------------------------------------------------ */
/* [렌더 방식 근거 — 인라인 SVG 채택]
   디자인 원문의 "🔒 아이콘 + #a8b2c4 텍스트"는 두 요구가 서로 배타적이다.
   리터럴 🔒 는 Windows 에서 Segoe UI Emoji 컬러 글리프로 그려져 color 선언이 무시되고,
   --font-sans(:41)에는 이모지 폰트가 없어 렌더가 브라우저 최후폴백에 의존한다.
   → 인라인 SVG + stroke:currentColor 로 --muted-1(#a8b2c4)을 정확히 적용한다.
   🔴 :198 "로고마크: CSS만(이미지·SVG 파일 0)" 주석은 사실로 유지된다 — 늘어난 것은
      마크업 안의 <svg> 요소이지 에셋 파일이 아니다(파일 추가 0건).
   구조(원형·flex 중앙·margin:0 auto)는 .mp-avatar(:1324)를 그대로 본떴고 치수와 색만 바꿨다 —
   64px·accent 톤 대신 56px·중립 톤이며, 접두사 규율에 따라 이름만 dl- 로 새로 둔다. */
.dl-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 18px;
  border-radius:999px;
  background:var(--hint-bg);
  color:var(--muted-1);
}

/* 아이콘은 장식이라 HTML 에서 aria-hidden 을 받는다(.logomark :199 선례).
   stroke 를 currentColor 로 두어 위 .dl-icon 의 color 한 곳만 바꾸면 색이 따라온다. */
.dl-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---- 56. 제목 · 본문 · CTA ----------------------------------------- */
/* 🔴 .auth-card h1(:619)이 이미 27px/800/1.3 을 준다 — 여기서 재선언하지 않는다.
   480px 축소(24px)도 :760 이 같은 셀렉터로 자동 처리한다. 정렬만 덮는다. */
.dl-title{text-align:center}

.dl-lead{
  margin-top:10px;
  color:var(--muted-1);
  font-size:15px;
  line-height:1.65;
  text-align:center;
}

/* 🔴 그리드 아이템은 기본 stretch 라 inline-block 인 .btn(:136)이 트랙 폭을 채운다
   → .auth-submit(:740)처럼 개별 width:100% 를 주지 않는다(.auth-social-group :633 과 같은 방식). */
.dl-actions{
  display:grid;
  gap:10px;
  margin-top:26px;
}

/* ---- 57. 하단 공유 정보 (구분선 + 요구사항 행 + 잔글씨) ------------- */
/* 🔴 구분선을 <hr> 이 아니라 border-top 으로 그린다 — hr 은 :71-72 리셋 대상이 아니라
   UA 기본 스타일(음영 보더·마진)이 남는다(.mp-profile-divider :1351 이 지적한 문제를 원천 회피). */
.dl-info{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--card-border);
}

/* 라벨 좌 · 값 우. 좁은 폭에서 값이 짓눌리지 않게 wrap 을 허용한다(.mp-row :1396 동형). */
.dl-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:4px 16px;
}

.dl-row-label{
  color:var(--muted-1);
  font-size:14px;
  font-weight:600;
}

.dl-row-value{
  color:var(--text);
  font-size:15px;
  font-weight:600;
}

/* 🔴 .fineprint(:128)를 재사용하지 않는다 — 그쪽은 --muted-3(#7d879a)이고,
   이 잔글씨는 카드 안이라 배경이 --bg 직접이 아니라 카드 실합성색(≈ #152139)이다.
   [대비 계산] #152139 대비  --muted-3 = 4.44:1 → AA(4.5:1) 미달 ❌
                            --muted-2 = 5.12:1 → 통과 ✅
   :24 의 4.8:1 은 --bg 직접 대비값이라 카드 위에서는 성립하지 않는다
   (:1276 마이페이지 라운드가 같은 사안을 이미 문서화했다 · :1523 과 같은 근거). */
.dl-fine{
  margin-top:16px;
  color:var(--muted-2);
  font-size:13.5px;
  line-height:1.65;
  text-align:center;
}

/* .auth-foot a(:752) 와 같은 관용구 — 잔글씨 안에서도 링크는 accent 로 또렷하게 둔다 */
.dl-fine a{color:var(--accent);font-weight:700}
.dl-fine a:hover{filter:brightness(1.12)}

/* ============================================================
   설치 안내 페이지 (install.html) 전용 — 2026-08-02 추가
   🔴 위 1~1779줄(랜딩 index.html + 로그인 login.html + 회원가입 signup.html +
      문서 terms.html·privacy.html + 마이페이지 mypage.html + 다운로드 download.html 규칙)은
      수정하지 않는다. append-only — 삭제·변경 라인 0.
   ── 설치 안내 전용 클래스는 전부 ins- 접두사다(랜딩 무접두 · auth- · doc- · mp- · dl- 에 이은
      여섯 번째 접두사). 랜딩·auth·doc·mp·dl 셀렉터를 재정의하지 않는다.
      .site-header/.container/.header-inner/.brand/.logomark/.brand-name/.kicker/
      .btn·.btn-solid/.shot·.shot-label 은 재사용만 한다.

   🔴 .shot/.shot-label(:265·:277)은 이 파일에서 '재사용이 정답'인 유일한 경우다.
      :827·:1479 의 재사용 금지 주석은 "점선+accent 배경은 스크린샷 자리표시 신호이므로
      스크린샷이 아닌 것(안내 힌트·카드 안내문)에 쓰지 말라"는 뜻이다. 이 페이지의 4개 상자는
      진짜 스크린샷 자리표시라 같은 주석의 논리가 오히려 재사용을 요구한다 —
      신규 점선 박스를 따로 만들면 같은 의미에 시각 신호가 둘이 되어 그 전제가 깨진다.

   🔴 .step/.step-num/.card-title/.card-desc 재사용 금지 — 4가지 이유:
      (1) .step:hover{transform:translateY(-2px)}(:326-329)가 딸려온다. 설치 단계 카드는
          인터랙티브 요소가 아니다(:617 원칙 · :1369 가 마이페이지에서 이미 승계).
      (2) .step-num 은 30px 고정(:354-355)이고 이 페이지 배지는 52px 다.
          기존 값을 바꾸면 랜딩(index.html 사용 흐름 5카드) 회귀다.
      (3) .step 은 .step-grid{grid-template-columns:repeat(5,1fr)}(:343) 5열 전제인데
          이 페이지는 세로 1열 흐름이다.
      (4) .card-title(:331)은 랜딩 카드 전용이고 .card-desc(:333)와 짝을 이루는 리듬이다
          (:1388 마이페이지 라운드가 내린 같은 판단을 승계).

   🔴 .doc-*(:1497 "doc- 는 문서 페이지 전용 이름") · .auth-card(:608 420/460px 고정폭 인증 카드) ·
      .mp-* · .dl-* 는 재사용하지 않는다.
   🔴 .fineprint(:128)·--muted-3(:24) 미사용 — 카드 실합성 배경(#152139)에서 4.44:1 로
      AA 미달이다(:1763-1768 이 같은 사안을 이미 문서화 · 이번 라운드 실측 재확인).

   ── 근거: 판매배포 §7-1(:413-414 v1 코드서명 없음 · SmartScreen "알 수 없는 게시자" 경고 ·
            초기 대응은 안내문 + 설치 안내 페이지 · 코드서명 구매 시점 미정) ·
            §7-2 페이지③(:427 "SmartScreen 대응 스크린샷·절차") ·
            §7-3(:441 언인스톨러 자동 생성 → 프로그램 추가/제거 등록).
   ============================================================ */

/* ---- 58. 설치 안내 토큰 (신규 1개 · 색이 아닌 수치 토큰) ------------ */
:root{
  /* 본문 컬럼 폭. 🔴 --doc-max(820px :911) 재사용 금지 — doc- 는 문서 페이지 전용
     이름이고(:1497) 값도 다르다. --container-max(:44)·--mp-sidebar-w(:1249)와 같은
     '색이 아닌 수치 토큰' 계열의 신설이다.
     🔴 이 :root 에는 색 리터럴이 없다 — 파일 상단 규율(:7)을 그대로 유지한다. */
  --ins-max:840px;
}

/* ---- 59. 설치 안내 레이아웃 ---------------------------------------- */
/* .ins-main 자신이 중앙 정렬 컬럼이다 — .container 를 겹쳐 쓰지 않는다
   (.doc-main :943-951 의 max-width 산식을 그대로 승계). */
.ins-main{
  width:100%;
  max-width:calc(var(--ins-max) + var(--container-pad) * 2);
  margin-inline:auto;
  padding:40px var(--container-pad) 88px;
}

/* 인트로 ↔ 단계 목록 구획선(.doc-head :955-958 과 같은 관용구) */
.ins-intro{
  padding-bottom:30px;
  border-bottom:1px solid var(--card-border);
}

/* 🔴 .doc-title(:961) 재사용 금지 — doc- 는 문서 페이지 전용 이름이다(:1497).
   .section-title(:112)도 쓰지 않는다 — 그쪽은 섹션 h2 전용이라는 구분을 :960 이 이미 확립했다. */
.ins-title{
  font-size:34px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}

/* 🔴 .lead(:119) 재사용 금지 — max-width:56ch 는 랜딩 2열 그리드 기준이라 840px 단일
   컬럼에서 줄이 일찍 끊긴다. 색·크기 규율만 승계한다.
   --muted-1 은 --bg 직접 대비 8.10:1(:22 의 8.1:1 실측 재확인) → AA 통과. */
.ins-lead{
  margin-top:18px;
  max-width:64ch;
  color:var(--muted-1);
  font-size:16.5px;
  line-height:1.75;
}

/* ---- 60. 설치 단계 카드 -------------------------------------------- */
.ins-steps{
  display:grid;
  gap:16px;
  margin-top:36px;
}

/* 🔴 hover 리프트를 넣지 않는다 — 카드가 인터랙티브 요소가 아니다(:617 원칙 · :1369 승계).
   transition 도 두지 않으므로 prefers-reduced-motion 추가 해제가 필요 없다(63절 주석). */
.ins-step{
  display:grid;
  /* 좌: 52px 번호 배지 · 우: 제목/본문/자리표시.
     column-gap 만 두고 세로 리듬은 각 요소의 margin-top 이 담당한다 —
     제목↔본문(4px)과 본문↔자리표시(16px)가 서로 달라야 해서 균일 row-gap 을 쓰지 않는다. */
  grid-template-columns:52px minmax(0,1fr);
  column-gap:20px;
  padding:24px 22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
}

/* 🔴 .step-num(:350-362) 재사용 금지 — 30px 고정이라 52px 배지와 치수가 다르다.
   토큰(--accent-soft/--accent)만 승계한다(.mp-badge :1541-1542 와 같은 방식).
   [대비 계산] 배지 실합성 배경 = --bg + --card-bg(0.03) + --accent-soft(α≈0.133) ≈ #1a3f46.
     #1a3f46 대비 --accent(#39ff9d) = 8.66:1 → AA 통과 ✅
   (:1553 이 같은 합성 배경을 #1a3e46 / 8.71:1 로 적어 둔 것과 같은 값이다 — 반올림 차이). */
.ins-step-num{
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:19px;
  font-weight:800;
}

/* 배지 행(52px)에 세로 가운데 정렬. 뒤따르는 본문·자리표시는 다음 행으로 자동 배치된다. */
.ins-step-title{
  grid-column:2;
  align-self:center;
  font-size:18px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.01em;
}

/* --muted-2 는 카드 실합성 배경(#152139)에서 5.12:1 → AA 통과
   (:1523·:1766 이 계산해 둔 값과 같은 배경 · 이번 라운드 실측 재확인).
   🔴 :23 의 5.5:1 은 --bg 직접 대비값이라 카드 위에서는 성립하지 않는다. */
.ins-step-desc{
  grid-column:2;
  margin-top:4px;
  color:var(--muted-2);
  font-size:15px;
  line-height:1.7;
}

/* .shot(:265)의 크기 모디파이어. .shot-hero(400px :284)·.shot-screen(360px :285)은
   단계 카드 안에 넣기엔 과대해 별도 높이를 둔다. */
.ins-shot{
  grid-column:2;
  min-height:180px;
  margin-top:16px;
}

/* ---- 61. FAQ 카드 --------------------------------------------------- */
/* 🔴 .auth-hint(:829)·.mp-note(:1481) 재사용 금지 — 각각 auth 폼 리듬·마이페이지 전용이다
   (:1477 이 지적한 margin 결합 문제와 같은 이유). */
.ins-faq{
  margin-top:36px;
  padding:24px 22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
}

.ins-faq-title{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
}

/* --muted-1 은 카드 실합성 배경(#152139)에서 7.51:1 → AA 통과.
   두 문단짜리 읽기 텍스트라 --muted-2(5.12:1)보다 상급 톤을 쓴다(.dl-lead :1717-1723 과 같은 판단). */
.ins-faq-p{
  margin-top:12px;
  color:var(--muted-1);
  font-size:15px;
  line-height:1.75;
}

/* ---- 62. 문의 카드 -------------------------------------------------- */
/* 🔴 강조는 '테두리 + solid CTA'가 담당하고 배경은 카드 톤 그대로 둔다.
   --accent-soft 로 채우면 실합성 배경이 ≈#1a3f46 이 되어(60절 계산과 같은 배경)
   본문 --muted-2 가 3.63:1 로 AA 미달이고 --muted-1 도 5.33:1 로 여유가 줄어든다.
   --card-bg 로 두면 실합성 배경이 #152139 라 --muted-1 이 7.51:1 로 유지된다.
   테두리만 accent 로 두는 방식은 .btn-ghost:hover(:159-162)·.mp-badge--ok(:1554-1558) 선례가 있다. */
.ins-contact{
  margin-top:20px;
  padding:24px 22px;
  background:var(--card-bg);
  border:1px solid var(--accent-border);
  border-radius:var(--radius-card);
  text-align:center;
}

.ins-contact-title{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
}

.ins-contact-p{
  margin-top:8px;
  color:var(--muted-1);
  font-size:15px;
  line-height:1.7;
}

/* 🔴 .btn(:135)을 스코프로 덮지 않고(.mp-inline-field .btn :1639 방식) 전용 클래스를
   병기한다 — 이 블록의 신규 셀렉터를 전부 ins- 접두사로 유지하기 위함이다.
   HTML 에서 class="btn btn-solid ins-contact-cta" 로 쓴다. */
.ins-contact-cta{margin-top:18px}

/* ---- 63. 설치 안내 반응형 — 860 / 480 ------------------------------- */
/* 🔴 기존 :500 · :542 · :757 · :819 · :1206 · :1213 · :1616 · :1627 미디어 블록은
   수정하지 않고 별도로 둔다. 신규 미디어쿼리는 아래 2개뿐이다.
   🔴 prefers-reduced-motion 블록은 추가하지 않는다 — 이 블록의 신규 규칙에 transition·transform 이
      0건이고, 이 페이지의 인터랙티브 요소는 <a>(로고·CTA)뿐이라
      :566 a{transition:none} 과 :567-571 .btn-solid:hover{transform:none} 이 이미 해제한다
      (:1664-1668 다운로드 라운드와 같은 논리 · :767·:1647 이 input 때문에 필요했던 경우와 다르다). */
@media (max-width:860px){
  /* 🔴 :500-502 의 `h1 br{display:none}` 관용구를 여기에는 적용하지 않는다 — 브라우저 실측 결과
     이 페이지에서는 오히려 결함이 된다.
     랜딩 h1(index.html:44)은 "…다른 화면,<br>이제 하나로…"라 <br> 를 숨겨도 쉼표가 분리자로 남는다.
     이 페이지 h1 은 "…뜨더라도<br>정상입니다"로 구두점이 없어 숨기면 두 어절이
     "뜨더라도정상입니다"로 융합된다(760px 실측 확인). HTML 에 공백을 넣어 피할 수도 없다 —
     SPEC §5-1 이 H1 문자열을 문자 단위로 못박고 있어 카피를 변형할 수 없기 때문이다.
     → <br> 를 그대로 두고 좁은 폭에서도 2줄로 읽히게 한다(카피 문자열 불변 원칙은 동일하게 지켜진다). */
  .ins-main{padding:32px var(--container-pad) 64px}
  .ins-title{font-size:26px}

  /* 자리표시 높이는 좁은 폭에서 축소(라벨 텍스트는 유지) — :534-536 과 같은 방식 */
  .ins-shot{min-height:150px}
}

@media (max-width:480px){
  .ins-main{padding:24px var(--container-pad) 52px}
  .ins-title{font-size:23px}

  /* 배지 좌측 열을 접고 1열로 쌓는다 — 좁은 폭에서 52px 열이 본문 폭을 크게 깎는다 */
  .ins-step{
    grid-template-columns:minmax(0,1fr);
    padding:20px 16px;
  }
  .ins-step-title,
  .ins-step-desc,
  .ins-shot{grid-column:1}
  .ins-step-title{align-self:start;margin-top:14px}

  .ins-faq,
  .ins-contact{padding:20px 16px}
}

/* ============================================================
   1:1 문의 페이지 (inquiry.html) 전용 — 2026-08-02 추가
   🔴 위 1~2046줄(랜딩 index.html + 로그인 login.html + 회원가입 signup.html +
      문서 terms.html·privacy.html + 마이페이지 mypage.html + 다운로드 download.html +
      설치 안내 install.html 규칙)은 수정하지 않는다. append-only — 삭제·변경 라인 0.
   ── 🔴 신규 색 토큰 0개 · 신규 수치 토큰 0개 — 이 절에는 :root 블록이 없다.
      이 파일의 :root 는 :18 · :585 · :784 · :908 · :1247 · :1819 여섯 개 그대로다.
   ── 문의 전용 클래스는 전부 iq- 접두사다(랜딩 무접두 · auth- · doc- · mp- · dl- · ins- 에
      이은 일곱 번째 접두사). 랜딩·auth·doc·mp·dl·ins 셀렉터를 재정의하지 않는다.

   🔴 이 페이지는 마이페이지와 같은 '로그인 후 대시보드' 표면이라
      .mp-card / .mp-card-head / .mp-card-title / .mp-note / .mp-actions / .mp-title /
      .mp-cards / .mp-header-actions / .mp-row-label / .mp-row-value /
      .mp-badge(--ok/--neutral) 를 그대로 재사용한다 — 신규 CSS 0줄.
      근거 (1) 판매배포 §7-2 페이지④(:428)가 1:1 문의를 "마이페이지 문의내역과 연결"로 묶고,
             페이지⑥(:430)이 "1:1 문의내역"을 마이페이지 구성요소로 둔다 — 같은 표면이다.
      근거 (2) 접두사 승격은 이 파일의 실제 관행이다. auth- 는 로그인 전용으로 태어났으나
             :580-581 이 미리 적어 둔 대로 signup·download 가 .auth-card/.auth-main 을,
             mypage.html:207 이 .auth-field 를 크로스페이지로 재사용 중이다.
      근거 (3) 52절 반응형(:1616-1640)이 .mp-title·.mp-card·.mp-header-actions 를 이미
             처리하므로 재사용만으로 860/480 대응이 따라온다.
      근거 (4) 기존 셀렉터를 '사용'만 하고 규칙 본문을 건드리지 않으므로 회귀 경로가 없다.

   🔴 49절 배지의 --ok/--neutral 은 톤 모디파이어(그린 / 중립)이지 도매상 전용 이름이 아니다.
      문의 상태 2종(답변완료 = --ok · 답변대기 = --neutral)에도 그대로 쓴다.
      :1538 의 "도매상 상태값 3종" 주석은 그 절이 태어난 맥락 설명이지 사용처 제한이 아니며,
      1~2046줄 보호 대상이라 수정하지 않는다.
      대비값은 같은 .mp-card 위라 :1553(8.71:1) · :1560(6.53:1) 계산이 그대로 성립한다.

   🔴 select / textarea 는 이 레포 최초 도입이다 — 2026-08-02 실측으로 homepage/*.html
      8개 파일 전부 0건이었다. :701 셀렉터가 `.auth-field input` 이라 select·textarea 에는
      한 줄도 걸리지 않는다. 아래 65절이 그 공백을 메운다.
      🔴 :701 을 `input,select,textarea` 로 고치지 않는다 — 그렇게 하면 login.html ·
         signup.html · mypage.html 3개 페이지가 동시에 영향권에 들어간다. 신규 셀렉터를
         append 하는 방식만 쓴다. 기존 8개 페이지에 select·textarea 가 0건이므로
         이 절은 그 페이지들의 렌더를 바꿀 수 없다(회귀 불가능).
   ============================================================ */

/* ---- 64. 문의 레이아웃 ---------------------------------------------- */
/* 🔴 .mp-main(:1289) 을 재사용하지 않는 유일한 이유는 max-width 다 — --container-max(1120px)는
   좌 프로필 + 우 카드 2열 대시보드용 폭이라, 폼 1열 페이지에 그대로 쓰면 입력 칸이
   과하게 길어져 읽기·조준이 나빠진다. 구조(width · margin-inline)와 패딩 수치는
   .mp-main 을 그대로 본뜬다.
   🔴 .container(:88)를 겹쳐 쓰지 않는다 — .iq-main 자신이 중앙 정렬 컬럼이다(:946·:1288 원칙).
   🔴 --iq-max 토큰을 신설하지 않는다. .doc-main(:948)·.ins-main(:1832)은 토큰+calc 를 썼으나
      그쪽은 '본문 텍스트 컬럼 폭'이라 재사용처가 여럿이었다. 이 파일에는
      .auth-card(:610 420px) · .auth-card--wide(:799 460px) · .auth-card--xl(:1676 520px) 처럼
      폭 리터럴을 규칙 본문에 직접 두는 선례도 있고, 이 폭을 쓰는 곳이 여기 한 곳뿐이라
      후자를 따른다(YAGNI). */
.iq-main{
  width:100%;
  max-width:760px;
  margin-inline:auto;
  padding:40px var(--container-pad) 88px;
}

/* 🔴 SPEC 신규 클래스 표에 없던 1줄을 추가한다(작성자 판단 · SELF_CHECK 에 기재).
   .mp-cards(:1366)에는 margin 이 없다 — 마이페이지에서는 바깥 .mp-grid{margin-top:32px}(:1310)가
   h1 아래 간격을 만들어 주는데, 이 페이지는 1열이라 .mp-grid 를 쓰지 않는다. 그대로 두면
   .mp-title(h1{margin:0} :71) 바로 아래에 첫 카드가 붙어 버린다.
   :1366 을 고치는 대신 .iq-main 하위로만 범위를 좁혀 덮는다 — .mp-profile .mp-badge(:1348)가
   쓴 것과 같은 '조상 스코프 오버라이드' 방식이라 마이페이지에는 닿지 않는다.
   값 32px 은 마이페이지가 같은 자리에서 쓰는 :1310 을 그대로 승계한 것이다. */
.iq-main .mp-cards{margin-top:32px}

/* ---- 65. 폼 컨트롤 확장 — select · textarea ------------------------- */
/* 값은 :701-712(.auth-field input)를 그대로 승계하고 토큰만 참조한다 — 신규 토큰 0.
   🔴 color-scheme:dark 는 색 리터럴이 아니라 키워드다(파일 상단 :7 규율 위반 아님).
      --input-bg(:588)는 알파가 매우 낮은 백색 오버레이라 사실상 투명하고 --text(:21)는
      밝은 색이라, 그 값을 여기 숫자로 옮겨 적지 않는다(:1239-1240 규율 — 회귀 검수가
      리터럴을 grep 할 때 주석이 '실제 값'으로 잡히면 안 된다).
      지정하지 않으면 UA 가 그리는 select 드롭다운 팝업이 밝게 떠서 흰 글자가 배경에 묻힌다
      (옵션을 읽을 수 없다 = 카테고리 선택 불가 = 기능 파손). textarea 에도 같이 주어
      스크롤바 톤을 맞춘다.
   🔴 appearance 는 지정하지 않는다 — 네이티브 화살표를 유지한다. 커스텀 화살표는
      data-URI SVG 에 색 리터럴이 들어가 :7 규율과 충돌하고, 이 레포의 이미지 파일 0
      관행과도 어긋난다(.logomark :199 · .mp-avatar :1324 가 CSS 만으로 그린 것과 같은 이유). */
.auth-field select,
.auth-field textarea{
  width:100%;
  padding:13px 14px;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-btn);
  color:var(--text);
  /* 폼 컨트롤은 body 폰트를 상속하지 않는다 — 명시 필수(:708-709 승계) */
  font-family:inherit;
  font-size:15px;
  transition:border-color .18s ease;
  /* UA 가 그리는 팝업·스크롤바를 다크로 렌더한다(키워드 값) */
  color-scheme:dark;
}

/* textarea 전용 — 세로 리사이즈만 허용(가로는 카드 폭을 깨뜨린다) · 여러 줄 행간 ·
   inline 기본값이 남기는 baseline 아래 여백 제거 */
.auth-field textarea{
  display:block;
  line-height:1.6;
  resize:vertical;
}

/* 🔴 팝업 폴백 — SPEC A3 이 "실렌더에서도 팝업이 밝으면 추가한다"로 사전 승인한 조건부 규칙이다.
   2026-08-02 실렌더 확인 결과 color-scheme:dark 만으로는 부족했다: 드롭다운 팝업 배경이 흰색으로
   떠서, color 를 상속한 옵션 글자(--text · 거의 흰색)가 배경에 묻혀 선택된 1개(파란 하이라이트)를
   빼고는 읽히지 않았다 = 카테고리 선택 불가(기능 파손). 그래서 옵션 배경을 명시한다.
   --bg 는 불투명한 기존 토큰이라 신규 색 리터럴이 없고, --bg + --text 는 body(:60-61)가 쓰는
   바로 그 조합이라 대비가 이미 검증돼 있다.
   🔴 color-scheme:dark 는 그대로 둔다 — 규격을 지키는 UA 에서는 그쪽이 팝업·스크롤바를 함께
      처리하고, 이 규칙은 그러지 못하는 UA 를 메우는 보강이다. 둘은 경쟁하지 않는다. */
.auth-field select option{
  background-color:var(--bg);
  color:var(--text);
}

/* select 에는 placeholder 가 없다 — textarea 만 :714 와 같은 처리를 한다 */
.auth-field textarea::placeholder{color:var(--placeholder)}

/* 🔴 :81 의 a:focus-visible 은 폼 컨트롤에 적용되지 않는다 —
   :718-722 · :1458-1462 와 같은 처리를 select·textarea 에도 둔다. */
.auth-field select:focus-visible,
.auth-field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent-border);
}

/* ---- 66. 문의 내역 리스트 ------------------------------------------- */
/* 🔴 .mp-table(:1506) 재사용 금지 — th,td 가 white-space:nowrap(:1519)이라 문장형 문의 제목이
      줄바꿈되지 않아 좁은 화면에서 표가 통째로 가로 스크롤된다. 도매상 표는 셀 값이 짧아
      그 규칙이 맞았지만 여기서는 열화된다. 게다가 제목이 지배 요소이고 날짜·상태는 부속
      메타라 3열 대등 표가 아니다 → ul 리스트로 둔다(:72 가 ul 을 이미 리셋해 두었다).
   🔴 .mp-row(:1396) 를 그대로 쓰지 않는 유일한 이유는 align-items:baseline 이다 —
      배지가 텍스트 베이스라인에 걸려 위아래로 어긋난다(.mp-table 이 배지 때문에
      vertical-align:middle 을 준 :1517 과 같은 사유). 여기서는 center 로 둔다.
      나머지 값(flex · wrap · space-between · 상단 보더)은 .mp-row 를 본뜬다. */
.iq-item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 16px;
  padding:14px 0;
  border-top:1px solid var(--card-border);
}

/* 카드 제목행 바로 아래 첫 행은 윗선을 생략한다(.mp-card-head + .mp-row :1407 동형).
   🔴 .iq-list 자체에는 선언을 두지 않는다 — :72 리셋 외에 필요한 규칙이 없다(YAGNI). */
.iq-list .iq-item:first-child{
  padding-top:0;
  border-top:0;
}

/* 날짜 + 상태 배지 묶음. flex:none 이라 제목이 길어져도 메타가 찌그러지지 않고,
   먼저 줄바꿈되는 쪽은 제목이다. */
.iq-item-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}

/* ---- 67. 문의 반응형 — 860 / 480 ------------------------------------ */
/* 기존 :500 · :542 · :757 · :819 · :1206 · :1213 · :1616 · :1627 · :2015 · :2030 미디어 블록은
   수정하지 않고 별도로 둔다.
   🔴 이 절이 담당하는 것은 .iq-main 패딩뿐이다. .mp-title 26px/23px 축소(:1618·:1629) ·
      .mp-card padding 20px 16px(:1630) · .mp-header-actions{flex-basis:auto}(:1635)는
      52절을 재사용하는 것만으로 이미 적용된다 — 여기서 다시 쓰지 않는다. */
@media (max-width:860px){
  .iq-main{padding:32px var(--container-pad) 64px}
  /* 64절의 32px 을 26px 로 — 마이페이지가 같은 자리에서 쓰는 :1623 을 그대로 승계한다 */
  .iq-main .mp-cards{margin-top:26px}
}

@media (max-width:480px){
  .iq-main{padding:24px var(--container-pad) 52px}
}

/* ---- 68. 문의 모션 최소화 선호 -------------------------------------- */
/* 기존 :564 · :767 · :1647 블록은 수정하지 않는다. :566 의 a{transition:none} 이 헤더 링크·
   제출 버튼의 transition 을, :567-571 이 .btn-solid:hover 의 transform 을 이미 해제한다.
   여기서는 그 블록들이 다루지 못하는 select·textarea 의 transition 만 해제한다
   (:768 이 .auth-field input 에, :1648 이 .mp-inline-field input 에 한 것과 같다). */
@media (prefers-reduced-motion:reduce){
  .auth-field select,
  .auth-field textarea{transition:none}
}

/* ============================================================
   공지·FAQ 페이지 (faq.html) 전용 — 2026-08-02 추가
   🔴 위 1~2233줄(랜딩 index.html + 로그인 login.html + 회원가입 signup.html +
      문서 terms.html·privacy.html + 마이페이지 mypage.html + 다운로드 download.html +
      설치 안내 install.html + 1:1 문의 inquiry.html 규칙)은 수정하지 않는다.
      append-only — 삭제·변경 라인 0.
   ── 🔴 신규 색 토큰 0개 · 신규 수치 토큰 1개(--faq-max) — 색 리터럴은 여전히
      파일 상단 :18 블록 안에만 존재한다(:7 규율 유지).
      이 파일의 :root 는 :18 · :585 · :784 · :908 · :1247 · :1819 · 아래 69절 일곱 개다.
   ── 공지·FAQ 전용 클래스는 전부 faq- 접두사다(랜딩 무접두 · auth- · doc- · mp- · dl- ·
      ins- · iq- 에 이은 여덟 번째 접두사). 기존 셀렉터를 재정의하지 않는다.
      🔴 .ins-faq / .ins-faq-title / .ins-faq-p(:1952-1973)와 이름이 비슷하지만 무관하다 —
         그쪽은 설치 안내 페이지의 단일 안내 카드다.

   🔴 이 페이지는 레포 최초로 details/summary 요소를 쓴다. 열림/닫힘·포커스·키보드 토글을
      브라우저가 담당하므로 이 페이지의 스크립트는 0건이다.
      (요소 이름을 꺾쇠 없이 적는 이유 = :1239-1240 규율 — 회귀 grep 이 '경고 주석의
       리터럴'을 '실제 마크업'으로 세면 안 된다. 기존 주석이 허용해 온 꺾쇠는
       <a>·<br> 뿐이고 그 둘은 이번 회귀 grep 대상이 아니다.)
   정본 근거: 판매배포 §7-2 페이지⑤(:429) 게시판=공지·FAQ 정적 축소 ·
      §7-5(:472 용도 · :480 (c)안 운영자 수동 갱신 · :482 서버 공개 노출면 미증가).
   ============================================================ */

/* ---- 69. 공지·FAQ 토큰 (신규 1개 · 색이 아닌 수치 토큰) -------------- */
:root{
  /* 본문 컬럼 폭.
     🔴 --ins-max(840px :1824)·--doc-max(820px :911) 재사용 금지 — 각각 설치 안내·문서
        페이지 전용 이름이고(:1497·:1820-1822 가 확립한 규율) 값도 다르다.
     아코디언은 '한 줄 질문 + 3~4줄 답변'이라 840px 보다 좁은 760px 가 읽기 리듬에 맞는다.
     --container-max(:44)·--ins-max(:1824)와 같은 '색이 아닌 수치 토큰' 계열의 신설이다. */
  --faq-max:760px;
}

/* ---- 70. 공지·FAQ 레이아웃 ------------------------------------------ */
/* .faq-main 자신이 중앙 정렬 컬럼이다 — .container 를 겹쳐 쓰지 않는다
   (.doc-main :946-951 → .ins-main :1830-1835 로 이어진 max-width 산식을 그대로 승계). */
.faq-main{
  width:100%;
  max-width:calc(var(--faq-max) + var(--container-pad) * 2);
  margin-inline:auto;
  padding:40px var(--container-pad) 88px;
}

/* 🔴 .ins-title(:1845)·.doc-title(:961) 재사용 금지 — 각각 설치 안내·문서 페이지 전용
   이름이다(:1497·:1843). 치수 규율만 승계한다.
   이 페이지 h1 에는 <br> 이 없어 :2016-2022 가 다룬 'br 를 숨기면 어절이 융합된다' 딜레마가
   아예 발생하지 않는다 — 좁은 폭 규칙에서 br 를 다룰 필요가 없다. */
.faq-title{
  font-size:34px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}

/* 섹션 리듬 — 제목↔첫 섹션(36px)보다 섹션↔섹션(52px)을 넓게 둔다.
   균일 간격 하나로 두면 '공지사항 ↔ 자주 묻는 질문' 경계가 h1 ↔ 첫 섹션 경계와
   구분되지 않아, 두 섹션이 한 덩어리로 읽힌다. */
.faq-section{margin-top:36px}
.faq-section + .faq-section{margin-top:52px}

/* 🔴 .section-title(:112, 32px) 재사용 금지 — 그쪽은 랜딩 섹션 h2 전용 치수이고,
   이 페이지 h2 는 h1(34px) 바로 아래 단계라 22px 다(:1844 가 확립한 구분과 같은 판단). */
.faq-section-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
}

/* 공지 빈 상태 — 등록된 공지가 0건일 때의 안내 카드.
   🔴 .shot/.shot-label(:265·:277) 재사용 금지 — 점선 + accent 배경은 '스크린샷 자리표시'
      전용 신호라(:827·:1479 가 전용을 금지) 빈 상태에 쓰면 이미지 누락으로 오독된다.
   🔴 코디네이터 문구의 .mp-empty 는 이 파일에 존재하지 않는다(실측) — 신규로 만든다.
   --muted-1 은 카드 실합성 배경(#152139)에서 7.51:1 → AA 통과(:1966 실측 승계).
   text-align:center 는 '내용 없음'을 알리는 단문이라 좌측 정렬 본문 흐름과 구분하기 위함이다. */
.faq-empty{
  margin-top:16px;
  padding:32px 22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  color:var(--muted-1);
  font-size:15px;
  text-align:center;
}

/* ---- 71. FAQ 아코디언 (details / summary 요소) ----------------------- */
/* .ins-steps(:1864-1868) 와 같은 grid + gap 관용구 */
.faq-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}

/* 🔴 hover 리프트(translateY)를 넣지 않는다 — .step/.feature/.plan(:320)의 리프트는
   카드 그리드용이고(:617 원칙 · :1369·:1870 승계), 세로로 쌓인 아코디언이 열고 닫히며
   함께 들썩이면 산만하다. 테두리 색 변화만으로 인터랙티브임을 알린다
   (.btn-ghost:hover :159-162 · .mp-badge--ok 와 같은 '테두리만 accent' 방식). */
.faq-item{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  transition:border-color .18s ease;
}

.faq-item:hover{border-color:var(--accent-border)}

/* 🔴 기본 마커 제거는 아래 두 규칙이 모두 필요하다 —
     list-style:none            → 표준 경로(Chrome·Firefox·최신 Safari)의 마커
     ::-webkit-details-marker   → 구형 WebKit/Safari 의 삼각형
   :72 의 ul,ol{list-style:none} 은 summary 를 덮지 않는다(선택자에 summary 가 없다).
   display:flex 만으로 마커가 사라지는 브라우저가 있으나 그 부작용에 의존하지 않는다.
   🔴 a:focus-visible(:81) 은 summary 를 덮지 않는다(summary 는 <a> 가 아니다) —
      키보드 순회 시 어느 질문에 있는지 보이지 않으면 접근성이 깨지므로 포커스 링을 따로 둔다.
   align-items:flex-start 는 질문이 2줄이 될 때 + 아이콘을 첫 줄에 붙여 두기 위함이다. */
.faq-q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  list-style:none;
}

.faq-q::-webkit-details-marker{display:none}

.faq-q:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-card);
}

/* min-width:0 을 함께 두어 긴 질문이 + 아이콘을 밀어내지 않고 스스로 줄바꿈하게 한다
   (flex 항목의 기본 min-width:auto 가 축소를 막는 문제 회피). */
.faq-q-text{
  flex:1;
  min-width:0;
}

/* + 글리프 — 열리면 45도 회전해 x 모양으로 읽힌다.
   장식이므로 HTML 에서 aria-hidden 이고, 확장 상태는 details 요소가 보조기술에 이미 전달한다.
   flex:none + line-height:1 로 회전축이 글리프 중심에서 벗어나지 않게 고정한다.
   🔴 회전은 장식이라, 폰트 폴백에서 어색해 보이면 이 한 줄만 제거해도
      열림/닫힘 기능은 무손상이다(브라우저 내장 동작이라 CSS 의존이 없다). */
.faq-icon{
  flex:none;
  color:var(--accent);
  font-size:20px;
  line-height:1;
  transition:transform .18s ease;
}

.faq-item[open] .faq-icon{transform:rotate(45deg)}

/* 답변 본문. 좌우 여백을 .faq-q(22px)와 맞춰 질문↔답변의 좌측선을 정렬한다.
   --muted-1 은 카드 실합성 배경(#152139)에서 7.51:1 → AA 통과 —
   읽기 문단이라 --muted-2(5.12:1)보다 상급 톤을 쓴다(.ins-faq-p :1966-1972 와 같은 판단).
   🔴 :23 의 5.5:1 은 --bg 직접 대비값이라 카드 위에서는 성립하지 않는다. */
.faq-a{
  margin:0 22px 20px;
  color:var(--muted-1);
  font-size:15px;
  line-height:1.75;
}

/* 답변 안 인라인 링크(install.html · terms.html#art5).
   🔴 전역 a(:74)나 공유 .btn 을 덮지 않고 이 블록 안으로만 스코프를 좁힌다
      (.mp-inline-field .btn{justify-self:start} :1639 와 같은 방식).
   포커스 링은 a:focus-visible(:81)이 이미 담당하므로 중복 정의하지 않는다.
   transition 은 :77 이 이미 filter 를 포함하므로 여기서 새로 열지 않는다 —
   따라서 이 규칙은 아래 72절 모션 최소화 블록의 대상이 아니다(:566 이 이미 해제). */
.faq-a a{
  color:var(--accent);
  font-weight:700;
}

.faq-a a:hover{filter:brightness(1.12)}

/* ---- 72. 공지·FAQ 반응형 — 860 / 480 + 모션 최소화 ------------------- */
/* 🔴 기존 :500 · :542 · :757 · :819 · :1206 · :1213 · :1616 · :1627 · :2015 · :2030 ·
   :2215 · :2221 미디어 블록은 수정하지 않고 신규 블록만 연다(:2010 선례). */
@media (max-width:860px){
  .faq-main{padding:32px var(--container-pad) 64px}
  .faq-title{font-size:26px}
}

@media (max-width:480px){
  .faq-main{padding:24px var(--container-pad) 52px}
  .faq-title{font-size:23px}
  /* 좁은 폭에서 좌우 패딩을 줄여 질문·답변의 본문 폭을 확보한다(.ins-step :2035-2038 과 같은 방식) */
  .faq-q{padding:16px}
  .faq-a{margin:0 16px 16px}
  .faq-empty{padding:26px 16px}
}

/* 🔴 이 절은 설치 안내 라운드(:2011-2014)와 달리 prefers-reduced-motion 해제 블록이 필수다 —
   그 주석의 '이 블록의 신규 규칙에 transition·transform 이 0건' 전제가 여기서는 성립하지 않는다.
   이 절이 새로 만든 transition 은 2건이다:
     .faq-item{transition:border-color}  → hover 시 테두리 색
     .faq-icon{transition:transform}     → 열림 시 45도 회전
   둘 다 <a> 가 아니라 :566 의 a,.step,.feature,.plan{transition:none} 이 덮지 못하고,
   input·select·textarea 도 아니라 :768 · :1648 · :2231-2232 규칙도 덮지 못한다.
   🔴 기존 :564 · :767 · :1647 · :2230 블록은 수정하지 않고 새 블록을 연다. */
@media (prefers-reduced-motion:reduce){
  .faq-item,
  .faq-icon{transition:none}
}

/* ============================================================
   이메일 인증결과 페이지 (verify.html) 전용 — 2026-08-03 추가
   🔴 위 1~2410줄(랜딩 index.html + 로그인 login.html + 회원가입 signup.html +
      문서 terms.html·privacy.html + 마이페이지 mypage.html + 다운로드 download.html +
      설치안내 install.html + 문의 inquiry.html + 공지·FAQ faq.html 규칙)은
      **1줄도 수정하지 않는다.** append-only.
   🔴 헤더·.auth-main·.auth-card·.btn 계열·.auth-submit 은 그대로 **재사용**하고, 이 페이지
      고유 규칙만 verify- 접두사로 분리한다(:596-598 의 auth- 공용 규율과 같은 취지) —
      login/signup/mypage 에 회귀를 만들지 않기 위해서다.
   🔴 이 절이 이 파일 **최초의 @keyframes** 를 도입한다(직전까지 파일 전체 0건).
      그래서 아래 77절의 prefers-reduced-motion 해제 블록이 선택이 아니라 필수다.
   ============================================================ */

/* ---- 73. 인증결과 토큰 (신규 3개 · 기존 :root 에 없던 값만) ---------- */
:root{
  /* ⚠ 아이콘 글리프 — 카드 실합성 배경(~RGB(21,33,57)) 위 --verify-danger-bg 를 합성한
     상태에서 5.665:1 (WCAG AA 통과). [코디네이터 산출값 · 2026-08-03] 🔴 재계산·색 변경 금지. */
  --verify-danger:#e88;
  --verify-danger-bg:rgba(255,80,80,0.12);
  /* 스피너 미회전 트랙. 값이 --slot-border 와 우연히 같지만 이 파일의 관례는 값 중복 제거가
     아니라 **의미 기반 명명**이다(--card-border .08 / --slot-border .1 / --input-bg .04 /
     --social-bg .05 / --ghost-border .16 / --input-border .34 가 공존). */
  --verify-spinner-track:rgba(255,255,255,0.1);
}

/* ---- 74. 인증결과 카드 ---------------------------------------------- */
/* 🔴 .auth-card{padding:36px}(:609) 규칙 자체는 손대지 않는다. 특정도가 .auth-card 와
   동일(0,1,0)이라 소스 순서로 이긴다 — 이 블록이 뒤에 있어 성립한다(:806 .auth-card--wide 선례).
   디자인 원본의 44px 36px 은 짧은 상태 카드에 세로 여백을 더 주려는 명확한 의도라 존중한다. */
.verify-card{
  padding:44px 36px;
  text-align:center;
}

/* ---- 75. 4상태 블록 ------------------------------------------------- */
/* 상태 4종(pending·success·failed·error)은 **전부 정적 HTML** 에 있고 JS 는 hidden 토글만
   한다. 그래서 모든 문구가 마크업에 있고, **토큰이 메시지에 끼어들 코드 경로 자체가 없다**
   (규율이 아니라 구조적 보장). */
.verify-state{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* 🔴 필수 — 이 규칙이 없으면 hidden 속성이 무력화된다.
   UA 스타일시트의 [hidden]{display:none} 보다 **작성자 규칙이 우선**이므로, 위
   .verify-state{display:flex} 가 hidden 을 덮어써 4상태가 한꺼번에 보인다. */
.verify-state[hidden]{display:none}

/* 아이콘 — 원형 배경 + 글리프. 장식이라 마크업에서 aria-hidden(.logomark :17 선례) */
.verify-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:64px;
  height:64px;
  border-radius:50%;
  font-size:30px;
  line-height:1;
}

.verify-icon--ok{
  background:var(--accent-soft);
  color:var(--accent);
}

.verify-icon--danger{
  background:var(--verify-danger-bg);
  color:var(--verify-danger);
}

/* 스피너 — 트랙 위에 accent 호(arc) 하나. 글리프가 없는 빈 span 이다. */
.verify-spinner{
  border:3px solid var(--verify-spinner-track);
  border-top-color:var(--accent);
  animation:verify-spin .9s linear infinite;
}

/* 🔴 범용 이름 spin 대신 verify-spin — 이 파일 최초의 @keyframes 라, 향후 다른 절이 같은
   이름을 쓰다 조용히 덮어쓰는 충돌을 미리 막는다(@keyframes 는 전역 이름공간이다). */
@keyframes verify-spin{
  to{transform:rotate(360deg)}
}

/* 🔴 셀렉터가 `.verify-title` 단독이면 **적용되지 않는다.** 이 제목은 .auth-card 안의 h1
   이라 :601 의 `.auth-card h1`(특정도 0,1,1 — 클래스+요소)이 `.verify-title`(0,1,0)을
   **소스 순서와 무관하게 이긴다**(특정도가 먼저 비교된다). 실제로 브라우저 실측에서
   23px/1.35 가 무시되고 27px/1.3 이 적용되는 것을 확인했다.
   → `.verify-card .verify-title`(0,2,0)로 올려 의도한 값이 실제로 이기게 한다.
   🔴 이것은 `.auth-card h1` **재정의가 아니다** — .verify-card 안에서만 성립하는 새 셀렉터라
      login/signup/mypage 의 h1 에는 아무 영향이 없다(회귀 0).
   제목이 "로그인" 같은 한 단어가 아니라 한 문장이라 조금 작은 크기가 필요하다. */
.verify-card .verify-title{
  margin-top:22px;
  font-size:23px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.02em;
}

.verify-desc{
  margin-top:11px;
  color:var(--muted-1);
  font-size:14.5px;
  line-height:1.75;
}

/* ---- 76. 인증결과 CTA ----------------------------------------------- */
/* CTA 는 .btn / .btn-solid / .btn-ghost (:135-162) + .auth-submit (:747-751 의
   display:block; width:100%; margin-top:18px) 를 **그대로 재사용**한다. 여기서는 이
   페이지에만 필요한 차이만 얹는다. */

/* 상태 D(일시적 오류)의 2번째 CTA — 위 solid 버튼과의 간격만 좁힌다 */
.verify-cta-sub{margin-top:10px}

/* 🔴 이 사이트 **최초의 <button> 요소**다(기존 10개 페이지에 <button> 0건 — 실측).
   .btn 계열이 배경·테두리·크기·굵기를 이미 주지만, 아래 3가지는 <a> 에는 필요 없어서
   .btn 에 없던 것들이라 버튼에만 따로 준다.
   🔴 <a href> 가 아니라 <button> 인 이유: "다시 시도"는 이동이 아니라 **동작**이고,
      구현은 location.reload() 뿐이라 토큰을 읽지도 쓰지도 않는다. */
.verify-retry{
  /* 폼 컨트롤은 body 폰트를 상속하지 않는다 — 명시 필수(:708-709 · :1431 · :2100 승계) */
  font-family:inherit;
  cursor:pointer;
  /* a{transition:…}(:75-79) 는 <button> 을 덮지 않는다 — 같은 값을 여기에 둔다
     (hover 시 .btn-solid 의 filter·transform 이 뚝 끊기지 않게). */
  transition:color .18s ease, border-color .18s ease, filter .18s ease, transform .18s ease;
}

/* 🔴 :81 의 a:focus-visible 은 <button> 에 적용되지 않는다 — :725 · :2134 · :2330 과 같은 처리 */
.verify-retry:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-btn);
}

/* JS 가 꺼져 있으면 화면이 pending 에 **영구히 멈춘다** — 정직하게 안내한다.
   🔴 이 안내가 없으면 무한 로딩처럼 보이는 실제 결함이다. */
.verify-noscript{
  margin-top:24px;
  padding:16px;
  background:var(--verify-danger-bg);
  border-radius:var(--radius-btn);
  font-size:14px;
  line-height:1.75;
  text-align:left;
}
.verify-noscript a{color:var(--accent);font-weight:700}
.verify-noscript a:hover{filter:brightness(1.12)}

/* ---- 77. 인증결과 반응형 — 480 + 모션 최소화 ------------------------- */
/* 🔴 기존 :507 · :549 · :571 · :764 · :774 · :826 · :1187 · :1194 · :1599 · :1610 · :1630 ·
   :1982 · :1997 · :2182 · :2188 · :2197 · :2385 · :2390 · :2407 미디어 블록은 수정하지 않고
   새 블록을 연다(:2385-2410 선례). */
@media (max-width:480px){
  /* 🔴 필수 — :766 의 .auth-card{padding:24px 20px} 는 특정도가 같고(0,1,0) 소스가 앞서므로
     위 .verify-card{padding:44px 36px} 에 **진다**. 좁은 폭 축소를 여기서 다시 준다. */
  .verify-card{padding:32px 20px}
  .verify-icon{width:56px;height:56px;font-size:26px}
  /* 🔴 여기서도 `.auth-card h1{font-size:24px}`(:767, 특정도 0,1,1)를 이겨야 하므로
     위와 같은 이유로 `.verify-card .verify-title`(0,2,0)로 쓴다. */
  .verify-card .verify-title{font-size:20px}
}

/* 🔴 이 절은 prefers-reduced-motion 해제 블록이 **필수**다 — 기존 해제 블록
   (:571 · :774 · :1630 · :2197 · :2407)은 전부 transition·transform 만 다루므로
   이 절이 새로 만든 **animation**(@keyframes verify-spin)을 하나도 덮지 못한다.
   정지 후에도 "이메일을 인증하는 중입니다..." 제목이 진행 상태를 전달하므로 정보 손실 0
   (WCAG 2.2 SC 2.3.3). */
@media (prefers-reduced-motion:reduce){
  .verify-spinner{animation:none}
  /* :573 의 a,.step,.feature,.plan{transition:none} 은 <button> 을 덮지 못한다 —
     위 76절에서 새로 준 transition 을 여기서 해제한다.
     반면 :574-578 의 .btn-solid:hover{transform:none} 은 요소 무관 셀렉터라 버튼에도
     이미 적용된다(중복 정의하지 않는다). */
  .verify-retry{transition:none}
}