:root{
  color-scheme: light dark;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace;

  --bg: #FFFFFF;
  --surface: #F5F5F6;
  --surface-hover: #EDEDEF;
  --ink: #1D1D1F;
  --ink-hover: #3A3A3E;
  --ink-2: #3F3F43;
  --muted: #6B6B70;
  --line: #E5E5E8;
  --line-strong: #D2D2D7;
  --accent: #3155D4;
  --accent-soft: rgba(49,85,212,.08);
  --on-ink: #FFFFFF;

  --success: #0E7A47;
  --success-soft: #E8F5EE;
  --danger: #B4261E;
  --danger-soft: #FDECEA;
  --notice-soft: #F5F5F6;

  --ticket-bg: #F5F5F6;
  --ticket-ink: #1D1D1F;
  --ticket-tooth: 8px;

  --fs-title: 26px;  --lh-title: 1.3;  --ls-title: -0.02em; --fw-title: 700;
  --fs-lead: 16px;   --lh-lead: 1.55;  --fw-lead: 500;
  --fs-h2: 20px;     --lh-h2: 1.4;     --fw-h2: 700;
  --fs-body: 16px;   --lh-body: 1.65;  --ls-body: -0.01em;
  --fs-step: 16px;   --lh-step: 1.6;
  --fs-small: 14px;  --lh-small: 1.55;
  --fs-tab: 15px;    --fw-tab: 600;
  --fs-code: clamp(18px, 5.4vw, 22px); --ls-code: .08em; --fw-code: 600;
  --fs-btn: 17px;    --fw-btn: 650;

  --gutter: 16px;
  --task-w: 440px;
  --help-w: 440px;
  --col-gap: 56px;
  --container: 960px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px;
  --section-y: 48px;

  --r-field: 16px;
  --r-btn: 14px;
  --r-ticket: 16px;
  --icon-hero: 72px;
  --icon-row: 44px;
  --btn-h: 52px; --btn2-h: 48px; --row-h: 64px; --tab-h: 44px; --tap: 44px;
  --header-h: 60px;

  --ok: var(--success);

  /* base.css 연결 */
  --ys-ink: var(--ink); --ys-muted: var(--muted); --ys-line: var(--line);
  --ys-container: var(--container); --ys-gutter: var(--gutter);
  --ys-skip-bg: var(--ink); --ys-skip-fg: var(--on-ink);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101114; --surface:#1B1C20; --surface-hover:#232429;
    --ink:#ECECEF; --ink-hover:#FFFFFF; --ink-2:#C9C9CE; --muted:#A3A3A8; --line:#2A2B30; --line-strong:#3A3B41;
    --accent:#8EA8FF; --accent-soft:rgba(142,168,255,.12); --on-ink:#101114;
    --success:#5BD69A; --success-soft:rgba(91,214,154,.12);
    --danger:#FF8A80;  --danger-soft:rgba(255,138,128,.12);
    --notice-soft:#1B1C20; --ticket-bg:#1B1C20; --ticket-ink:#ECECEF;
  }
}
@media (min-width:768px){ :root{ --gutter:24px; } }
@media (min-width:1024px){
  :root{ --fs-title:36px; --lh-title:1.28; --fs-lead:17px; --fs-h2:22px; --fs-body:17px; --fs-code:26px; --section-y:72px; --icon-hero:88px; --header-h:68px; }
}
body{ font-family:var(--font-sans); background:var(--bg); color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); }
.hidden{ display:none !important; }
.yee-clipboard-proxy{ position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.icon { width: 20px; height: 20px; flex: none; }
.page, .site-header__inner, .site-footer__admin { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.page { padding-top: 24px; }
.site-header { height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand__tile { width: 28px; height: 28px; flex: none; }
.brand__tile rect { fill: var(--ink); }
.brand__tile path { fill: none; stroke: var(--bg); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.brand__word { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.language-switch { display: flex; gap: 2px; }
.language-link { min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.language-link:hover, .language-link.is-active { color: var(--ink); background: var(--surface); }
.task-head { margin-bottom: 24px; }
.task-head__icon { width: var(--icon-hero); height: var(--icon-hero); border-radius: 22%; box-shadow: 0 0 0 1px var(--line); margin-bottom: 16px; }
.task-head__title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); font-weight: var(--fw-title); }
.task-head__lead { margin-top: 8px; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-lead); color: var(--ink-2); max-width: 34em; }
.task-main, .help, .task-head__text { min-width: 0; }
.field-label { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.search-field { position: relative; height: 48px; margin-bottom: 12px; }
.search-field > .icon { position: absolute; top: 14px; left: 14px; color: var(--muted); pointer-events: none; }
.search-field input { width: 100%; height: 100%; border: 1.5px solid var(--line); border-radius: var(--r-field); background: var(--surface); font-size: 16px; padding: 0 14px 0 44px; }
.search-field input:focus { border: 2px solid var(--accent); }
.app-list { display: grid; gap: 8px; }
.app-row { display: grid; grid-template-columns: var(--icon-row) minmax(0,1fr) 22px; align-items: center; column-gap: 12px; min-height: var(--row-h); padding: 10px 14px; border-radius: var(--r-field); background: var(--surface); color: var(--ink); text-decoration: none; }
.app-row:hover { background: var(--surface-hover); }
.app-row.is-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.app-row__icon { width: 44px; height: 44px; border-radius: 22%; box-shadow: 0 0 0 1px var(--line); }
.app-row__name { font-size: 16px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.app-row__radio { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--muted); border-radius: 50%; }
.app-row__radio .icon { width: 14px; height: 14px; opacity: 0; }
.is-selected .app-row__radio { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.is-selected .app-row__radio .icon { opacity: 1; }
.search-empty { background: var(--surface); border-radius: 16px; padding: 20px; text-align: center; font-size: 15px; color: var(--ink-2); }
.search-empty__title { font-size: 16px; font-weight: 650; color: var(--ink); }
.search-empty .btn { margin-top: 12px; }
.noscript-note { font-size: 14px; color: var(--ink-2); background: var(--notice-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.public-form[data-count="many"] .claim { margin-top: 16px; }
.btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r-btn); font-size: var(--fs-btn); font-weight: var(--fw-btn); text-decoration: none; cursor: pointer; white-space: nowrap; padding: 0 16px; }
.btn--primary { height: var(--btn-h); background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--ink-hover); }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: var(--surface); color: var(--muted); cursor: not-allowed; transform: none; }
.btn--secondary { height: var(--btn2-h); background: var(--bg); border: 1.5px solid var(--line-strong); color: var(--ink); font-size: 16px; font-weight: 600; }
.btn--secondary:hover { background: var(--surface); }
.btn--small { height: 44px; padding-inline: 16px; }
.public-form[data-step="3"] #issue-code-button, .public-form[data-result-state="no-codes"] #issue-code-button { display: none; }
.claim-step-note { margin-top: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.fineprint { margin-top: 12px; list-style: none; padding: 0; display: grid; gap: 6px; }
.fineprint li, .result__note { display: flex; gap: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.fineprint .icon, .result__note .icon { width: 16px; height: 16px; margin-top: 3px; }
.fineprint span, .result__note span { min-width: 0; word-break: keep-all; }
.fineprint a { color: var(--ink); text-underline-offset: 3px; }
.fineprint a:hover { color: var(--accent); }
.store-row { margin-top: 12px; min-height: 44px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-link .icon { width: 18px; height: 18px; }
.store-row__hint { font-size: 14px; color: var(--muted); }
.selected-line { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.selected-line img { width: 28px; height: 28px; border-radius: 22%; }
.selected-line__label { font-size: 14px; color: var(--muted); flex: none; }
.selected-line strong { font-size: 15px; font-weight: 650; }
.copy-feedback { font-size: 14px; color: var(--success); margin-bottom: 8px; }
.copy-feedback:empty { display: none; }
.copy-feedback.is-error { color: var(--danger); }
.result { margin-bottom: 16px; }
.result__status { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.result__status > .icon { margin-top: 2px; }
.result--issued .result__status { color: var(--success); font-weight: 650; }
.result--already .result__status, .result--expired .result__status { background: var(--notice-soft); color: var(--ink-2); border-radius: 12px; padding: 12px 14px; }
.result--no-codes .result__status, .result--error .result__status, .result--select-first .result__status, .result--no-apps .result__status { background: var(--danger-soft); color: var(--danger); border-radius: 12px; padding: 12px 14px; }
.ticket { margin-top: 12px; background: var(--ticket-bg); border-radius: var(--r-ticket) var(--r-ticket) 0 0; padding: 24px 20px calc(24px + var(--ticket-tooth)/2); text-align: center; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--ticket-tooth) 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--ticket-tooth) 100%; }
.ticket__label { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ticket__code { font-family: var(--font-code); font-size: var(--fs-code); font-weight: var(--fw-code); letter-spacing: var(--ls-code); color: var(--ticket-ink); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; word-break: break-all; line-height: 1.35; font-variant-numeric: tabular-nums; }
.claim > .result { margin-bottom: 0; }
.code-display { --text-3: var(--muted); margin-bottom: 16px; }
.ticket-app { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.ticket-app img { width: 20px; height: 20px; flex: none; border-radius: 22%; }
.ticket[data-state="placeholder"] .ticket__code, .ticket[data-state="sold-out"] .ticket__code { color: var(--text-3); user-select: none; -webkit-user-select: none; }
.ticket__hint { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-3); }
.ticket[data-state="sold-out"] .ticket__hint { color: var(--danger); }
/* Keep the receipt and claim action in the first mobile screen with a searchable catalog. */
@media (max-width: 767px) {
  .js .app-list--search { max-height: 286px; overflow-y: auto; padding: 3px; margin: -3px; }
}
.result__actions { margin-top: 12px; display: grid; gap: 8px; }
.icon-done { display: none; }
.is-copied { color: var(--success); }
.is-copied .icon-copy { display: none; }
.is-copied .icon-done { display: inline; }
.result__note { margin-top: 12px; }
.state-block { background: var(--surface); border-radius: 16px; padding: 24px; }
.state-block__title { font-size: 18px; font-weight: 700; }
.state-block__text { font-size: 16px; color: var(--ink-2); margin-top: 6px; }
.state-block .btn { margin-top: 20px; width: auto; padding: 0 20px; display: inline-flex; }
.help { margin-top: var(--section-y); padding-top: 32px; border-top: 1px solid var(--line); }
.help__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button { height: var(--tab-h); padding: 0 12px; background: none; border: 0; font-size: var(--fs-tab); font-weight: var(--fw-tab); color: var(--muted); box-shadow: inset 0 -3px 0 transparent; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.tabs button:hover { color: var(--ink); }
.tabs button:focus-visible { outline-offset: -2px; }
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 24px minmax(0,1fr); column-gap: 12px; font-size: var(--fs-step); line-height: var(--lh-step); color: var(--ink-2); }
.steps li::before { counter-increment: step; content: counter(step); width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.steps strong { color: var(--ink); font-weight: 650; }
.steps a { color: var(--accent); text-underline-offset: 3px; }
.howto__panel-title { font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.howto__panel + .howto__panel { margin-top: 20px; }
.js .howto__panel-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.js .howto__panel + .howto__panel { margin-top: 0; }
.howto__after { margin-top: 16px; font-size: 15px; color: var(--muted); }
.faq { margin-top: 40px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 14px 0; font-size: 16px; font-weight: 600; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { color: var(--muted); transform: rotate(90deg); }
.faq__item[open] .faq__chev { transform: rotate(-90deg); }
.faq__answer p { font-size: 15px; line-height: 1.65; color: var(--ink-2); padding-bottom: 16px; }
.faq__answer strong { color: var(--ink); }
.site-footer { margin-top: 64px; }
.site-footer__admin { margin-bottom: 4px; }
.site-footer__admin a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; color: var(--muted); text-decoration: none; }
.site-footer__admin .icon { width: 14px; height: 14px; }
.site-footer__admin a:hover { color: var(--ink); text-decoration: underline; }
.service-error-page { min-height: 100svh; display: grid; place-content: center; padding: 24px var(--gutter); }
.service-error { width: min(400px,100%); margin-inline: auto; }
.service-error .brand { margin-bottom: 32px; }
.service-error h1 { font-size: 24px; line-height: 1.3; font-weight: 700; }
.service-error p { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.service-error .btn { margin-top: 24px; }
.service-error .text-link { margin-top: 8px; display: flex; justify-content: center; }
@media (max-width: 374px) { .language-link { padding-inline: 8px; } }
@media (min-width: 768px) and (max-width: 1023px) { .page { padding-top: 32px; } .task { max-width: 560px; } }
@media (min-width: 1024px) {
  .page { padding-top: 56px; }
  .task-head { margin-bottom: 40px; }
  .task-head--one { display: flex; align-items: center; gap: 24px; }
  .task-head__icon { margin-bottom: 0; flex: none; }
  .task-grid { display: grid; grid-template-columns: minmax(0,440px) minmax(0,440px); justify-content: space-between; column-gap: var(--col-gap); }
  .task-grid--none, .task-grid--down { grid-template-columns: minmax(0,440px); }
  .help { margin-top: 0; padding-top: 0; border-top: 0; }
  .state-block { padding: 32px; }
  .faq { margin-top: 48px; }
  .site-footer { margin-top: 96px; }
  .service-error h1 { font-size: 28px; }
}
/* Complete the 44px target contract, including inline and short footer links. */
.fineprint a, .steps a { display: inline-flex; align-items: center; min-height: 44px; }
.ys-studio a { min-width: 44px; }
.service-error-page { grid-template-columns: min(400px, 100%); }
/* Japanese titles need their natural character boundaries to meet the two-line limit. */
html[lang="ja"] .task-head__title { word-break: normal; }
html[lang="ja"] #selected-app-name { white-space: nowrap; }

/* Round 2: HTML stays at the usable final state; only the overlay performs. */
.claim-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; }
.claim-steps__seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: clip; }
.claim-steps__seg i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.claim-steps[data-progress="1"] .claim-steps__seg:first-child i,
.claim-steps[data-progress="2"] .claim-steps__seg i { transform: scaleX(1); }
.claim-steps.is-done i { background: var(--ok); }
/* Fit the new 16px progress row into the existing catalog-to-claim spacing. */
.public-form[data-count="many"] .claim { margin-top: 8px; }
.public-form[data-count="many"] .claim-steps { margin-bottom: 4px; }
.code-display { position: relative; display: grid; overflow: clip; }
.ticket-app { grid-area: 1 / 1 / 2 / 2; }
.ticket { position: relative; grid-area: 2 / 1 / 3 / 2; display: grid; }
.ticket__label { grid-area: 1 / 1 / 2 / 2; }
.ticket__code { grid-area: 2 / 1 / 3 / 2; }
.ticket__hint { grid-area: 3 / 1 / 4 / 2; }
.ticket__type { position: absolute; grid-area: 2 / 1 / 3 / 2; inset: 0; font-family: var(--font-code); font-size: var(--fs-code); font-weight: var(--fw-code); letter-spacing: var(--ls-code); line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--ticket-ink); overflow-wrap: anywhere; word-break: break-all; pointer-events: none; }
.ticket__type:empty { display: none; }
/* Transparent glyphs keep the original selectable and exposed to screen readers. */
.ticket.is-rolling .ticket__code { color: transparent; }
.tt-cell { display: inline-block; position: relative; vertical-align: top; width: calc(1ch + var(--ls-code)); height: 1.35em; overflow: clip; letter-spacing: 0; text-align: left; }
.tt-old, .tt-new { display: block; position: absolute; inset: 0; }
.tt-old { transform: translateY(-100%); }
.tt-dot { display: inline; }
.ticket-burst { position: absolute; grid-area: 2 / 1 / 3 / 2; inset: 0; overflow: clip; pointer-events: none; }
.ticket-burst__piece { position: absolute; left: 50%; top: 50%; width: 6px; height: 10px; border-radius: 2px; background: #3155D4; }
.ticket-burst__piece--1 { background: var(--ink); }
.ticket-burst__piece--2 { background: #3155D480; }
.result__actions { grid-area: 3 / 1 / 4 / 2; }
.result__note { grid-area: 4 / 1 / 5 / 2; }
.tabs { position: relative; }
.tabs__underline { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); transform-origin: left; pointer-events: none; }
.js .tabs button[aria-selected="true"] { box-shadow: none; }
#copy-promotion-code { position: relative; }
#copy-promotion-code .icon-copy, #copy-promotion-code .icon-done { display: block; opacity: 1; }
#copy-promotion-code .icon-done { position: relative; margin-left: -28px; opacity: 0; }
#copy-promotion-code.is-copied .icon-copy { opacity: 0; }
#copy-promotion-code.is-copied .icon-done { opacity: 1; }
/* Both icons occupy the same reserved slot regardless of translated label width. */
.ys-web a { min-width: 44px; }
.ys-web__h { word-break: keep-all; }
.ys-acc::details-content { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-ys-motion="on"] .faq__chev { transition: transform var(--ys-dur-short) var(--ys-ease-move); }
  html[data-ys-motion="on"] #copy-promotion-code .icon { transition: opacity var(--ys-dur-short) var(--ys-ease-move); }
  html[data-ys-motion="on"] .ys-acc::details-content { transition: block-size var(--ys-dur-short) var(--ys-ease-move), content-visibility var(--ys-dur-short) var(--ys-ease-move) allow-discrete; }
}
@media print {
  .ticket.is-rolling .ticket__code { color: var(--ticket-ink); }
  .ticket__type, .ticket-burst { display: none; }
}