/* 소개·가격·문의·설정·앱 껍데기가 함께 쓰는 배치. 빌드 없이 그대로 뜬다.
   🔴 색·글꼴·간격은 `base.css` 의 토큰만 쓴다 — 여기에 값을 직접 적으면 화면마다 갈린다. */

:root {
  /* 소개·가격은 앱 본문보다 넓다(카드 셋을 나란히 놓는다). */
  --page-width: 1080px;
  --prose-width: 720px;
}

html {
  scroll-behavior: smooth;
}

body {
  /* 표·카드가 넘쳐도 페이지 전체가 옆으로 밀리지 않게. */
  overflow-x: hidden;
}


/* ── 공통 틀 ──────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gap-lg);
}

.section {
  padding: var(--gap-2xl) 0;
}

.section--tint {
  background: var(--surface);
}

.section__head {
  max-width: var(--prose-width);
  margin: 0 auto var(--gap-xl);
  text-align: center;
}

.section__title {
  margin: 0 0 var(--gap-sm);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.35;
}

/* 제목 안 강조 낱말 — 파란색. */
.section__title .accent {
  color: var(--blue);
}

.section__sub {
  margin: 0;
  color: var(--text-sub);
  font-size: clamp(15px, 1.6vw, 17px);
}

/* ── 머리 메뉴 ────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-blur-nav);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.4px;
  text-decoration: none;
}

/* 로고 표식. 그라데이션 선 그림이라 **바탕색을 깔지 않는다** —
   파란 사각형 위에 올리면 선이 배경에 묻혀 안 보인다. */
.brand__mark {
  flex: none;
  width: 30px;
  height: 30px;
}

/* 이름만으로는 무슨 서비스인지 알 수 없어 붙인 한 줄. 좁은 화면에서는 숨는다. */
.brand__sub {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin-left: auto;
}

.nav__link {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.nav__link:hover {
  background: var(--surface-strong);
  color: var(--text);
}

/* 지금 보고 있는 페이지. */
.nav__link[aria-current="page"] {
  color: var(--text);
  background: var(--surface-strong);
}

@media (max-width: 520px) {
  .brand__sub {
    display: none;
  }
  .nav__link {
    padding: 8px 10px;
  }
}

/* ── 버튼 ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--blue);
  color: var(--on-blue);
}

.btn--primary:hover {
  background: var(--blue-hover);
}

.btn--ghost {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface);
}

.btn--sm {
  padding: 9px 16px;
  font-size: var(--fs-sm);
}

.btn--block {
  width: 100%;
}

/* 되돌릴 수 없는 동작(탈퇴)용.
   🔴 **평소에는 빨간 테두리와 글자만**이고 채워진 빨강이 아니다 — 화면에 빨간 덩어리가
      있으면 눌러야 할 것처럼 보인다. 이 버튼은 **눌리지 않는 것이 기본**이다.
   ⚠️ `--red` 는 base.css 토큰이다. 여기에 색값을 적지 말 것. */
.btn--danger {
  background: var(--bg);
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  color: var(--red);
}

.btn--danger:hover {
  background: color-mix(in srgb, var(--red) 8%, var(--bg));
  border-color: var(--red);
}

.btn--danger:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ── 첫 화면 ─────────────────────────────────────── */
.hero {
  padding: clamp(56px, 8vw, 96px) 0 var(--gap-2xl);
  text-align: center;
}

.hero__title {
  margin: 0 auto var(--gap-md);
  max-width: 16em;
  font-size: clamp(32px, 5.6vw, 52px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.25;
}

.hero__sub {
  margin: 0 auto var(--gap-xl);
  max-width: 30em;
  color: var(--text-sub);
  font-size: clamp(16px, 2vw, 19px);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm);
}

/* 이름의 뜻 한 줄 — 첫 화면에서 부제목보다 작고 흐리게. */
.hero__name {
  margin: calc(var(--gap-md) * -1) auto var(--gap-xl);
  max-width: 32em;
  color: var(--text-weak);
  font-size: var(--fs-sm);
}

.hero__name span {
  color: var(--text-sub);
  font-weight: 600;
}

.hero__note {
  margin: var(--gap-lg) 0 0;
  color: var(--text-weak);
  font-size: var(--fs-sm);
}

/* ── 카드 격자 ───────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* 카드를 세로 한 줄로 쌓는다 — 2열이면 마지막 하나가 외따로 남는다. */
.grid--1 {
  grid-template-columns: 1fr;
  /* 폭을 반으로 줄여 가운데에. 폰에서는 꽉 찬다. */
  max-width: min(100%, 520px);
  margin: 0 auto;
}

.card {
  padding: var(--gap-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--gap-md);
  border-radius: var(--radius-sm);
  background: var(--blue-weak);
  font-size: 18px;
}

.card__title {
  margin: 0 0 var(--gap-sm);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.card__text {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

/* ── 알림 상자 ───────────────────────────────────── */
.callout {
  max-width: var(--prose-width);
  margin: 0 auto;
  padding: var(--gap-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.callout--notice {
  background: var(--notice-bg);
  border-color: var(--notice-border);
}

.callout__title {
  margin: 0 0 var(--gap-sm);
  font-size: 17px;
  font-weight: 700;
}

.callout__list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.callout__list li + li {
  margin-top: var(--gap-sm);
}

/* 🔴 문장 한가운데 있는 링크 — 누르는 높이는 40px 이다. 줄이지 말 것.
   ⚠️ 줄 안에 흐르는(inline) 글자라 위아래 여백이 줄 높이에 안 들어간다 —
      그래서 글이 한 줄도 안 밀리고 눌리는 넓이만 커진다.
      `display` 를 블록 계열로 바꾸면 그 성질이 사라져 글이 밀린다. */
.callout__list a {
  padding: 13px 0;
}

/* ── 맺음 부름 ───────────────────────────────────── */
.closing {
  padding: var(--gap-2xl) 0;
  text-align: center;
}

/* ── 바닥글 ──────────────────────────────────────── */
.foot {
  padding: var(--gap-xl) 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-lg);
}

.foot__slogan {
  margin: var(--gap-xs) 0 0 38px; /* 로고 표식 너비만큼 들여쓴다. */
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

/* 🔴 누르는 높이는 40px 이다. 줄이지 말 것 — 폰에서 손가락으로 헛누르게 된다.
   ⚠️ 여백을 준 만큼 바깥 여백을 음수로 되돌린다 — 그래야 글자 크기도 바닥글
      줄 높이도 안 바뀌고 눌리는 넓이만 커진다. 한쪽만 고치지 말 것.
   ⚠️ 링크가 늘어 이 줄이 두 줄로 접히면 위아래 판정 자리가 2px 겹친다. 접히지
      않는 것이 전제다 — 링크를 더하면 가장 좁은 폰에서 한 줄인지 확인할 것. */
.foot__links a {
  color: var(--text-sub);
  text-decoration: none;
  padding: 9px 0;
  margin: -9px 0;
}

.foot__links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.foot__biz {
  margin: 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
  line-height: 2;
}

/* 🔴 짧은 칸은 「키: 값」이 갈라지지 않게 한 덩이로 둔다. */
.foot__biz span {
  white-space: nowrap;
}

/* 🔴 긴 칸(주소)은 줄바꿈을 허용한다 — 안 그러면 좁은 폰에서 끝이 화면 밖으로
   나가 통째로 안 보인다. 법으로 표시해야 하는 줄이라 잘리면 안 적은 것과 같다. */
.foot__biz .is-long {
  white-space: normal;
}

/* 구분자는 **앞 칸에 붙여** 그린다 — 칸 사이에 글자로 두면 줄이 바뀔 때
   세로 막대만 줄 앞이나 줄 끝에 홀로 남는다. */
.foot__biz .foot__biz-item:not(:last-child)::after {
  content: " | ";
  white-space: pre;
}

/* 폰에서는 칸마다 한 줄씩 — 구분자 없이 세로로 읽는 편이 훨씬 낫고, 어느 폭에서도
   잘릴 자리가 없어진다.
   🔴 한 줄씩 세우는 규칙은 **클래스가 아니라 `span` 에 건다** — 글자를 그리는
      스크립트가 늦거나 막혀도 이 자리는 지켜져야 한다. 법으로 표시하는 줄이라
      옆으로 흘러 잘리는 것이 가장 나쁘다. */
@media (max-width: 600px) {
  .foot__biz {
    line-height: 1.7;
  }

  .foot__biz span {
    display: block;
    white-space: normal;
  }

  .foot__biz .foot__biz-item:not(:last-child)::after {
    content: none;
  }
}

/* 아직 안 정해진 값. 채우면 이 표시가 저절로 사라진다(js/site.js). */
.todo {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--todo-bg);
  color: var(--todo-text);
  font-weight: 600;
}

.foot__ai {
  margin: var(--gap-md) 0 0;
  padding-top: var(--gap-md);
  border-top: 1px solid var(--border);
  color: var(--text-sub);
  font-size: var(--fs-xs);
}

/* ── 가격: 시범 안내 띠 ──────────────────────────── */
.ribbon {
  max-width: var(--prose-width);
  margin: 0 auto var(--gap-xl);
  padding: 12px var(--gap-lg);
  background: var(--blue-weak);
  border-radius: var(--radius-md);
  color: var(--blue-hover);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ── 가격: 탭 ─────────────────────────────────
   ⚠️ 지금은 아무 페이지도 안 쓴다 — 등급 탭이 돌아올 자리라 남겨 뒀다.
      `js/site.js` 의 `initTabs` 와 짝이니 지울 때도 함께 지울 것. */
.tabs {
  display: flex;
  gap: var(--gap-xs);
  width: fit-content;
  margin: 0 auto var(--gap-xl);
  padding: 4px;
  background: var(--surface-strong);
  border-radius: var(--radius-full);
}

.tabs__btn {
  padding: 9px 22px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.tabs__btn[aria-selected="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

/* ── 가격: 요금 카드 ─────────────────────────────── */
.plans {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--gap-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* 🔴 요금제 4단. 넷이 한 줄에 들어가려면 최소 폭을 낮춰야 한다.
   ⚠️ 좁은 화면에서는 `auto-fit` 이 알아서 2열·1열로 내려간다. */
.plans--4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* 🔴 요금제 둘. 넓은 화면에서 그대로 두면 카드 한 장이 500px 을 넘어 글자보다
   빈자리가 커 보인다 — 묶음 폭을 잡고 가운데에 세운다.
   ⚠️ 좁은 화면에서는 `auto-fit` 이 알아서 한 줄에 한 장으로 내려간다. */
.plans--2 {
  max-width: 760px;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 「Free 의 모든 기능에 다음 기능 포함:」 줄. `plan__for` 자리를 그대로 쓰되 앞 등급을
   가리키는 말이라 조금 더 눌러 둔다. ⚠️ Free 는 이 줄이 비어 있는데, `plan__for` 의
   `min-height` 가 자리를 잡아 줘서 카드 넷의 금액 줄이 나란히 선다. */
.plan__lead {
  font-weight: 600;
}

/* 🔴 아직 없는 기능 — 손님에게 여는 날까지 안 만들어졌으면 그 줄을 뺀다.
   그때까지는 옅게 + 「준비 중」 표로 갈라 둔다.
   ⚠️ 체크(✓)까지 함께 흐려야 한다 — 파란 체크가 그대로면 「된다」로 읽힌다. */
.plan__soon {
  color: var(--text-weak);
}

/* ⚠️ `.plan__list li::before` 보다 명시도가 높아야 한다 — `.plan__soon::before`
   로만 적으면 밀려서 체크가 파란 채로 남는다. */
.plan__list li.plan__soon::before {
  color: inherit;
}

/* 🔴 한국어는 낱말 단위로 끊는다. 카드가 좁아 그냥 두면 각주 `*` 만 다음 줄에
   혼자 남는다. */
.plan__list {
  word-break: keep-all;
}

/* 🔴 빈 줄은 아예 안 그린다 — 그대로 두면 카드 이름 아래가 휑하게 뚫린다.
   ⚠️ 글이 든 카드끼리는 `.plan__for` 의 `min-height` 가 금액 줄을 나란히 세운다.
      카드 하나만 이 줄을 비우면 그 카드의 금액 줄이 위로 올라온다 — 비우지 말고
      한 줄을 적을 것. */
.plan__lead:empty {
  display: none;
}

.plan__soon-tag {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* 표준 등급. 눈이 먼저 가야 한다. */
.plan--pick {
  border-color: var(--blue);
  box-shadow: var(--shadow-lift);
}

.plan__tag {
  align-self: flex-start;
  margin-bottom: var(--gap-sm);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--blue);
  color: var(--on-blue);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 🔴 한시적 할인 배지. 파란 배지(`.plan__tag`)와 갈라 보여야 한다.
   ⚠️ 색으로 판정하는 검사를 만들지 말 것 — 자동화 브라우저가 색을 강제로 어둡게
      바꿔서 거짓 실패가 난다. 클래스가 붙었나로 잰다. */
.plan__tag--sale {
  background: var(--red);
}

/* 할인 전 정가. 취소선 + 흐리게 — 눈이 가는 곳은 실제 낼 값이라야 한다. */
.plan__was {
  /* `.plan__price` 의 `gap: 4px` 만으로는 정가와 할인가가 붙어 보인다. */
  margin-right: 4px;
  color: var(--text-weak);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: line-through;
}

.plan__name {
  margin: 0 0 var(--gap-xs);
  font-size: var(--fs-title);
  font-weight: 700;
}

.plan__for {
  margin: 0 0 var(--gap-lg);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  /* 설명 길이가 달라도 아래 금액 줄이 카드끼리 나란히 서게 한다. */
  min-height: 2.6em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  /* 🔴 위 여백을 반드시 못 박는다. `<p>` 의 기본값은 `1em` 이라 글자 크기를 따라가서,
     카드마다 금액 글자 크기가 다르면 두 카드의 금액 줄이 어긋난다. */
  margin-top: var(--gap-lg);
  margin-bottom: var(--gap-xs);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -1px;
}

/* ⚠️ 「/월」은 한 덩이다 — 안 막으면 카드가 좁아질 때 `/` 와 `월` 이 두 줄로 갈린다. */
.plan__per {
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.plan__vat {
  margin: 0 0 var(--gap-lg);
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

.plan__meta {
  display: grid;
  gap: var(--gap-xs);
  margin: 0 0 var(--gap-lg);
  padding: var(--gap-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.plan__meta > div {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.plan__meta dt {
  color: var(--text-sub);
}

.plan__meta dd {
  margin: 0;
  font-weight: 700;
}

.plan__list {
  margin: 0 0 var(--gap-lg);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gap-sm);
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.plan__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--gap-sm);
}

.plan__list li::before {
  content: "✓";
  color: var(--blue);
  font-weight: 700;
}

.plan__btn {
  margin-top: auto;
}

/* 아직 요금을 안 정한 칸. */
.plan--pending {
  background: var(--surface);
  border-style: dashed;
}

.plan--pending .plan__price {
  color: var(--text-weak);
  font-size: 22px;
}

/* 요금 카드 아래 한 줄 안내(추가 묶음 등). */
.plans__note {
  max-width: var(--prose-width);
  margin: var(--gap-lg) auto 0;
  padding: var(--gap-md) var(--gap-lg);
  background: var(--surface);
  border-radius: var(--radius-md);
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.plans__note strong {
  color: var(--text);
}

/* ── 가격: 자주 묻는 질문 ────────────────────────── */
.faq {
  max-width: var(--prose-width);
  margin: 0 auto;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--text-weak);
  font-size: 20px;
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "−";
}

.faq__a {
  margin: 0 0 var(--gap-md);
  padding-right: 36px;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.faq__a strong {
  color: var(--text);
}

/* ── 문의 폼 (contact.html) ─────────────────────────
   한 장짜리 화면이라 좁게 가운데로 모은다. 칸을 옆으로 나누지 않는 이유는
   폰에서 두 줄로 접히면 무엇이 한 쌍인지 눈으로 안 잡히기 때문이다. */
.form-page {
  max-width: 560px;
  padding-top: var(--gap-2xl);
  padding-bottom: var(--gap-2xl);
}

.form-page__title {
  margin: 0 0 var(--gap-sm);
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.form-page__sub {
  margin: 0 0 var(--gap-xl);
  color: var(--text-sub);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.form-page__sub strong {
  color: var(--text);
}

/* ── 설정 화면의 「로그인한 계정」 자리 ──
   🔴 두 줄을 상자 하나로 묶는 이유 — 이름 줄과 이메일 줄의 아래 여백을 각자 두면
      둘 중 하나가 없을 때 여백이 갈린다. 여백은 상자가 한 번만 갖는다.
   🔴 값은 `css/base.css` 의 토큰만 쓴다 — 여기에 색을 직접 적으면 어두운 화면에서
      혼자 안 바뀐다. */
.account-id {
  margin: 0 0 var(--gap-xl);
}

.account-id__who {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* 🔴 `overflow-wrap: anywhere` 를 지우지 말 것 — 이메일에는 띄어쓰기가 없어서
   긴 주소가 통으로 한 낱말이 된다. 좁은 폰에서 가로로 삐져나가 화면 전체가 옆으로
   밀린다.
   ⚠️ `break-all` 이 아니다 — 그건 짧은 주소까지 아무 데서나 자른다. */
.account-id__mail {
  margin: 2px 0 0;
  color: var(--text-weak);
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* 보낼 곳이 아직 없을 때 폼 대신 나오는 상자.
   ⚠️ 폼을 그려 놓고 제출만 막으면 다 쓰고 나서야 못 보내는 것을 안다. */
.form-notice {
  padding: var(--gap-xl) var(--gap-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}

.form-notice__title {
  margin: 0 0 var(--gap-sm);
  font-size: var(--fs-title);
  font-weight: 700;
}

.form-notice__text {
  margin: 0 0 var(--gap-lg);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* 필수 표시는 별표 대신 글자로 — 별표는 무엇이 필수인지 읽어야 알 수 있다. */
.field__label i,
.form__agree i {
  margin-left: var(--gap-xs);
  color: var(--blue);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 500;
}

.field__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body);
}

.field__input:focus {
  border-color: var(--blue);
}

/* 고르는 칸만 글자가 안쪽으로 밀려 다른 칸과 왼쪽 줄이 안 맞는다(브라우저 기본).
   기본 모양을 끄고 화살표를 직접 그려 넣어야 줄이 맞는다 —
   ⚠️ `appearance: none` 만 주면 화살표가 통째로 사라진다. */
select.field__input {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7684' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field__input--area {
  min-height: 140px;
  line-height: 1.6;
  resize: vertical;
}

/* 안 채운 칸은 빨갛게. 보내기를 눌러 본 뒤에만 켠다(`.form--tried`) —
   처음부터 빨가면 아직 안 쓴 칸까지 잘못한 것처럼 보인다. */
.form--tried .field__input:invalid {
  border-color: var(--red);
}

/* 🔴 동의 체크박스도 함께 켠다. 여기는 `.field__input` 이 아니라서 위 줄이 안 걸리고,
   그대로 두면 「빨간 칸을 채워 주세요」라고 하는데 빨간 칸이 하나도 없는 상태가 된다.
   체크박스는 테두리 색이 안 먹으므로 바깥선으로 표시한다. */
.form--tried .form__agree input:invalid {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.form--tried .form__agree:has(input:invalid) {
  color: var(--red);
}

.field__hint {
  margin: 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.field__hint strong {
  color: var(--text-sub);
}

.form__agree {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}

.form__agree input {
  margin-top: 2px;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.form__agree a {
  color: var(--blue);
  text-decoration: underline;
}

.form__msg {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 10%, var(--bg));
  color: var(--red);
  font-size: var(--fs-sm);
}

.form__msg--good {
  background: var(--blue-weak);
  color: var(--blue-hover);
}

/* 오류 코드 — 문장 뒤에 작게 붙는다(손님이 문의할 때 전하는 숫자).
   ⚠️ 색을 따로 안 준다 — 부모 색을 흐리게만 쓰므로 어두운 화면에서도 저절로 맞다.
   🔴 너무 흐리게 하지 말 것 — 0.72 로 뒀더니 밝은 화면에서 대비가 2.43:1 까지
      떨어졌다. 전해야 하는 숫자라 읽히는 것이 먼저다. */
.form__code {
  opacity: 0.9;
  font-size: 0.9em;
  white-space: nowrap;
}

/* 안내 문장 안에 끼우는 링크(지금은 500 일 때의 「문의로 알리기」 하나). */
.form__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.form__submit {
  margin-top: var(--gap-xs);
}

/* ── 내 계정 — 탈퇴 확인 ─────────────────
   [회원 탈퇴] 를 누르면 나오는 한 번의 확인.
   ⚠️ 브라우저 `confirm()` 을 쓰지 않는다 — 무엇이 지워지는지 적을 자리가 없고
      우리 화면과 모양이 갈린다. */
/* 🔴 목록 바로 뒤에 오는 안내 줄에 숨을 준다 — 안 주면 목록의 마지막 항목처럼
   보인다. */
.callout__list + .field__hint {
  margin-top: var(--gap-md);
}

.leave-confirm {
  margin-top: var(--gap-md);
  border-color: color-mix(in srgb, var(--red) 35%, var(--border));
}

.leave-confirm__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}

/* 해지 확인은 탈퇴 확인과 **같은 모양이되 빨간 테두리를 뺀다** — 되돌릴 수 있는
   일이라 같은 무게로 보이면 안 된다. */
.leave-confirm--calm {
  border-color: var(--border);
}

/* ── 설정 화면의 요금제 상자 ─────────────
   서버가 준 것을 그대로 그리는 자리라 **글자를 여기에 적지 않는다** — 칸 이름도 값도
   `js/account.js` 가 넣는다.
   ⚠️ 좁은 화면에서는 이름과 값이 두 줄로 접힌다 — 값이 잘리는 것보다 낫다. */
.plan-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-facts__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-xs) var(--gap-md);
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* 첫 줄 위에는 선을 안 긋는다 — 제목과 붙어 두 줄로 보인다. */
.plan-facts__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.plan-facts__key {
  color: var(--text-sub);
}

/* 🔴 `overflow-wrap: anywhere` 를 지우지 말 것 — 카드 표시처럼 띄어쓰기가 없는 값이
   좁은 폰에서 가로로 삐져나간다. */
.plan-facts__val {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* 값 뒤에 붙는 상태 글자(해지 예약 등)는 흐리게 — 값과 같은 무게면 무엇이 값인지
   흐려진다. */
.plan-facts__val small {
  color: var(--text-weak);
  font-weight: 500;
}

/* 요금제 상자의 단추 줄 — 위 목록과 숨을 준다. */
.plan-facts + [data-plan-note],
.plan-facts + [data-start-wrap] {
  margin-top: var(--gap-md);
}

/* ── 🔴 나가는 길 둘 — 구독 해지 · 회원 탈퇴 ─────────
   🔴 **서로의 선행 조건이 아니다.** 나란한 단추 둘로 두고 한쪽을 다른 쪽 상자 안에
      넣지 않는다 — 안에 넣으면 순서가 있는 것처럼 읽히고, 한쪽이 꺼졌을 때 다른
      쪽까지 함께 사라진다.
   ⚠️ 좁은 화면에서는 `flex-wrap` 이 저절로 아래로 쌓는다 — 폭을 재서 가르지 않는다. */
.exits {
  max-width: var(--prose-width);
  margin: var(--gap-md) auto 0;
}

.exits__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}

/* 눌리지 않는 단추는 흐리게. ⚠️ 빨간 단추에는 이미 같은 규칙이 있다 — 값을 갈라
   적지 말 것. */
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ── 🔴 화면 밝기 고르기 ─────────────
   설정 화면의 라디오 셋(기기 설정 / 밝게 / 어둡게).

   ⚠️ 동그란 라디오를 숨기고 칩처럼 그린다 — 기본 라디오는 글자와 떨어져 있어
      무엇이 골라졌는지 흐리다.
   🔴 `input` 을 `display: none` 으로 지우지 말 것 — 키보드로 못 고르게 되고
      낭독기에서도 사라진다. 눈에만 안 보이게 하고 자리는 남긴다.
   ⚠️ 고른 것을 색으로만 알리지 않는다 — 테두리도 함께 진해진다. */
.theme-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}

.theme-pick__opt {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* 눈에서만 지운다 — 키보드와 낭독기에는 그대로 있다(위 🔴). */
.theme-pick__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-pick__opt:hover {
  border-color: var(--text-weak);
  color: var(--text);
}

.theme-pick__opt:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-weak);
  color: var(--blue-hover);
}

/* 키보드로 옮겨 다닐 때 어디 있는지 보여야 한다. */
.theme-pick__opt:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── 앱 껍데기(index.html) ─────────────────────────
   질문·답 화면을 걷어낸 자리다. 본문은 서비스마다 새로 그린다. */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-shell__body {
  flex: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--gap-xl) var(--gap-lg);
}

.app-shell__slot {
  padding: var(--gap-xl) var(--gap-lg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-sub);
  text-align: center;
}

.app-shell__row {
  display: flex;
  gap: var(--gap-sm);
  margin: var(--gap-lg) 0 0;
}

.app-shell__row input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

.app-shell__out {
  margin: var(--gap-md) 0 0;
  white-space: pre-wrap;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

/* 화면 아래 고지 한 줄. 서비스가 꼭 밝혀야 하는 말이 있으면 여기 들어간다. */
.composer__hint {
  margin: var(--gap-md) 0 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/* 약관·방침·사업자 정보로 가는 작은 길. 앱 화면에는 바닥글이 없어 여기가 유일한 통로다. */
.composer__legal {
  margin: var(--gap-xl) 0 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

.composer__legal a {
  color: inherit;
  text-decoration: none;
}

.composer__legal a:hover {
  color: var(--text-sub);
  text-decoration: underline;
}

.composer__legal span {
  margin: 0 4px;
  opacity: 0.6;
}