:root {
  --ground: #2A4494;
  --ground-deep: #1D3070;
  --paper: #FBFCFE;
  --ink: #121722;
  --sub: #4B5466;
  --line: #B9C1CF;
  --soft: #E4EAFF;
  --lead: #F2F5FF;
  --orange: #B8430B;
  --zero: #6B7385;
  --blue-tint: #E4EAFE;
  --orange-tint: #FBE6D8;
  --orange-deep: #9A3708;
  --sans: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Sans KR', ui-monospace, monospace;
  --display: 'Black Han Sans', 'IBM Plex Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
p, h1, h2, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
h1:focus, p:focus { outline: none; }

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

/* 화면 */
.view {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.view--center { justify-content: center; align-items: flex-start; }
.view--start { min-height: 0; padding: 0; gap: 0; }
.view--question { padding-top: 16px; }
.view--receipt, .view--board { padding-left: 20px; padding-right: 20px; }
html:not(.js-ready):not(.has-sheet) #view-loading { display: none; }
html:not(.js-ready).has-sheet #view-start { display: none; }

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.about { padding: 32px 24px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; border-top: 1px dashed rgba(255, 255, 255, 0.35); }

/* 글자 */
.label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--soft); }
.label--section { margin-bottom: 12px; }
.lead { font-size: 16px; line-height: 1.6; color: var(--lead); text-wrap: pretty; }
.display { font-family: var(--display); font-weight: 400; text-wrap: balance; }
.display--xl { font-size: 56px; line-height: 1.08; }
.display--lg { font-size: 40px; line-height: 1.18; }
.display--md { font-size: 28px; line-height: 1.25; margin-top: 8px; }
.display--sm { font-size: 24px; line-height: 1.2; }
.display--q { font-size: 38px; line-height: 1.22; }
.display--paper { font-size: 28px; line-height: 1.15; color: var(--ink); }
.display--result { font-size: 36px; line-height: 1.15; margin-top: 6px; }
.display--count { font-size: 44px; line-height: 1.1; }
.invite__title { margin-top: 12px; }
.fineprint { font-size: 12px; line-height: 1.5; color: var(--soft); text-align: center; }
.fineprint--end { margin-top: auto; padding-top: 8px; }
.notice { font-size: 14px; color: var(--ink); background: var(--orange-tint); padding: 10px 14px; border-radius: 4px; }
.tone-blue { color: var(--ground); }
.tone-orange { color: var(--orange); }
.tone-ink { color: var(--ink); }
.tone-sub { color: var(--sub); }
.num { font-family: var(--mono); font-weight: 500; }
.num--minus { color: var(--orange); }
.num--zero { color: var(--zero); }

/* 종이 */
.paper { background: var(--paper); color: var(--ink); }
.paper--mini { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.paper--card { padding: 6px 18px; border-radius: 4px; }
.paper--receipt { padding: 22px 20px 20px; }
.paper__label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--sub); }
.paper__label.tone-blue { color: var(--ground); font-weight: 600; }
.paper__label.tone-orange { color: var(--orange); font-weight: 600; }
.receipt-wrap { display: flex; flex-direction: column; }
.zig {
  height: 10px;
  background:
    linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0 / 10px 10px repeat-x,
    linear-gradient(225deg, var(--paper) 50%, transparent 50%) 0 0 / 10px 10px repeat-x;
}
.rule { height: 0; }
.rule--dash { border-top: 1px dashed var(--line); margin: 14px 0 12px; }
.rule--solid { border-top: 2px solid var(--ink); margin: 8px 0 0; }
.paper--mini .rule--dash { margin: 4px 0 2px; }
.mini-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.mini-result { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mini-result__note { font-size: 14px; color: var(--sub); }

.kv { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.kv--last { border-bottom: 0; }
.kv--plain { padding: 3px 0; border-bottom: 0; }
.kv__k { font-size: 14px; color: var(--sub); flex-shrink: 0; }
.kv__v { font-size: 15px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* 도장 */
.stamp {
  width: 68px; height: 68px; flex-shrink: 0;
  border: 3px solid currentColor; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-10deg);
}
.stamp__big { font-family: var(--display); font-size: 20px; line-height: 1.15; }
.stamp__small { font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1.2; }
.stamp--lg { width: 88px; height: 88px; transform: rotate(-12deg); }
.stamp--lg .stamp__big { font-size: 26px; line-height: 1.1; }
.stamp--lg .stamp__small { font-size: 12px; line-height: 1.3; }
.stamp--white { color: #FFFFFF; }

/* 순서 */
.steps { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.steps li { display: flex; gap: 12px; }
.steps__n { font-family: var(--mono); font-weight: 600; color: var(--soft); }

/* 버튼과 입력 */
.actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.actions--flow { margin-top: 0; gap: 10px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.field__label { font-size: 14px; font-weight: 600; }
.field__hint { font-weight: 400; color: var(--soft); }
.field__error { font-size: 14px; color: #FFFFFF; background: var(--orange); padding: 8px 12px; border-radius: 4px; }
.field {
  height: 52px; padding: 0 16px; width: 100%;
  border: 2px solid #FFFFFF; border-radius: 10px;
  background: transparent; color: #FFFFFF; font-size: 16px;
}
.field::placeholder { color: var(--soft); opacity: 1; }
.btn {
  min-height: 56px; padding: 0 18px; width: 100%;
  border: 2px solid transparent; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--paper); color: var(--ink); }
.btn--primary:hover { background: #FFFFFF; }
.btn--ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; font-size: 16px; font-weight: 600; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btnrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.textlink { align-self: center; min-height: 44px; padding: 0; border: 0; background: none; display: flex; align-items: center; font-family: inherit; font-size: 15px; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.iconbtn { width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0; background: transparent; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* 질문 */
.qbar { display: flex; align-items: center; justify-content: space-between; }
.qbar__step { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.progress { height: 6px; border-radius: 3px; background: var(--ground-deep); overflow: hidden; }
.progress__fill { height: 6px; border-radius: 3px; background: #FFFFFF; width: 14%; transition: width 0.2s ease; }
.qbody { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.qbody__hint { font-size: 15px; color: var(--soft); }
.chip { align-self: flex-start; padding: 6px 10px; border-radius: 4px; font-family: var(--mono); font-size: 13px; font-weight: 600; background: var(--blue-tint); color: var(--ground); }
.chip--penalty { background: var(--orange-tint); color: var(--orange-deep); }
.opts { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.opt {
  min-height: 64px; padding: 0 20px; width: 100%;
  border: 2px solid var(--paper); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 18px; font-weight: 700; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.opt__note { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--sub); flex-shrink: 0; }
.opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.opt[aria-pressed="true"] .opt__note { color: #C9D0DB; }

/* 정산서 */
.receipt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.receipt__head .paper__label { margin-bottom: 4px; }
.receipt__line { font-size: 15px; font-weight: 500; margin-top: 6px; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) 60px 60px; padding: 7px 0; font-size: 15px; line-height: 1.3; }
.trow > :nth-child(n+2) { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow--head { padding: 4px 0 6px; font-family: var(--mono); font-size: 12px; color: var(--sub); }
.trow--total { padding: 10px 0 0; font-weight: 700; }
.tone-blue-border { color: var(--ground); }

/* 현황 */
.board__count { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.board__count-note { font-size: 15px; font-weight: 500; color: var(--sub); }
.board__empty { margin-top: 12px; font-size: 15px; color: var(--sub); }
.board__totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.board__total--right { padding-left: 16px; border-left: 1px dashed var(--line); }
.board__total-v { font-size: 22px; font-weight: 700; line-height: 1.35; white-space: pre-line; margin-top: 2px; }
.award { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.award + .award { margin-top: 10px; }
.award__k { font-size: 13px; color: var(--sub); }
.award__v { font-size: 17px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.award__note { font-size: 13px; color: var(--sub); text-align: right; }
.board__list { padding: 4px 18px; }
.board__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.board__list li:last-child { border-bottom: 0; }
.board__name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.board__res { font-size: 14px; font-weight: 600; flex-shrink: 0; }

/* 자주 묻는 질문 */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item { padding: 0 18px; }
.faq__item summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--sub); }
.faq__item[open] summary::after { content: '−'; }
.faq__item p { padding: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--sub); }
.faq__item:focus-within { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.faq__item summary:focus-visible { outline: none; }

/* 광고 자리 */
.ad { min-height: 100px; }

/* 이미지 창 */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(10, 16, 40, 0.96); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__box { width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal__hint { font-size: 14px; line-height: 1.55; color: #FFFFFF; }
.modal__img { width: auto; max-width: 100%; max-height: 58vh; height: auto; align-self: center; display: block; border-radius: 4px; }

.toast {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30; width: max-content;
  max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 10px;
  background: var(--ink); color: #FFFFFF; font-size: 15px; font-weight: 500; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .progress__fill { transition: none; }
}

/* 한눈에 보기 */
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { padding: 4px 10px; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 4px; font-size: 13px; font-weight: 600; color: #FFFFFF; }

/* 우정 기여율 */
.ratio { display: flex; flex-direction: column; gap: 8px; }
.ratio__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ratio__tag { padding: 3px 8px; border-radius: 4px; background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 600; }
.ratio__legend { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.ratio__legend > span { min-width: 0; overflow-wrap: anywhere; }
.ratio__legend > span:last-child { text-align: right; }
.ratio__legend b { font-family: var(--mono); font-weight: 600; font-size: 17px; }
.ratio__bar { height: 12px; display: flex; gap: 2px; border-radius: 2px; overflow: hidden; background: var(--line); }
.ratio__o { background: var(--ink); }
.ratio__m { background: var(--ground); }

.rankline { font-size: 15px; font-weight: 600; line-height: 1.5; color: #FFFFFF; text-align: center; }
.sharehead { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; }
.sharehead__t { font-size: 18px; font-weight: 700; }
.sharehead__s { font-size: 14px; line-height: 1.55; color: var(--lead); }
.btn--kakao { background: #FEE500; color: #191919; }
.btn--kakao:hover { background: #FFEB3B; }
.board__who { display: flex; flex-direction: column; min-width: 0; }
.board__sub { font-size: 13px; color: var(--sub); }
.btn--sm { min-height: 48px; font-size: 15px; }

/* ===== 언어별 글꼴 ===== */
.display { font-weight: var(--display-weight, 400); }
html[lang="ja"] {
  --sans: 'IBM Plex Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Sans JP', ui-monospace, monospace;
  --display: 'Dela Gothic One', 'IBM Plex Sans JP', sans-serif;
}
html[lang="zh-Hant"] {
  --sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --mono: 'IBM Plex Mono', 'Noto Sans TC', ui-monospace, monospace;
  --display: 'Noto Sans TC', 'PingFang TC', sans-serif;
  --display-weight: 900;
}
/* 일본어·중국어는 띄어쓰기가 없어서 글자 단위로 줄을 바꿔야 넘치지 않는다. */
html[lang="ja"] body, html[lang="zh-Hant"] body { word-break: normal; line-break: strict; }
html[lang="ja"] .display--q { font-size: 30px; line-height: 1.3; }
html[lang="ja"] .display--lg { font-size: 34px; line-height: 1.25; }
html[lang="ja"] .display--xl { font-size: 52px; }
html[lang="ja"] .display--result { font-size: 32px; }
html[lang="ja"] .display--md { font-size: 25px; }
html[lang="zh-Hant"] .display--q { font-size: 34px; }

/* 맨 윗줄: 안내 문구 + 언어 선택 */
.toprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.langs { display: flex; gap: 2px; margin: -12px -8px -12px auto; }
.langs a { min-height: 44px; padding: 0 8px; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--soft); text-decoration: none; }
.langs a[aria-current="page"] { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* 현황 목록: 줄 전체가 버튼 */
.board__list li { padding: 0; display: block; }
.board__row {
  width: 100%; min-height: 56px; padding: 10px 0; border: 0; background: none; color: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.board__row:focus-visible { outline: 3px solid var(--ground); outline-offset: 2px; }
.fineprint--left { text-align: left; margin-top: 10px; }
.btn--line { background: #06C755; color: var(--ink); }
.btn--line:hover { background: #2BD970; }

.stamp__big { white-space: nowrap; }
html[lang="ja"] .stamp--lg .stamp__big { font-size: 19px; }
html[lang="ja"] .stamp__big { font-size: 17px; }
/* 일본어는 문절 단위로 줄을 바꾼다(지원하지 않는 브라우저는 글자 단위 그대로). */
html[lang="ja"] .display, html[lang="ja"] .lead, html[lang="ja"] .sharehead__t { word-break: auto-phrase; }

/* 광고 자리 */
.ad { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad__label { align-self: flex-start; font-size: 11px; line-height: 1.4; color: var(--soft); }
.ad__ph { width: 100%; max-width: 320px; height: 100px; border: 2px dashed rgba(255, 255, 255, 0.6); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--soft); }
.ad--q { min-height: 120px; margin: 4px 0 28px; }
.ad--q .ad__label { align-self: center; width: 100%; max-width: 320px; }

/* 파란 바탕 위 흰 글씨는 한 단계 굵게(가독성). 흰 종이 위 글씨는 그대로 둔다. */
body { font-weight: 500; }
.paper, .notice { font-weight: 400; }
.field { font-weight: 500; }
.field__hint { font-weight: 500; }
.label, .ad__label { font-weight: 500; }
.fineprint { font-size: 13px; }

/* 애드센스는 광고의 부모 요소에 height:auto, min-height:0 을 강제로 넣는다.
   그래도 화면이 꽉 차도록(답 버튼이 아래에 붙도록) 높이를 body에서 flex로 내려 준다. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }
.view { flex: 1 0 auto; }
.view--start { flex: 0 0 auto; }

/* 광고가 채워지지 않으면 빈 자리를 접는다(구글이 안내하는 방식).
   질문 화면은 답 버튼이 움직이지 않도록 자리를 그대로 둔다. */
.ad:not(.ad--q) ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad:not(.ad--q):has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* ===== 영어판 ===== */
html[lang="en"] {
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Anton', 'IBM Plex Sans', sans-serif;
}
html[lang="en"] body { word-break: normal; overflow-wrap: break-word; }
html[lang="en"] .display { letter-spacing: 0.01em; }
html[lang="en"] .display--xl { font-size: 58px; line-height: 1.04; }
html[lang="en"] .display--q { font-size: 40px; line-height: 1.14; }
html[lang="en"] .display--lg { line-height: 1.12; }
html[lang="en"] .display--result { line-height: 1.1; }
html[lang="en"] .stamp__big { font-size: 22px; letter-spacing: 0.02em; }
html[lang="en"] .stamp--lg .stamp__big { font-size: 28px; }
.btn--wa { background: #25D366; color: var(--ink); }
.btn--wa:hover { background: #3BE07A; }
/* 언어가 4개라 한 줄에 들어가도록 조금 좁힌다(누르는 높이 44px는 그대로). */
.langs a { padding: 0 5px; font-size: 12px; }
.langs { margin-right: -5px; }
.ratio__tag { white-space: nowrap; flex-shrink: 0; }