@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

@font-face {
    font-family: 'Cafe24 Ssurround';
    src: local('Cafe24 Ssurround'),
         local('Cafe24Ssurround'),
         url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* Project stylesheet.
   Written once. The generator never rewrites this file, so edit it freely.

   This file loads after tokens.css, utilities.css, common.css and layout.css.
   Do not constrain or pad body here: sections own their backgrounds at full
   viewport width, then put their readable content in a child .inner.

   <section class="sub-section">
       <div class="inner">...</div>
   </section>
*/

/* A harmless baseline for project-owned navigation. The shared header's
   class-based rules remain the stronger, component-specific layer. */
nav ul {
    display: flex;
    gap: var(--space-md);
    padding: 0;
    list-style: none;
}

a {
    color: var(--color-primary);
}

/* ---- splash: logo size -----------------------------------------------------
   #splash-entry .index_wrap is common.css's built-in splash centering hook
   (flex, min-height:100vh). This only refines its generic 60%-width default
   to this project's actual logo: Figma exported it at 211px in a 375px
   reference frame, and the asset itself is a @2x PNG (422x254). */
#splash-entry .index_wrap img {
    width: 21.1rem;
}

/* ---- home header: centered, enlarged logo --------------------------------
   Project-specific override of the shared .site-header layout. Kept here
   instead of factory/Assets/css/layout.css so it survives regeneration. */
.site-header > .inner {
    justify-content: center;
}

.site-header__logo-icon {
    width: 18.3rem;
    height: 100%;
    margin: 0 auto;
}

/* ---- sub header: back / title / home --------------------------------------
   Used by pages.<id>.headerType = "custom" via App_CustomHeader::render(). */
.sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    padding: var(--safe-top) var(--inner-padding-x) 0;
    background-color: var(--color-bg);
    border-bottom: var(--size-hairline) solid var(--color-line);
}

.sub-header__title {
    flex: 1;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 1.9rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    text-align: center;
}

.sub-header__back,
.sub-header__home {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.sub-header__back img,
.sub-header__home img {
    width: 100%;
    height: 100%;
}
/* ---- shared section heading ----------------------------------------------
   Figma uses the same orange rule + display heading treatment across content
   sections. The 18px / 130% / -0.02em values intentionally stay literal:
   the existing fluid title and line-height tokens do not reproduce them. */
.sec__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.8rem;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.sec__title::before {
    flex: 0 0 auto;
    width: 0.4rem;
    height: 2rem;
    content: '';
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
}

.sec__title--tight {
    margin-bottom: var(--space-4);
}

/* ---- home content frame --------------------------------------------------
   The design is a full-bleed mobile composition. Section bands own vertical
   spacing while .inner supplies the 12px readable gutter. */
#home-wrap {
    padding: 0;
}

#home-wrap > .sec + .sec {
    margin-top: 0;
}

#home-wrap .inner {
    max-width: none;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

/* The two manual ad slots sit flush between sections, same as the section
   bands themselves: the shared .ad-slot default (layout.css) carries a
   var(--space-lg) breathing margin meant for slots dropped into copy, which
   this full-bleed composition does not want. */
#home-wrap > .ad-slot {
    margin: 0;
}

/* ---- discount hero ------------------------------------------------------- */
.discount-hero {
    overflow: hidden;
}

.discount-hero__image {
    width: 100%;
    height: auto;
}

/* ---- guide carousel ------------------------------------------------------ */
.guide-overview {
    padding: var(--space-lg) 0;
    background-color: var(--color-bg);
}

.guide-menu {
    width: 100%;
    /* overflow: hidden; */
}

/* overflow-x: auto turns the block axis into a scrollport too, so a card's
   box-shadow is clipped at the padding box. Give the scrollport the shadow's
   reach as vertical padding and take the same amount back with a negative
   margin: the shadow shows in full and the section rhythm is unchanged. */
.guide-menu__track {
    display: flex;
    gap: var(--space-md);
    width: 100%;
    margin: -1rem 0;
    padding: 1rem var(--space-sm);
    overflow-x: auto;
    /* overflow-y: hidden; */
    list-style: none;
    scroll-padding-left: var(--space-sm);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.guide-menu__track::-webkit-scrollbar {
    display: none;
}

.guide-menu__item {
    flex: 0 0 12rem;
    width: 12rem;
    scroll-snap-align: start;
}

.guide-menu__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* height: 10rem; */
    padding: 1.6rem;
    gap: 1rem;
    color: var(--color-text);
    text-decoration: none;
    background-color: var(--figma-primary-200);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
}

.guide-menu__link:hover {
    color: var(--color-text);
}

.guide-menu__label {
    width: 100%;
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
}

.guide-menu__icon {
    display: flex;
    flex: 0 0 5rem;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    background-color: var(--color-bg);
    border-radius: var(--radius-pill);
}

.guide-menu__icon img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

/* ---- nearby store finder ------------------------------------------------- */
.store-finder {
    padding: var(--space-lg) 0;
    background-color: var(--color-bg-soft);
}

/* bg-store-finder.png is 722x260 with a 10px transparent drop shadow baked
   into every edge, so its opaque artwork is only 702x240. A fixed
   `calc(100% + 1rem)` overspill cancels that frame at one width only - the
   frame scales with the image, the 10px does not, so a wider banner leaves a
   transparent gap down both sides. Sizing by the ratio of canvas to artwork
   (722/702 and 260/240) crops the frame at every viewport instead. Keep
   these two numbers in step with the image if it is ever re-exported. */
.store-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 12rem;
    padding: var(--space-md);
    overflow: hidden;
    color: var(--color-text-invert);
    text-decoration: none;
    background-color: var(--color-primary);
    background-image: url('../img/home/bg-store-finder.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(100% * 722 / 702) calc(100% * 260 / 240);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

.store-banner:hover,
.store-banner:focus-visible {
    color: var(--color-text-invert);
}

.store-banner__text {
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-text-invert);
}

.store-banner__arrow {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
}

/* ---- voucher introduction ----------------------------------------------- */
.voucher-overview {
    padding: var(--space-lg) 0 var(--space-2xl);
    background-color: var(--color-bg);
}

.voucher-overview .sec__desc {
    margin: 0;
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text-sub);
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
}

.info-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* min-height: 10rem; */
    padding: var(--space-md) var(--space-sm);
    gap: var(--space-xs);
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
}

.info-card__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text);
    white-space: nowrap;
}

.info-card__text {
    margin-top: 0;
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--color-text-sub);
}

.notice--soft {
    margin-top: 1.8rem;
    padding: var(--space-sm);
    color: var(--color-text-sub);
    background-color: var(--color-bg-soft);
    border: 0;
    border-radius: var(--radius-md);
}

.notice--soft .notice__title {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.notice--soft .notice__icon {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
}

.notice--soft .notice__text {
    margin-top: var(--space-xs);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--color-text-sub);
}

/* ---- guide subpages: shared mobile frame ---------------------------------
   The subpage designs use a 375px reference frame with a 12px content gutter.
   Keep the bands full-bleed and let each .inner own that readable gutter. */
.guide-page {
    padding: 0;
}

.guide-page .inner {
    max-width: none;
    padding-left: calc(var(--space-sm) + var(--safe-left));
    padding-right: calc(var(--space-sm) + var(--safe-right));
}

/* Manual ad slots (purchase.php, usage.php) sit between bands that already
   carry their own var(--space-lg) padding and no inter-section margin, same
   as #home-wrap; the shared .ad-slot default (layout.css) would otherwise
   add its own margin on top of that. */
.guide-page > .ad-slot {
    margin: 0;
}

/* Figma's custom sub-header is also a 12px-gutter component. */
.sub-header {
    padding-left: calc(var(--space-sm) + var(--safe-left));
    padding-right: calc(var(--space-sm) + var(--safe-right));
}

/* ---- shared guide-page banner ------------------------------------------- */
.page-banner {
    background-color: var(--color-bg-soft);
}

.page-banner__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13.2rem;
    padding: var(--space-lg) var(--space-sm);
    background-image: url('../img/common/bg-page-banner.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.page-banner__title {
    position: relative;
    z-index: var(--z-base);
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--color-primary-strong);
    text-align: center;
}

/* ---- compact checked section heading ------------------------------------ */
.check-heading {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.check-heading__icon {
    flex: 0 0 2.4rem;
    width: 2.4rem;
    height: 2.4rem;
}

/* ---- guide content sections --------------------------------------------- */
.guide-section {
    padding: var(--space-lg) 0;
    background-color: var(--color-bg);
}

.guide-section > .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.prep-list,
.step-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prep-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.prep-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.prep-list__title,
.step-list__title {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.prep-list__text,
.step-list__text,
.step-list__details {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-text-sub);
}

.guide-section--steps > .inner {
    gap: var(--space-sm);
}

.step-list {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.step-list__item {
    position: relative;
}

.step-list__heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.4rem;
}

.step-list__number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 2.4rem;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-text-invert);
    background-color: var(--figma-primary-400);
    border-radius: var(--radius-pill);
}

/* The vertical rule is a real stepper affordance, not a Figma canvas
   coordinate. Each item draws only the segment leading to the next marker. */
.step-list__item:not(:last-child)::after {
    position: absolute;
    top: 2.4rem;
    bottom: -1.8rem;
    left: 1.15rem;
    width: 0.1rem;
    content: '';
    background-color: var(--figma-primary-400);
}

.step-list__body {
    padding-left: 3rem;
}

.step-list__details {
    margin-top: 0;
    padding-left: 2rem;
    list-style: disc;
}

.step-list__details li::marker {
    font-size: 0.8em;
}

.notice--list {
    margin-top: 0;
    padding: var(--space-sm);
}

.notice--list .notice__title {
    align-items: center;
}

.notice--list .notice__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-xs) 0 0;
    padding-left: 2rem;
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--color-text-sub);
}

/* ---- guide next-page CTA ------------------------------------------------ */
.guide-next {
    padding: var(--space-lg) 0 var(--space-2xl);
    background-color: var(--color-bg);
}

.guide-next__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 7rem;
    padding: var(--space-sm);
    gap: var(--space-sm);
    color: var(--color-text-invert);
    text-decoration: none;
    background-color: var(--color-primary);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

.guide-next__link:hover {
    color: var(--color-text-invert);
    background-color: var(--color-primary);
}

.guide-next__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.guide-next__icon {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
}

.guide-next__arrow {
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
}

/* The generic .wrap:last-child rule owns bottom safe-area clearance. Guide
   subpages already provide it in their final band, so avoid double spacing. */
.wrap.guide-page:last-child {
    padding-bottom: 0;
}

/* The CTA is a fixed-height control in the design (50px icon inside 70px). */
.guide-next__link {
    height: 7rem;
    min-height: 7rem;
    padding: 1rem var(--space-sm);
}

/* ---- usage page list variants ------------------------------------------- */
.check-list {
    display: flex;
    flex-direction: column;
    /* gap: var(--space-xs); */
    margin: 0;
    padding-left: 3rem;
}

.check-list__item {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: var(--fw-regular);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.step-list--plain {
    gap: 1.8rem;
}

.step-list--plain .step-list__item::after {
    display: none;
}

.step-list--plain .step-list__heading,
.step-list--plain .step-list__number {
    display: none;
}

.step-list--plain .step-list__body {
    padding-left: 0;
    margin-top: var(--space-4);
}

.step-list--plain .step-list__title {
    display: block;
}

.method-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-4);
}

.method-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--space-md);
    background-color: var(--figma-primary-200);
    border-radius: var(--radius-md);
}

.method-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.method-card__icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
}

.method-card__text {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: var(--fw-regular);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--color-text);
}

/* ---- eligible item category grid ---------------------------------------- */
.guide-section__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.guide-section__desc {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-text-sub);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 18.5rem;
    padding: var(--space-sm);
    gap: var(--space-4);
    background-color: var(--color-bg-soft);
    border-radius: 0.5rem;
}

.category-card__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.category-card__icon {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

.category-card__title {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--color-primary);
}

.category-card__list {
    margin: 0;
    padding-left: 2.2rem;
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: var(--fw-regular);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.category-card__list li + li {
    margin-top: 0;
}

.check-list--compact {
    gap: 0;
}

.guide-section--eligibility-warning > .inner {
    gap: var(--space-sm);
}

.notice--single .notice__list {
    margin-top: var(--space-xs);
}

.category-card__list {
    list-style-type: disc;
}

/* ---- FAQ browser -------------------------------------------------------- */
.faq-browser {
    padding: var(--space-lg) 0;
    background-color: var(--color-bg);
}

.faq-browser > .inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.tab-list {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: var(--space-xs);
}

.tab-list__tab {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 4.1rem;
    padding: 1rem var(--space-4);
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-text-disabled);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 0.1rem solid var(--figma-gray-500);
}

.tab-list__tab:hover {
    color: var(--color-text-disabled);
}

.tab-list__tab.is-active {
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    border-bottom-width: 0.2rem;
    border-bottom-color: var(--color-primary);
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.accordion__item {
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

/* Design layer for the shared accordion. The open/close mechanics - the
   full-width trigger, the 0fr->1fr panel, the chevron turn - live in
   common.css; only this project's look is restated here. */
.accordion__trigger {
    min-height: 4.8rem;
    padding: var(--space-sm);
    gap: var(--space-4);
    color: var(--color-text);
    background-color: var(--figma-primary-200);
    border-radius: 0.5rem;
    transition:
        min-height var(--duration-base) ease,
        padding var(--duration-base) ease,
        border-radius var(--duration-base) ease;
}

.accordion__question {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    min-width: 0;
    gap: var(--space-4);
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.accordion__prefix {
    flex: 0 0 auto;
    font-weight: 800;
    line-height: 1.5;
    color: var(--color-primary);
}

/* icon-chevron-up.png points up, so this project's closed state is the
   turned one - the reverse of the common default. */
.accordion__chevron {
    flex: 0 0 2.4rem;
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
    transform: rotate(180deg);
}

.accordion__answer {
    display: flex;
    align-items: flex-start;
    /* min-height: 7.8rem; */
    padding: var(--space-xs);
    gap: var(--space-4);
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: var(--fw-regular);
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 0.1rem solid var(--color-bg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.accordion__answer p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.accordion__item.is-open {
    border-radius: var(--radius-md);
}

.accordion__item.is-open .accordion__trigger {
    min-height: 4rem;
    padding: var(--space-xs);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: none;
}

.accordion__item.is-open .accordion__chevron {
    transform: rotate(0deg);
}

.faq-empty {
    margin: 0;
    padding: var(--space-lg) 0;
    font-family: var(--font-base);
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-sub);
}

/* The pagination is the one place this project asks for Noto Sans KR rather
   than the Pretendard-first --font-base stack, so the family is named here
   instead of being bent into a global token. */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    padding: 0 var(--space-md);
    font-family: 'Noto Sans KR', var(--font-base);
}

.pagination__control,
.pagination__page {
    display: inline-flex;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 4rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.pagination__control:hover,
.pagination__page:hover {
    color: var(--color-text);
}

/* Rendered as a <span> by faq.php when there is no page to go to, so there is
   nothing to focus or click; this only has to read as unavailable. */
.pagination__control.is-disabled {
    cursor: default;
    opacity: 0.3;
}

.pagination__control img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pagination__page {
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1.5;
}

.pagination__page.is-active {
    background-color: var(--color-primary-soft);
}

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