/* 소개·가격 페이지 레이아웃. 빌드 없이 그대로 뜬다.
   색·글꼴·간격은 앱과 같은 `base.css` 를 쓴다 — 여기서 다시 정의하지 않는다.
   아래 네 가지만 이 두 페이지에만 필요해서 여기 둔다. */

:root {
  /* 소개·가격은 앱보다 넓다. 앱은 대화창 하나라 720px 이지만 이쪽은 카드 셋을 나란히 놓는다. */
  --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__sub {
  margin: 0;
  color: var(--text-sub);
  font-size: clamp(15px, 1.6vw, 17px);
}

.eyebrow {
  display: block;
  margin-bottom: var(--gap-sm);
  color: var(--blue);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ── 머리 메뉴 ────────────────────────────────────── */
.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);
}

/* 첫 화면 아래에 실제 질문·답을 흉내낸 상자. 무엇을 하는 서비스인지
   글로 설명하는 것보다 한 번 보여주는 편이 빠르다. */
.demo {
  max-width: 640px;
  margin: var(--gap-2xl) auto 0;
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
}

.demo__q {
  width: fit-content;
  max-width: 90%;
  padding: 10px 16px;
  margin: 0 0 var(--gap-md) auto;
  background: var(--blue);
  border-radius: 16px 16px 4px 16px;
  color: var(--on-blue);
  font-size: var(--fs-sm);
}

.demo__a {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.demo__cond {
  display: block;
  margin-top: var(--gap-sm);
  padding-top: var(--gap-sm);
  border-top: 1px dashed var(--border);
  color: var(--text-sub);
}

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

/* 장면이 넷이라 3열이면 하나가 외따로 남는다. 넓은 화면에서 2열로 떨어지게 한다.
   ⚠️ `min(420px, 100%)` 의 `min()` 을 빼지 말 것 — 그냥 420px 로 두면 좁은 화면에서
   칸이 화면보다 넓어져 **페이지 전체가 옆으로 밀린다**. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.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);
}

/* 카드 안의 예시 질문. 이렇게 물어도 된다는 것을 보여준다. */
.card__ask::before {
  content: "“";
}

.card__ask::after {
  content: "”";
}

.card__ask {
  margin: 0 0 var(--gap-sm);
  color: var(--text-weak);
  font-size: var(--fs-xs);
  font-style: normal;
}

/* ── 장면 ────────────────────────────────────────── */
.scene {
  padding: var(--gap-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-md);
}

.scene__when {
  margin: 0 0 var(--gap-sm);
  color: var(--blue);
  font-size: var(--fs-xs);
  font-weight: 700;
}

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

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

/* ── 줄 목록(체크) ───────────────────────────────── */
.checks {
  max-width: var(--prose-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gap-md);
}

.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--gap-md);
  align-items: start;
}

.checks li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: var(--radius-full);
  background: var(--blue-weak);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.checks strong {
  display: block;
  font-weight: 700;
}

.checks span {
  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);
}

/* ── 맺음 부름 ───────────────────────────────────── */
.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);
}

.foot__links a {
  color: var(--text-sub);
  text-decoration: none;
}

.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;
}

/* 아직 안 정해진 값. 채우면 이 표시가 저절로 사라진다(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));
}

/* 「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;
}

/* 폰에서는 카드가 세로로 쌓여 높이를 맞출 이유가 없다 — Free 는 이 줄이 비어 있어
   그대로 두면 이름 아래가 휑하게 뚫린다. PC 는 그대로 — 거기서는 이 빈자리가 카드
   넷의 금액 줄을 나란히 세운다. */
@media (max-width: 560px) {
  .plans--4 .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;
}

.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);
}

/* ── 가격: 기능 비교표 ─────────────────────────
   ⚠️ 지금은 안 쓴다 — 등급이 늘면 그대로 쓸 수 있어 남겨 두었다.
   ⚠️ `.plan--pick`(표준 등급 강조)도 같은 이유로 남아 있다. */
/* 좁은 화면에서는 표만 옆으로 밀린다. 페이지 전체가 밀리면 안 된다. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.cmp {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cmp th,
.cmp td {
  padding: 14px var(--gap-md);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.cmp thead th {
  position: sticky;
  top: 62px; /* 머리 메뉴 높이만큼 내려서 붙는다. */
  z-index: 1;
  background: var(--surface);
  /* 바탕이 거의 흰색이라 굵은 줄이 없으면 머리줄이 본문에 묻힌다. */
  border-bottom: 2px solid var(--border);
  font-size: var(--fs-body);
  font-weight: 700;
}

.cmp th:first-child,
.cmp td:first-child {
  min-width: 210px;
  text-align: left;
  color: var(--text-sub);
  font-weight: 500;
}

.cmp tbody th {
  font-weight: 500;
}

/* 절 제목 줄. */
.cmp__group th {
  background: var(--surface-strong);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: left;
}

.cmp .yes {
  color: var(--blue);
  font-weight: 700;
}

.cmp .no {
  color: var(--text-weak);
}

.cmp__num {
  font-weight: 700;
  color: var(--text);
}

.cmp__sub {
  display: block;
  color: var(--text-weak);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* ── 가격: 자주 묻는 질문 ────────────────────────── */
.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);
}

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

   ⚠️ 동그란 라디오를 숨기고 칩처럼 그린다 — 기본 라디오는 글자와 떨어져 있어
      무엇이 골라졌는지 흐리다.
   🔴 `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;
}