/* ============================================================
   카드 혜택 화면 공통 스타일
   사용법
   1) <head>에 넣기
      <link rel="stylesheet" href="../common/benefit.css">
   2) 카드마다 다른 색은 html의 <style>에서 아래 변수만 지정
      --title-bg   상단 그라데이션 위쪽 색
      --badge-bg   혜택 배지 배경 / --badge-text 배지 글자
      --hero-bg    연간 혜택 영역 배경
   3) 섹션 위아래 여백은 class로 지정
      sec-first  : 첫 번째 혜택 섹션 (위 40 / 아래 40)
      sec-spaced : 앞 섹션과 띄우는 섹션 (위 40 / 아래 32)
      (없으면 위아래 0)
   ============================================================ */
:root {
  --blue: #0047ff;
  --blue-box: #f2f6ff;
  --green-box: #edf6ef;
  --yellow-box: #fff7e8;
  --red-box: #ffeaee;
  --red-text: #ff2f54;
  --gray-bg: #f2f5f9;
  --text-primary: #131720;
  --text-secondary: #4a5567;
  --text-strong: #191f28;
  --text-label: #6b7684;
  --text-darkgrey: #494949;
  --line: #e3e8ef;

  /* 카드별로 바꾸는 색 (기본값) */
  --title-bg: #e6edff;
  --badge-bg: #e6edff;
  --badge-text: var(--blue);
  --hero-bg: #e6edff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #fff;
  color: var(--text-primary);
  /* 내부망: 외부 웹폰트 없이 기기 폰트 사용 (Android=Roboto, iOS=SF/Apple SD Gothic Neo) */
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 글자가 위아래로 긴 문자(미얀마어·크메르어·싱할라어)는 줄 간격을 넓혀 잘림 방지 */
:lang(my) .page *, :lang(km) .page *, :lang(si) .page * { line-height: 1.6; }

.page { max-width: 480px; margin: 0 auto; }

/* Title + 카드 */
.title-holder { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; background: linear-gradient(to top, #fff, var(--title-bg)); text-align: center; }
/* 카드 신청 화면(*_apply.html): 카드 이름·이미지 없이 월회비부터, 배경 없음 */
.title-holder.apply { background: none; }
.card-name { font-size: 22px; font-weight: 700; line-height: 28px; }
.card-stage { padding: 16px 0; perspective: 600px; }
.card-spin { width: 92px; height: 143px; transform-style: preserve-3d; will-change: transform; }
.card-spin img { display: block; width: 92px; height: 143px; border-radius: 6px; object-fit: cover; }
.card-fee { padding-bottom: 12px; font-size: 14px; color: var(--text-secondary); }
.card-fee span { display: block; padding-bottom: 4px; }
.card-fee b { display: block; color: var(--text-primary); }
/* 요금이 두 묶음(월회비 + 발급 수수료)인 카드 */
.card-fee p + p { padding-top: 8px; }
.card-fee p b { line-height: 1.4; }
.card-benefit { display: inline-block; padding: 4px 16px; border-radius: 8px; background: var(--badge-bg); font-size: 16px; line-height: 20px; color: var(--badge-text); }

/* Hero summary */
.hero { background: var(--hero-bg); padding: 32px 16px; }
.hero-title { padding-bottom: 20px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; }
.hero-title .accent-line { display: block; color: var(--blue); }
.hero-title .rest { display: block; }
.hero-title .accent { color: var(--blue); }

.summary { display: flex; background: #fff; border-radius: 16px; padding: 16px 0; }
.summary-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; }
.summary-item + .summary-item { border-inline-start: 1px solid var(--line); }
.summary-label { padding: 4px 0; font-size: 14px; font-weight: 700; color: var(--text-label); }
.summary-amount { font-size: 16px; font-weight: 700; line-height: 20px; color: var(--text-strong); }
.summary-unit { font-size: 14px; line-height: 1.4; color: var(--text-secondary); }

/* Icons: Figma 아이콘 프레임 크기/위치 그대로 */
.ic { position: relative; flex-shrink: 0; }
.ic img { position: absolute; display: block; }
.ic-32 { width: 32px; height: 32px; }
.ic-40 { width: 40px; height: 40px; }
.ic-32.insurance img { left: 5px; top: 3px; }
.ic-32.health img { left: 4px; top: 3.83px; }
.ic-32.rewards img { left: 4px; top: 3.75px; }
.ic-40.insurance img { left: 6.08px; top: 3.54px; }
.ic-40.health img { left: 5px; top: 4.79px; }
.ic-40.rewards img { left: 5px; top: 4.69px; }
.ic-40.life img { left: 0; top: 0; }

/* Benefit sections */
.section { padding: 0 16px; }
.section.sec-first { padding-top: 40px; padding-bottom: 40px; }
.section.sec-spaced { padding-top: 40px; padding-bottom: 32px; }
.section.rewards.sec-spaced{ padding-bottom: 0; }
.section-head { display: flex; align-items: center; padding-bottom: 16px; }
.section-title { padding-inline-start: 8px; font-size: 20px; font-weight: 700; line-height: 28px; }
.section-title span { display: block; }

.box { padding: 16px; border-radius: 16px; }
.box.insurance { background: var(--blue-box); }
.box.health { background: var(--green-box); }
.box.rewards { background: var(--yellow-box); }
.box.life { background: var(--red-box); }
.row-title { padding-bottom: 4px; font-size: 16px; line-height: 20px; }
.row-value { font-size: 16px; font-weight: 700; line-height: 20px; }
.row-desc { padding-top: 8px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
/* 보험 박스: 설명 없이 제목/금액만, 항목 사이 12px */
.box.insurance .row + .row { padding-top: 12px; }
/* 나머지 박스: 항목 사이 흰 구분선 */
.box.divided .row { padding: 16px 0 12px; border-bottom: 1px solid #fff; }
.box.divided .row:first-child { padding-top: 0; }
.box.divided .row:last-child { padding-bottom: 0; border-bottom: 0; }
.section-note { padding-top: 12px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }

.divider { height: 6px; background: var(--gray-bg); }

/* 월회비 / 회원 혜택 */
.block { padding: 32px 16px; }
.block-title { font-size: 20px; font-weight: 700; line-height: 32px; color: var(--text-darkgrey); }
.block-desc { padding-top: 4px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }

.plan { display: flex; align-items: center; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; line-height: 20px; }
.plan:first-of-type { padding-top: 24px; }
.plan:last-child { padding-bottom: 0; border-bottom: 0; }
.plan-name { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.plan-price { flex-shrink: 0; max-width: 60%; text-align: end; }
.tag { padding: 4px 8px; border-radius: 8px; background: var(--red-box); font-size: 12px; font-weight: 700; line-height: normal; color: var(--red-text); }

.acc-item { border-bottom: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 0; }
.acc-head { display: flex; align-items: flex-start; width: 100%; padding: 16px 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.36; color: var(--text-primary); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 항목이 여러 개면 첫 항목 위 24px, 하나뿐이면 16px (Figma 기준) */
.acc-item:first-child:not(:last-child) .acc-head { padding-top: 24px; }
.acc-item:last-child .acc-head { padding-bottom: 0; }
.acc-head span { flex: 1 1 0; min-width: 0; }
.acc-head img { flex-shrink: 0; margin-top: 2px; transition: transform .2s ease; }
.acc-head[aria-expanded="true"] img { transform: rotate(180deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.acc-panel > div { overflow: hidden; min-height: 0; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-body { padding-bottom: 16px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.acc-item:last-child .acc-body { padding-top: 16px; padding-bottom: 0; }
/* 펼친 내용: 글머리표 목록(ul.acc-list) 또는 문단(p) */
.acc-list { list-style: none; }
.acc-list li { position: relative; padding-inline-start: 20px; }
.acc-list li::before { content: "•"; position: absolute; inset-inline-start: 6px; }
.acc-list li + li,
.acc-body > * + * { padding-top: 4px; }
.acc-sub { display: block; }

@media (prefers-reduced-motion: reduce) {
  .acc-panel, .acc-head img { transition: none; }
}