/* KHCN retail page V2 (template INDIVIDUAL_CUSTOMER_RETAIL_V2): linked by layouts/retail_v2.blade.php right after
 * chrome-v2.css (tokens --lp2-*, .wrap, .btn, header, footer). Every rule is scoped under .kr (or body.kr-body); mobile-first,
 * min-width queries only. One "kr:NAME" block per section, in page order. Design: the HTML prototype "canhan banle
 * v3.0.0" (storage/app/figma-banle). No Vietnamese text in this file. */

/* ===== kr:base ===== */
body.kr-body { margin: 0; background: #fff; }
.kr:lang(ja) { line-break: strict; }
@media (prefers-reduced-motion: no-preference) {
    html:has(body.kr-body) { scroll-behavior: smooth; }
}
/* --kr-muted #6c707a replaces the prototype grey #8e8d96, which fails WCAG AA (2.99-3.28:1). */
.kr {
    --kr-muted: #6c707a;
    --kr-secondary: #3b3e46;
    --kr-card-line: #e6e6ea;
    --kr-soft: #fafafa;
    --kr-accent-grad: linear-gradient(90deg, #a3282b, #d3493a);
    width: 100%;
    font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--lp2-ink);
    background: var(--lp2-white);
    -webkit-text-size-adjust: 100%;
}
/* Until load and first paint (html.lp2-wait): fallback font only; each section also hides its lazy images then. */
html.lp2-wait .kr { font-family: 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.kr *, .kr *::before, .kr *::after { box-sizing: border-box; }
.kr h1, .kr h2, .kr h3, .kr h4, .kr p, .kr ul, .kr ol, .kr li, .kr figure, .kr dl, .kr dd, .kr blockquote, .kr form, .kr fieldset { margin: 0; }
.kr ul, .kr ol { padding: 0; list-style: none; }
.kr fieldset { padding: 0; border: 0; min-width: 0; }
.kr a { color: inherit; text-decoration: none; }
.kr button, .kr input, .kr select, .kr textarea { font: inherit; color: inherit; }
.kr img { display: block; max-width: 100%; height: auto; }
/* No hero: main is padded by the height of the shared header bar (chrome-v2.css). */
.kr.kr--no-hero main { padding-top: 56px; }
@media (min-width: 601px) {
    .kr.kr--no-hero main { padding-top: 64px; }
}
@media (min-width: 1024px) {
    .kr.kr--no-hero main { padding-top: 109px; }
    .kr.kr--no-hero .hdr.is-compact ~ main { padding-top: 64px; }
}
@media (min-width: 1220px) {
    .kr.kr--no-hero main, .kr.kr--no-hero .hdr.is-compact ~ main { padding-top: 68px; }
}

/* ===== kr:shared ===== */
.kr .kr-title { color: var(--lp2-ink); font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -.01em; text-wrap: balance; }
.kr .kr-title__accent { color: #a3282b; background: var(--kr-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kr .kr-lead { color: var(--kr-muted); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -.01em; }
.kr .kr-center { text-align: center; }
.kr .kr-center .kr-lead { margin-left: auto; margin-right: auto; }
/* Device classes (RetailV2::deviceClass()); a section that sets display on the same element repeats them. */
@media not all and (min-width: 601px) {
    .kr .kr-only-d { display: none; }
}
@media (min-width: 601px) {
    .kr .kr-only-m { display: none; }
    .kr .kr-title { font-size: 32px; line-height: 40px; }
}
@media (min-width: 1024px) {
    .kr .kr-title { font-size: 36px; line-height: 44px; }
}
@media print {
    .kr .kr-title__accent { color: #a3282b; background: none; -webkit-text-fill-color: currentColor; }
}

/* ===== kr:hero ===== */
/* ---------- Hero carousel #top ----------
   Contrast deviations from the prototype: pill fill .6 (not .45), counter in full white, scroll link on a disc. */
.kr .kr-hero { position: relative; isolation: isolate; overflow: hidden; height: 568px; background: #fbf3ea; }
.kr .kr-hero__slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.kr .kr-hero__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
}
.kr .kr-hero__slide.is-active { z-index: 1; opacity: 1; visibility: visible; }
.kr .kr-hero__slide--light { background: #fbf3ea; }
.kr .kr-hero__slide--dark { background: #21003c; }
.kr .kr-hero__slide--sky { background: #80c1ff; }
.kr .kr-hero__slide--light::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 120px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .35));
    pointer-events: none;
}

.kr .kr-hero__art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.kr .kr-hero__art picture { display: block; width: 100%; height: 100%; }
.kr .kr-hero__img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--kr-fx-m, 50%) 100%;
}

.kr .kr-hero__copy {
    position: absolute;
    top: 116px;
    right: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.kr .kr-hero__title {
    max-width: 100%;
    color: var(--lp2-ink);
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -.02em;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.kr .kr-hero__title:lang(ja) { word-break: auto-phrase; }
.kr .kr-hero__tv, .kr .kr-hero__t1 { display: block; }
.kr .kr-hero__t2 { display: inline-block; max-width: 100%; color: #a3282b; }
.kr .kr-hero__slide--dark .kr-hero__title { color: #fff; filter: drop-shadow(0 2px 10px rgba(96, 8, 20, .35)); }
.kr .kr-hero__slide--dark .kr-hero__t2 { color: #e2cdfb; }
.kr .kr-hero__slide--sky .kr-hero__title, .kr .kr-hero__slide--sky .kr-hero__t2 { color: #0c2256; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .kr .kr-hero__slide--light .kr-hero__t2, .kr .kr-hero__slide--dark .kr-hero__t2 {
        background-image: var(--kr-accent-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
    .kr .kr-hero__slide--dark .kr-hero__t2 { background-image: linear-gradient(180deg, #e2cdfb 22%, #f1e3fd 42%, #d4c1fb 56%, #9677f8 80%); }
}
/* position: relative paints the buttons above the heading's drop-shadow filter (dark theme). */
.kr .kr-hero__ctas { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 100%; }
.kr .kr-hero__cta {
    max-width: 100%;
    min-height: 48px;
    padding: 0 22px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -.01em;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

.kr .kr-hero__ctrl {
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
/* Fixed width: a half-streamed pill, an autoplay step or the font swap never moves it. */
.kr .kr-hero__nav {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    width: 88px;
    height: 44px;
    padding: 4px;
    border-radius: var(--lp2-radius-pill);
    background: rgba(21, 23, 28, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
.kr .kr-hero__count {
    display: none;
    flex: none;
    width: 53px;
    padding-right: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kr .kr-hero__count-n { font-weight: 600; }
.kr .kr-hero__arrow {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s;
}
.kr .kr-hero__arrow-ic { display: block; }

/* Scroll link: two chevrons 14px apart, no disc; ink on the light slide (Figma 2024:33 / 2028:32 / 2033:32), white with
   the frame's shadow on the others (1929:20). */
.kr .kr-hero__down {
    position: absolute;
    bottom: 8px;
    left: 50%;
    z-index: 6;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    border-radius: 50%;
    color: #fff;
    transition: color .3s;
}
.kr .kr-hero__chev { position: absolute; top: -4px; left: 10px; display: block; filter: drop-shadow(0 2px 8px rgba(21, 23, 28, .12)); }
.kr .kr-hero__chev--2 { top: 10px; }
.kr .kr-hero:has(.kr-hero__slide--light.is-active) .kr-hero__down { color: #3b3e46; }
.kr .kr-hero:has(.kr-hero__slide--light.is-active) .kr-hero__chev { filter: none; }

html.lp2-wait .kr .kr-hero__img[loading="lazy"] { display: none; }

/* is-active-d / is-active-m: the first slide per device before the script runs. */
@media not all and (min-width: 601px) {
    .kr .kr-hero .kr-only-d { display: none; }
    .kr .kr-hero__slide.is-active-m { z-index: 1; opacity: 1; visibility: visible; }
    .kr .kr-hero:has(.kr-hero__slide--light.is-active-m) .kr-hero__down { color: #3b3e46; }
    .kr .kr-hero:has(.kr-hero__slide--light.is-active-m) .kr-hero__chev { filter: none; }
}
@media (min-width: 601px) {
    .kr .kr-hero .kr-only-m { display: none; }
    .kr .kr-hero__slide.is-active-d { z-index: 1; opacity: 1; visibility: visible; }
    .kr .kr-hero:has(.kr-hero__slide--light.is-active-d) .kr-hero__down { color: #3b3e46; }
    .kr .kr-hero:has(.kr-hero__slide--light.is-active-d) .kr-hero__chev { filter: none; }

    .kr .kr-hero { height: 569px; }
    .kr .kr-hero__img { object-position: var(--kr-fx, 50%) 100%; }
    .kr .kr-hero__copy { top: 129px; }
    .kr .kr-hero__title { font-size: 40px; line-height: 48px; }
    .kr .kr-hero__cta { min-height: 52px; padding: 0 28px; font-size: 16px; }
    .kr .kr-hero__ctrl { bottom: 20px; }
    .kr .kr-hero__nav { width: 159px; padding-left: 14px; }
    .kr .kr-hero__count { display: block; }
    .kr .kr-hero__down { bottom: 16px; }
}
@media (min-width: 1024px) {
    .kr .kr-hero { height: 849px; }
    .kr .kr-hero__copy { top: 153px; }
    .kr .kr-hero__title { font-size: 56px; line-height: 64px; }
}
@media (hover: hover) and (pointer: fine) {
    .kr .kr-hero__arrow:hover { background: rgba(255, 255, 255, .28); }
}
/* The leaving slide's copy fades out in .16s so two copies never overlap in the .6s crossfade; the per-device first
   slide plays the motion-v2 intro before the script, so the switch to is-active does not restart it. */
@media (prefers-reduced-motion: no-preference) {
    .kr .kr-hero__slide:not(.is-active):not(.is-active-d):not(.is-active-m) .kr-hero__copy { opacity: 0; transition: opacity .16s ease; }
    @media not all and (min-width: 601px) {
        html.v2m .kr .kr-hero__slide.is-active-m [data-v2-intro] { animation-name: v2m-intro; animation-duration: var(--v2-m-intro, 700ms); animation-timing-function: var(--v2-m-out, ease-out); animation-fill-mode: backwards; }
    }
    @media (min-width: 601px) {
        html.v2m .kr .kr-hero__slide.is-active-d [data-v2-intro] { animation-name: v2m-intro; animation-duration: var(--v2-m-intro, 700ms); animation-timing-function: var(--v2-m-out, ease-out); animation-fill-mode: backwards; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .kr .kr-hero__slide, .kr .kr-hero__cta, .kr .kr-hero__arrow, .kr .kr-hero__down { transition: none; }
}
@media print {
    .kr .kr-hero { height: auto; background: none; }
    .kr .kr-hero__slides { position: static; }
    .kr .kr-hero__slide { position: relative; padding: 24px 0; background: none; }
    .kr .kr-hero__slide:not(.is-active):not(.is-active-d):not(.is-active-m) { display: none; }
    .kr .kr-hero__copy { position: static; }
    .kr .kr-hero__art, .kr .kr-hero__slide--light::after, .kr .kr-hero__ctrl, .kr .kr-hero__down { display: none; }
    .kr .kr-hero__title, .kr .kr-hero__slide--dark .kr-hero__title, .kr .kr-hero__slide--sky .kr-hero__title { color: #15171c; filter: none; }
    .kr .kr-hero__t2, .kr .kr-hero__slide--dark .kr-hero__t2, .kr .kr-hero__slide--sky .kr-hero__t2 { background: none; color: #a3282b; -webkit-text-fill-color: #a3282b; }
    .kr .kr-hero__cta { border: 1px solid #a3282b; background: none; color: #a3282b; }
}

/* ===== kr:when ===== */
.kr .kr-when { position: relative; overflow: hidden; padding: 64px 0; background: var(--lp2-white); }
.kr .kr-when__inner { position: relative; z-index: 1; }
.kr .kr-when__head { max-width: 900px; margin: 0 auto; }
.kr .kr-when__line { display: block; }
/* Phones: a scroller bleeding to the screen edges; its 8 / 24px padding keeps the focus ring off the cards. */
.kr .kr-when__viewport {
    margin: 32px -16px -24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kr .kr-when__viewport::-webkit-scrollbar { display: none; }
.kr .kr-when__viewport:focus-visible { outline-offset: -2px; }
.kr .kr-when__list { display: flex; gap: 16px; padding: 8px 0 24px 16px; }
/* End spacer: some browsers drop a scroller's end padding. */
.kr .kr-when__list::after { content: ""; flex: 0 0 1px; margin-left: -1px; }
.kr .kr-when__card {
    display: flex;
    flex: 0 0 calc(100% - 66px);
    flex-direction: column;
    min-height: 280px;
    padding: 28px 24px;
    border-radius: var(--lp2-radius-md-strong);
    background: var(--lp2-white);
    box-shadow: inset 0 0 0 1px rgba(21, 23, 28, .07);
    scroll-snap-align: start;
}
.kr .kr-when__icon { display: block; flex: none; width: 64px; height: 64px; }
.kr .kr-when__icon img { width: 64px; height: 64px; }
.kr .kr-when__body { margin-top: auto; }
.kr .kr-when__icon + .kr-when__body { padding-top: 32px; }
.kr .kr-when__name { color: var(--lp2-ink); font-size: 20px; font-weight: 600; line-height: 28px; text-wrap: balance; }
.kr .kr-when__text { margin-top: 10px; color: var(--kr-muted); font-size: 15px; font-weight: 500; line-height: 23px; }
.kr:lang(ja) .kr-when__line, .kr:lang(ja) .kr-when__name { word-break: auto-phrase; }
html.lp2-wait .kr .kr-when__icon img[loading="lazy"] { display: none; }
/* Pointer glow (decorative, moved by the kr:when script): fine hovering pointers only. */
.kr .kr-when__fx {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.kr .kr-when__glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(227, 21, 38, .12), rgba(227, 21, 38, 0));
    opacity: 0;
    transform: translate3d(-600px, -600px, 0);
    transition: opacity 320ms ease;
}
.kr .kr-when--glow .kr-when__glow { opacity: 1; }
@media (min-width: 601px) {
    .kr .kr-when { padding: 88px 0; }
    .kr .kr-when__viewport { margin: 40px 0 0; overflow: visible; scroll-snap-type: none; }
    .kr .kr-when__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; }
    .kr .kr-when__list::after { display: none; }
    .kr .kr-when__card { min-height: 260px; padding: 32px 28px; }
}
@media (min-width: 1024px) {
    .kr .kr-when { padding: 112px 0; }
    .kr .kr-when__viewport { margin-top: 56px; }
    .kr .kr-when__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .kr .kr-when__card { min-height: 300px; }
}
@media (hover: hover) and (pointer: fine) {
    .kr .kr-when__fx { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .kr .kr-when__fx { display: none; }
    .kr .kr-when__glow { transition: none; }
}
@media print {
    .kr .kr-when { padding: 24px 0; }
    .kr .kr-when__fx { display: none; }
    .kr .kr-when__viewport { margin: 24px 0 0; overflow: visible; }
    .kr .kr-when__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; }
    .kr .kr-when__list::after { display: none; }
    .kr .kr-when__card { min-height: 0; box-shadow: none; border: 1px solid var(--lp2-line); break-inside: avoid; }
}

/* ===== kr:values ===== */
/* ---------- Values #values ----------
   Contrast deviation: numbers #a02225 from 601px (#e31526 fails 4.5:1 on the glow). No JS: every panel open. */
.kr .kr-values { position: relative; isolation: isolate; padding: 56px 0; background: var(--lp2-white); }
.kr .kr-values__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }
.kr .kr-values__bg img { width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 100%; }
.kr .kr-values__title { text-align: center; }
.kr .kr-values__body { margin-top: 32px; }
.kr .kr-values__photo { display: none; }
.kr .kr-values__heading { color: var(--lp2-ink); font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: -.01em; }
.kr .kr-values__name, .kr .kr-values__label { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.kr .kr-values__num { flex: none; color: var(--lp2-red); }
.kr .kr-values__text-title { min-width: 0; overflow-wrap: anywhere; }
.kr .kr-values__text { color: var(--kr-secondary); font-size: 14px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
.kr .kr-values__cta {
    max-width: 100%;
    padding: 0 22px;
    box-shadow: inset 0 0 0 1px var(--kr-card-line);
    line-height: 20px;
    letter-spacing: -.01em;
    text-align: center;
    white-space: normal;
}
.kr .kr-values__media, .kr .kr-values__card-media {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--lp2-grey-100);
}
.kr .kr-values__media img, .kr .kr-values__card-media img { width: 100%; max-width: none; height: 100%; object-fit: cover; }
/* Safari < 15: no aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
    .kr .kr-values__media, .kr .kr-values__card-media { position: relative; }
    .kr .kr-values__media::before, .kr .kr-values__card-media::before { content: ""; display: block; padding-top: 56.25%; }
    .kr .kr-values__media img, .kr .kr-values__card-media img { position: absolute; top: 0; left: 0; }
}

/* Phones: the card scroller. */
@media not all and (min-width: 601px) {
    .kr .kr-values__list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc(100% - 50px);
        gap: 16px;
        margin: -4px -16px -24px;
        padding: 4px 16px 24px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .kr .kr-values__list::-webkit-scrollbar { display: none; }
    /* position: relative: the card clips the absolute sr-only spans of its pill (else they widen the page). */
    .kr .kr-values__item {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--lp2-radius-md-strong);
        background: var(--lp2-white);
        box-shadow: 0 10px 24px -14px rgba(21, 23, 28, .28), inset 0 0 0 1px #eceef2;
        scroll-snap-align: start;
    }
    /* The photo sits 1px inside so the card's ring stays visible over it. */
    .kr .kr-values__card-media { margin: 1px 1px 0; border-radius: 15px 15px 0 0; }
    .kr .kr-values__heading { padding: 16px 16px 0; }
    .kr .kr-values__toggle { display: none; }
    .kr .kr-values__media { display: none; }
    .kr .kr-values__panel-inner { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 16px 20px; }
    .kr .kr-values__cta { margin-top: 16px; }
    .kr .kr-values__list:focus-visible { outline-offset: -2px; }
}

/* 601px and up: the accordion. */
@media (min-width: 601px) {
    .kr .kr-values { padding: 80px 0; }
    .kr .kr-values__body { margin-top: 40px; }
    .kr .kr-values__list { border-top: 1px solid var(--kr-card-line); }
    .kr .kr-values__item { border-bottom: 1px solid rgba(21, 23, 28, .22); }
    .kr .kr-values__card-media, .kr .kr-values__label { display: none; }
    .kr .kr-values__heading { font-size: 22px; line-height: 30px; letter-spacing: -.02em; }
    .kr .kr-values__num { color: #a02225; }
    /* letter-spacing: inherit, the UA sheet resets it on buttons. */
    .kr .kr-values__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        padding: 24px 0;
        border: 0;
        background: none;
        color: inherit;
        letter-spacing: inherit;
        text-align: left;
        cursor: default;
        -webkit-tap-highlight-color: transparent;
    }
    /* +/- sign drawn with borders (kept in forced-colors mode); hidden, box kept, until the script runs. */
    .kr .kr-values__sign {
        position: relative;
        flex: none;
        width: 32px;
        height: 32px;
        border: 1.5px solid var(--kr-secondary);
        border-radius: 50%;
        visibility: hidden;
        transition: border-color .3s ease;
    }
    .kr .kr-values__sign::before, .kr .kr-values__sign::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border: 0 solid var(--kr-secondary);
        border-radius: 1px;
        transition: border-color .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
    }
    .kr .kr-values__sign::before { width: 12px; height: 0; border-top-width: 2px; }
    .kr .kr-values__sign::after { width: 0; height: 12px; border-left-width: 2px; }
    .kr .kr-values__item.is-open .kr-values__sign, .kr .kr-values__item.is-open .kr-values__sign::before { border-color: var(--lp2-red-hover); }
    .kr .kr-values__item.is-open .kr-values__sign::after { border-color: var(--lp2-red-hover); opacity: 0; transform: rotate(90deg); }
    html.lp2-wait .kr .kr-values__sign, .kr .kr-values__body.is-ready .kr-values__sign { visibility: visible; }
    html.lp2-wait .kr .kr-values__item:not(.is-open) .kr-values__toggle,
    .kr .kr-values__body.is-ready .kr-values__item:not(.is-open) .kr-values__toggle { cursor: pointer; }
    /* While html.lp2-wait (JS runs): closed panels stay out of the layout until the script hides them. */
    html.lp2-wait .kr .kr-values__body:not(.is-ready) .kr-values__item:not(.is-open) .kr-values__panel { display: none; }
    /* 300ms height transition, the same duration as in retail-v2.js. */
    .kr .kr-values__panel.is-moving { overflow: hidden; transition: height .3s cubic-bezier(.4, 0, .2, 1); }
    .kr .kr-values__panel-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 28px;
        transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
    }
    .kr .kr-values__body.is-ready .kr-values__item:not(.is-open) .kr-values__panel-inner { opacity: 0; transform: translateY(-6px); }
    .kr .kr-values__media { align-self: stretch; margin-bottom: 20px; border-radius: var(--lp2-radius-md-strong); }
    .kr .kr-values__text { font-size: 16px; line-height: 26px; }
    .kr .kr-values__cta { margin-top: 24px; padding: 0 28px; }
}

/* From 1024px: list and photo side by side. */
@media (min-width: 1024px) {
    .kr .kr-values { padding: 96px 0; }
    .kr .kr-values__body { display: grid; grid-template-columns: minmax(0, 525fr) minmax(0, 711fr); column-gap: 64px; align-items: start; margin-top: 48px; }
    .kr .kr-values__body--no-photo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
    .kr .kr-values__media { display: none; }
    .kr .kr-values__photo {
        position: sticky;
        top: 112px;
        display: block;
        overflow: hidden;
        isolation: isolate;
        aspect-ratio: 16 / 9;
        border-radius: var(--lp2-radius-md-strong);
        background: var(--lp2-grey-100);
        box-shadow: 0 30px 60px -30px rgba(21, 23, 28, .35);
    }
    .kr .kr-values__photo-img { position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; opacity: 0; }
    .kr .kr-values__photo-img.is-prev { z-index: 1; opacity: 1; }
    .kr .kr-values__photo-img.is-active { z-index: 2; opacity: 1; }
    @supports not (aspect-ratio: 1 / 1) {
        .kr .kr-values__photo::before { content: ""; display: block; padding-top: 56.25%; }
    }
}
@media (hover: hover) and (pointer: fine) {
    .kr .kr-values__body.is-ready .kr-values__item:not(.is-open) .kr-values__toggle:hover .kr-values__sign,
    .kr .kr-values__body.is-ready .kr-values__item:not(.is-open) .kr-values__toggle:hover .kr-values__sign::before,
    .kr .kr-values__body.is-ready .kr-values__item:not(.is-open) .kr-values__toggle:hover .kr-values__sign::after { border-color: var(--lp2-red-hover); }
}
html.lp2-wait .kr .kr-values img[loading="lazy"] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .kr .kr-values__sign, .kr .kr-values__sign::before, .kr .kr-values__sign::after, .kr .kr-values__panel.is-moving,
    .kr .kr-values__panel-inner { transition: none; }
}
/* Print: every panel, hidden="until-found" ones too. */
@media print {
    .kr .kr-values__bg { display: none; }
    .kr .kr-values__panel[hidden] { display: block; content-visibility: visible; }
    .kr .kr-values__body.is-ready .kr-values__item:not(.is-open) .kr-values__panel-inner { opacity: 1; transform: none; }
    .kr .kr-values__body.is-ready .kr-values__sign { visibility: hidden; }
    .kr .kr-values__item { break-inside: avoid; }
    .kr .kr-values__photo { position: relative; }
}

/* ===== kr:resources ===== */
/* ---------- Resources #resources ---------- */
.kr .kr-resources { --kr-resources-gut: 16px; --kr-resources-gap: 16px; padding: 56px 0; background: var(--kr-soft); }
.kr .kr-resources__head { margin-bottom: 32px; text-align: center; }
.kr .kr-resources__line { display: block; }
.kr .kr-resources__lead { margin-top: 12px; }
.kr .kr-resources__nav { display: none; gap: 8px; justify-content: center; margin-top: 24px; visibility: hidden; }
.kr .kr-resources--js .kr-resources__nav { visibility: visible; }
.kr .kr-resources__nav[hidden] { display: none; }
.kr .kr-resources__arrow {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lp2-white);
    box-shadow: inset 0 0 0 1px var(--kr-card-line);
    color: var(--lp2-ink);
    cursor: pointer;
    transition: color .2s, box-shadow .2s;
}
.kr .kr-resources__arrow[aria-disabled="true"] { cursor: default; }
.kr .kr-resources__arrow[aria-disabled="true"] .kr-resources__arrow-icon { opacity: .4; }
.kr .kr-resources__arrow-icon { display: block; }
.kr .kr-resources__track {
    display: flex;
    gap: var(--kr-resources-gap);
    margin: -4px calc(var(--kr-resources-gut) * -1);
    padding: 4px 0 4px var(--kr-resources-gut);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--kr-resources-gut);
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.kr .kr-resources__track::-webkit-scrollbar { display: none; }
.kr .kr-resources__track:focus-visible { outline-offset: -2px; }
.kr .kr-resources__track::after { content: ""; flex: 0 0 1px; margin-left: calc(var(--kr-resources-gut) - var(--kr-resources-gap) - 1px); }
.kr .kr-resources__item { display: flex; flex: 0 0 calc((100% - var(--kr-resources-gut)) * .86); min-width: 0; scroll-snap-align: start; }
/* position: relative keeps the absolute sr-only texts inside the scroller (else they widen the page). */
.kr .kr-resources__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--lp2-radius-md-strong);
    background: var(--lp2-white);
}
.kr .kr-resources__media { position: relative; display: block; flex: none; overflow: hidden; aspect-ratio: 16 / 9; background: var(--lp2-grey-100); }
.kr .kr-resources__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.kr .kr-resources__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 16px 24px; text-align: center; }
.kr .kr-resources__card-title { color: var(--lp2-ink); font-size: 20px; font-weight: 600; line-height: 28px; overflow-wrap: anywhere; }
.kr .kr-resources__text { margin-top: 8px; color: var(--kr-muted); font-size: 14px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
.kr .kr-resources__foot { margin-top: auto; padding-top: 24px; }
.kr .kr-resources__cta { padding: 0 22px; box-shadow: inset 0 0 0 1px var(--kr-card-line); line-height: 20px; letter-spacing: -.01em; }
/* Safari < 15: no aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
    .kr .kr-resources__media::before { content: ""; display: block; padding-top: 56.25%; }
}

@media (min-width: 601px) {
    .kr .kr-resources { --kr-resources-gut: 24px; --kr-resources-gap: 24px; padding: 80px 0; }
    .kr .kr-resources__head { margin-bottom: 40px; }
    .kr .kr-resources__lead { margin-top: 16px; }
    .kr .kr-resources__item { flex-basis: calc((100% - var(--kr-resources-gut) - var(--kr-resources-gap)) / 1.4); }
    .kr .kr-resources__body { padding: 24px 24px 28px; text-align: left; }
    .kr .kr-resources__card-title { font-size: 24px; line-height: 32px; }
    .kr .kr-resources__text { font-size: 16px; line-height: 24px; }
    .kr .kr-resources__cta { padding: 0 28px; }
}
@media (hover: hover) and (pointer: fine) {
    @media (min-width: 601px) {
        .kr .kr-resources__nav { display: flex; }
    }
    .kr .kr-resources__arrow:not([aria-disabled="true"]):hover { color: var(--lp2-red); box-shadow: inset 0 0 0 1px var(--lp2-red); }
}
@media (min-width: 1024px) {
    .kr .kr-resources { --kr-resources-gut: 4px; --kr-resources-gap: 34px; padding: 96px 0; }
    .kr .kr-resources__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; text-align: left; }
    .kr .kr-resources__intro { max-width: 693px; }
    .kr .kr-resources__nav { display: flex; margin-top: 0; }
    .kr .kr-resources__item { flex-basis: calc((100% - var(--kr-resources-gut) - var(--kr-resources-gap)) / 2); }
}
html.lp2-wait .kr .kr-resources__img[loading="lazy"] { display: none; }
/* One transition for the motion layer's lazy fade (opacity) and the hover zoom (transform). */
@media (prefers-reduced-motion: no-preference) {
    .kr .kr-resources__media .kr-resources__img[data-v2-img] { transition: opacity var(--v2-m-base, 320ms) var(--v2-m-io, ease), transform .3s ease-out; }
    @media (hover: hover) and (pointer: fine) {
        .kr .kr-resources__card--link:hover .kr-resources__img { transform: scale(1.03); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .kr .kr-resources__track { scroll-behavior: auto; }
    .kr .kr-resources__arrow, .kr .kr-resources__cta { transition: none; }
}
@media print {
    .kr .kr-resources { padding: 24px 0; background: none; }
    .kr .kr-resources__nav, .kr .kr-resources__foot { display: none; }
    .kr .kr-resources__track { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
    .kr .kr-resources__track::after { display: none; }
    .kr .kr-resources__item { flex-basis: calc((100% - var(--kr-resources-gap)) / 2); break-inside: avoid; }
    .kr .kr-resources__card { box-shadow: inset 0 0 0 1px var(--kr-card-line); }
}

/* ===== kr:technology ===== */
/* Icon redraw (linked cards): fill-mode backwards, so a browser without pathLength never keeps a dashed icon. */
.kr .kr-technology { padding: 56px 0; background: var(--lp2-white); }
.kr .kr-technology__head { max-width: 900px; margin: 0 auto 32px; }
.kr .kr-technology__lead { margin-top: 12px; }
.kr .kr-technology__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kr .kr-technology__item { display: flex; min-width: 0; }
.kr .kr-technology__card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 20px 12px;
    border-radius: var(--lp2-radius-md-strong);
    background: var(--lp2-grey-100);
    color: var(--lp2-ink);
    text-align: center;
}
.kr .kr-technology__icon { display: block; flex: none; width: 48px; height: 48px; margin-bottom: 12px; }
.kr .kr-technology__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kr .kr-technology__tone { stroke-width: 4.5; }
.kr .kr-technology__tone--accent { stroke: #c4111f; }
.kr .kr-technology__tone--ink { stroke: var(--lp2-ink); }
.kr .kr-technology__tone--muted { stroke: #b9bbc2; }
.kr .kr-technology__name { max-width: 100%; font-size: 16px; font-weight: 600; line-height: 24px; overflow-wrap: anywhere; }
.kr .kr-technology__text { max-width: 100%; margin-top: 6px; color: var(--kr-muted); font-size: 13px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; }
.kr .kr-technology__foot { display: flex; justify-content: center; max-width: 100%; margin-top: auto; padding-top: 16px; }
.kr .kr-technology__btn {
    max-width: 100%;
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -.01em;
    text-align: center;
    white-space: normal;
}
@media (min-width: 601px) {
    .kr .kr-technology { padding: 80px 0; }
    .kr .kr-technology__head { margin-bottom: 40px; }
    .kr .kr-technology__lead { margin-top: 16px; }
    .kr .kr-technology__list { gap: 24px; }
    .kr .kr-technology__card { padding: 40px 24px; }
    .kr .kr-technology__icon { width: 64px; height: 64px; margin-bottom: 20px; }
    .kr .kr-technology__tone { stroke-width: 3.75; }
    .kr .kr-technology__name { font-size: 24px; line-height: 32px; }
    .kr .kr-technology__text { margin-top: 8px; font-size: 16px; line-height: 24px; }
    .kr .kr-technology__foot { padding-top: 20px; }
    .kr .kr-technology__btn { min-height: 52px; padding: 0 28px; font-size: 16px; }
}
@media (min-width: 1024px) {
    .kr .kr-technology { padding: 96px 0; }
    .kr .kr-technology__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kr .kr-technology__card { padding: 32px 20px; }
}
@media (hover: hover) and (pointer: fine) {
    .kr .kr-technology__card--link:hover .kr-technology__btn { background: var(--lp2-grey-150); }
    .kr .kr-technology__card--link:hover .kr-technology__shape { animation: kr-technology-draw .8s cubic-bezier(.65, 0, .35, 1) backwards; }
    .kr .kr-technology__card--link:hover .kr-technology__tone--ink .kr-technology__shape { animation-delay: .12s; }
    .kr .kr-technology__card--link:hover .kr-technology__tone--muted .kr-technology__shape { animation-delay: .24s; }
}
@media (prefers-reduced-motion: no-preference) {
    .kr .kr-technology__card--link:focus-visible .kr-technology__shape { animation: kr-technology-draw .8s cubic-bezier(.65, 0, .35, 1) backwards; }
    .kr .kr-technology__card--link:focus-visible .kr-technology__tone--ink .kr-technology__shape { animation-delay: .12s; }
    .kr .kr-technology__card--link:focus-visible .kr-technology__tone--muted .kr-technology__shape { animation-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
    .kr .kr-technology__card--link:hover .kr-technology__shape,
    .kr .kr-technology__card--link:focus-visible .kr-technology__shape { animation: none; }
}
@keyframes kr-technology-draw {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; }
    to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@media print {
    .kr .kr-technology { padding: 24px 0; }
    .kr .kr-technology__card { border: 1px solid var(--lp2-line); background: #fff; box-shadow: none; break-inside: avoid; }
    .kr .kr-technology__shape { animation: none; }
}

/* ===== kr:events ===== */
/* ---------- Events #events ---------- */
.kr .kr-events { --kr-events-gut: 16px; --kr-events-gap: 16px; padding: 56px 0; background: var(--lp2-white); }
/* (0,3,0): wins over the padding of every width below. */
.kr .kr-technology + .kr-events { padding-top: 0; }
.kr .kr-events__head { margin-bottom: 32px; text-align: center; }
.kr .kr-events__lead { margin-top: 12px; }
.kr .kr-events__nav { display: none; }
/* (0,3,0): wins over the display of the desktop rule. */
.kr .kr-events__nav[hidden] { display: none; }
.kr .kr-events__arrow {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lp2-white);
    box-shadow: inset 0 0 0 1px var(--kr-card-line);
    color: var(--lp2-ink);
    cursor: pointer;
    transition: color .2s, box-shadow .2s;
}
.kr .kr-events__arrow-icon { display: block; }
.kr .kr-events__arrow[aria-disabled="true"] { cursor: default; }
.kr .kr-events__arrow[aria-disabled="true"] .kr-events__arrow-icon { opacity: .4; }
.kr .kr-events__arrow:not([aria-disabled="true"]):active { color: var(--lp2-red); box-shadow: inset 0 0 0 1px var(--lp2-red); }
.kr .kr-events__track {
    display: flex;
    gap: var(--kr-events-gap);
    margin: -4px calc(var(--kr-events-gut) * -1);
    padding: 4px 0 4px var(--kr-events-gut);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--kr-events-gut);
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.kr .kr-events__track::-webkit-scrollbar { display: none; }
.kr .kr-events__track:focus-visible { outline-offset: -2px; }
.kr .kr-events__track::after { content: ""; flex: 0 0 1px; margin-left: calc(var(--kr-events-gut) - var(--kr-events-gap) - 1px); }
.kr .kr-events__item { display: flex; flex: 0 0 calc((100% - var(--kr-events-gut)) * .86); min-width: 0; scroll-snap-align: start; }
/* position: relative keeps the absolute sr-only texts inside the scroller. */
.kr .kr-events__card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; }
.kr .kr-events__media { position: relative; display: block; flex: none; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--lp2-radius-md-strong); background: var(--lp2-grey-100); }
.kr .kr-events__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.kr .kr-events__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; padding-top: 20px; text-align: center; }
.kr .kr-events__tag { color: var(--lp2-red); font-size: 14px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.kr .kr-events__card-title { color: var(--lp2-ink); font-size: 20px; font-weight: 600; line-height: 28px; overflow-wrap: anywhere; }
.kr .kr-events__tag + .kr-events__card-title { margin-top: 4px; }
.kr .kr-events__text { margin-top: 8px; color: var(--kr-muted); font-size: 14px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }
.kr .kr-events__foot { margin-top: auto; padding-top: 24px; }
.kr .kr-events__cta { padding: 0 22px; line-height: 20px; letter-spacing: -.01em; }
/* Safari < 15: no aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
    .kr .kr-events__media::before { content: ""; display: block; padding-top: 56.25%; }
}

@media (min-width: 601px) {
    .kr .kr-events { --kr-events-gut: 24px; --kr-events-gap: 24px; padding: 80px 0; }
    .kr .kr-events__head { margin-bottom: 40px; }
    .kr .kr-events__intro { max-width: 640px; margin: 0 auto; }
    .kr .kr-events__lead { margin-top: 16px; text-wrap: balance; }
    .kr .kr-events__item { flex-basis: calc((100% - var(--kr-events-gut) - var(--kr-events-gap)) / 1.4); }
    .kr .kr-events__body { align-items: flex-start; text-align: left; }
    .kr .kr-events__card-title { font-size: 24px; line-height: 32px; }
    .kr .kr-events__text { font-size: 16px; line-height: 24px; }
    .kr .kr-events__cta { padding: 0 28px; }
}
@media (min-width: 1024px) {
    .kr .kr-events { --kr-events-gut: 4px; --kr-events-gap: 34px; padding: 96px 0; }
    .kr .kr-events__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; text-align: left; }
    .kr .kr-events__intro { max-width: 693px; margin: 0; }
    .kr .kr-events__nav { display: flex; flex: none; gap: 8px; padding-top: 12px; }
    .kr .kr-events__item { flex-basis: calc((100% - var(--kr-events-gut) - 2 * var(--kr-events-gap)) / 3); }
}
@media (hover: hover) and (pointer: fine) {
    .kr .kr-events__arrow:not([aria-disabled="true"]):hover { color: var(--lp2-red); box-shadow: inset 0 0 0 1px var(--lp2-red); }
    .kr .kr-events__media:hover ~ .kr-events__body .kr-events__cta { background: var(--lp2-grey-150); }
}
html.lp2-wait .kr .kr-events__img[loading="lazy"] { display: none; }
/* One transition for the motion layer's lazy fade and hover zoom (each rule would override the other). */
@media (prefers-reduced-motion: no-preference) {
    .kr .kr-events__media .kr-events__img[data-v2-img] { transition: opacity var(--v2-m-base, 320ms) var(--v2-m-io, ease), transform var(--v2-m-slow, 720ms) var(--v2-m-out, ease-out); }
}
@media (prefers-reduced-motion: reduce) {
    .kr .kr-events__track { scroll-behavior: auto; }
    .kr .kr-events__arrow { transition: none; }
}
@media print {
    .kr .kr-events { padding: 24px 0; }
    .kr .kr-events__nav, .kr .kr-events__foot { display: none; }
    .kr .kr-events__track { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
    .kr .kr-events__track::after { display: none; }
    .kr .kr-events__item { flex-basis: calc((100% - 2 * var(--kr-events-gap)) / 3); break-inside: avoid; }
}

/* ===== kr:careers ===== */
/* The first heading part ends with a forced break ("\A"): the accent span stays inline, its gradient on its own text. */
.kr .kr-careers { padding: 56px 0; background: var(--kr-soft); }
.kr .kr-careers__layout { display: flex; flex-direction: column; }
.kr .kr-careers__head { text-align: center; }
.kr .kr-careers__title-main:not(:last-child)::after { content: "\A"; white-space: pre; }
.kr .kr-careers__lead { margin-top: 12px; }
.kr .kr-careers__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.kr .kr-careers__item { flex: 0 0 100%; min-width: 0; }
.kr .kr-careers__banner { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--lp2-radius-md-strong); background: var(--lp2-line); }
.kr .kr-careers__img { width: 100%; height: 100%; object-fit: cover; }
.kr .kr-careers__cta { display: flex; justify-content: center; margin-top: 32px; }
html.lp2-wait .kr .kr-careers__img[loading="lazy"] { display: none; }
@media (min-width: 601px) {
    .kr .kr-careers { padding: 80px 0; }
    .kr .kr-careers__title-main:not(:last-child)::after { content: none; }
    .kr .kr-careers__lead { margin-top: 16px; }
    .kr .kr-careers__list { gap: 24px; margin-top: 40px; }
    .kr .kr-careers__item { flex-basis: calc((100% - 24px) / 2); }
}
@media (min-width: 1024px) {
    .kr .kr-careers { padding: 96px 0; }
    .kr .kr-careers__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 40px; row-gap: 40px; }
    .kr .kr-careers__head { grid-column: 1; grid-row: 1; text-align: left; }
    .kr .kr-careers__title-main:not(:last-child)::after { content: "\A"; white-space: pre; }
    .kr .kr-careers__list { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
    .kr .kr-careers__cta { grid-column: 2; grid-row: 1; align-self: end; justify-content: flex-end; margin-top: 0; }
}
@media print {
    .kr .kr-careers { padding: 24px 0; background: none; }
    .kr .kr-careers__item { break-inside: avoid; }
}

/* ===== kr:account ===== */
/* Contrast deviations (WCAG 1.4.3): solid white text, glow #ff6b5f at 20% and last stop #d3202f (prototype #ef4a40). */
.kr .kr-account { padding: 0 0 96px; background: var(--kr-soft); }
.kr .kr-account__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px 24px;
    border-radius: 16px;
    background:
        radial-gradient(70% 90% at 85% 10%, rgba(255, 107, 95, .2) 0%, rgba(255, 107, 95, 0) 60%),
        linear-gradient(160deg, #7a0e16 0%, #e31526 60%, #d3202f 100%);
    color: #fff;
    text-align: center;
}
.kr .kr-account__head { display: flex; flex-direction: column; align-items: center; }
.kr .kr-account__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.kr .kr-account__icon img { width: 26px; height: 26px; }
.kr .kr-account__title { color: #fff; letter-spacing: -.02em; }
.kr .kr-account__line { display: block; }
.kr:lang(ja) .kr-account__line { word-break: auto-phrase; }
.kr .kr-account__accent { color: #fbddd2; }
.kr .kr-account__text { color: #fff; font-size: 14px; font-weight: 500; line-height: 22px; }
.kr .kr-account__text + .kr-account__actions { margin-top: 32px; }
.kr .kr-account__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kr .kr-account__btn { padding: 0 22px; letter-spacing: -.01em; }
/* Ink label (the shared inverse button is red), on hover / pressed too. */
.kr .kr-account__btn--primary, .kr .kr-account__btn--primary:hover, .kr .kr-account__btn--primary:active { color: var(--lp2-ink); }
.kr .kr-account__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.kr .kr-account__btn--ghost:active { background: rgba(255, 255, 255, .12); color: #fff; }
/* Focus (.lp2-ring-inv halo) keeps the ghost's inset ring. */
.kr .kr-account__btn--ghost:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 4px var(--lp2-ink); }

/* Popup (Figma 1228:2 / 1230:2 / 1232:2): z-index 1060 above the shared header (1030); overlay 55% ink (Figma: solid). */
.kr .kr-account__modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1060;
    display: grid;
    place-items: end center;
    background: rgba(21, 23, 28, .55);
}
.kr .kr-account__modal[hidden] { display: none !important; }
.kr .kr-account__dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 32px 20px 24px;
    border-radius: 24px 24px 0 0;
    background: #fff;
    color: var(--lp2-ink);
    box-shadow: 0 24px 64px -16px rgba(21, 23, 28, .32);
    text-align: left;
}
.kr .kr-account__dialog:focus { outline: none; }
.kr .kr-account__grip { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #e4e4e8; }
.kr .kr-account__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lp2-grey-100);
    color: var(--kr-secondary);
    cursor: pointer;
    transition: background-color .2s;
}
.kr .kr-account__close svg { display: block; width: 20px; height: 20px; }
.kr .kr-account__close:active { background: var(--lp2-grey-150); }
.kr .kr-account__modal-title { margin: 0 44px 24px 0; color: var(--lp2-ink); font-size: 22px; font-weight: 700; line-height: 30px; letter-spacing: 0; text-wrap: balance; }
.kr .kr-account__steps { display: grid; gap: 24px; }
.kr .kr-account__step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.kr .kr-account__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lp2-red-tint); color: var(--lp2-red-pressed); font-size: 16px; font-weight: 700; line-height: 20px; }
.kr .kr-account__step-title { color: var(--lp2-ink); font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -.02em; }
.kr .kr-account__step-text { color: var(--kr-secondary); font-size: 14px; font-weight: 400; line-height: 22px; }
.kr .kr-account__step-title + .kr-account__step-text { margin-top: 4px; }
.kr .kr-account__qr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--lp2-grey-150);
    border-radius: 16px;
    background: var(--lp2-grey-100);
}
.kr .kr-account__qr-tile { flex: none; width: 104px; height: 104px; padding: 8px; border-radius: 12px; background: #fff; }
.kr .kr-account__qr-tile img { width: 100%; height: 100%; object-fit: contain; }
.kr .kr-account__qr-caption { min-width: 0; color: var(--kr-secondary); font-size: 14px; font-weight: 600; line-height: 16px; }
.kr .kr-account__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.kr .kr-account__store { display: block; flex: none; border-radius: 8px; }
.kr .kr-account__store img { display: block; width: auto; height: 44px; }
/* Device classes repeated: the popup blocks set their own display. */
@media not all and (min-width: 601px) {
    .kr .kr-account__dialog .kr-only-d { display: none; }
}
@media (min-width: 601px) {
    .kr .kr-account__dialog .kr-only-m { display: none; }
}
.kr .kr-account__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 24px;
    padding: 0 24px;
    border-radius: var(--lp2-radius-pill);
    background: var(--lp2-red);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    transition: background-color .2s;
}
.kr .kr-account__cta:active { background: var(--lp2-red-pressed); color: #fff; }
.kr .kr-account__login { margin-top: 14px; color: var(--kr-secondary); font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; }
.kr .kr-account__steps + .kr-account__login { margin-top: 24px; }
.kr .kr-account__login a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 601px) {
    .kr .kr-account__card { gap: 24px; padding: 48px 40px; text-align: left; }
    .kr .kr-account__head { align-items: flex-start; }
    .kr .kr-account__icon { width: 64px; height: 64px; margin-bottom: 24px; }
    .kr .kr-account__icon img { width: 32px; height: 32px; }
    .kr .kr-account__text { font-size: 16px; line-height: 24px; }
    .kr .kr-account__actions { justify-content: flex-start; }
    .kr .kr-account__btn { padding: 0 28px; }
    .kr .kr-account__modal { place-items: center; padding: 16px; }
    .kr .kr-account__dialog { padding: 40px; border-radius: 24px; }
    .kr .kr-account__grip { display: none; }
    .kr .kr-account__close { top: 16px; right: 16px; }
    .kr .kr-account__modal-title { margin: 0 48px 32px 0; font-size: 28px; line-height: 36px; letter-spacing: -.01em; }
    .kr .kr-account__steps { gap: 28px; }
    .kr .kr-account__step { grid-template-columns: 44px minmax(0, 1fr); gap: 20px; }
    .kr .kr-account__num { width: 44px; height: 44px; font-size: 18px; line-height: 24px; }
    .kr .kr-account__step-title { font-size: 20px; line-height: 28px; letter-spacing: 0; }
    .kr .kr-account__step-text { font-size: 16px; line-height: 24px; }
    .kr .kr-account__qr { gap: 24px; margin-top: 20px; padding: 16px; }
    .kr .kr-account__qr-tile { width: 136px; height: 136px; padding: 12px; }
    .kr .kr-account__qr-caption { font-size: 16px; line-height: 24px; }
    .kr .kr-account__stores { margin-top: 16px; }
    .kr .kr-account__cta { margin-top: 28px; }
    .kr .kr-account__login { margin-top: 16px; }
    .kr .kr-account__steps + .kr-account__login { margin-top: 28px; }
}
@media (min-width: 1024px) {
    .kr .kr-account__card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; gap: 48px; padding: 64px; }
}
@media (hover: hover) and (pointer: fine) {
    .kr .kr-account__btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
    .kr .kr-account__close:hover { background: var(--lp2-grey-150); }
    .kr .kr-account__cta:hover { background: var(--lp2-red-hover); color: #fff; }
}
html.lp2-wait .kr .kr-account__icon img[loading="lazy"] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .kr .kr-account__btn, .kr .kr-account__close, .kr .kr-account__cta { transition: none; }
}
@media print {
    .kr .kr-account { padding-bottom: 24px; background: none; }
    .kr .kr-account__card { background: none; box-shadow: inset 0 0 0 1px var(--lp2-line); color: var(--lp2-ink); }
    .kr .kr-account__icon { display: none; }
    .kr .kr-account__title, .kr .kr-account__accent, .kr .kr-account__text { color: var(--lp2-ink); }
    .kr .kr-account__btn--ghost { color: var(--lp2-ink); box-shadow: inset 0 0 0 1px var(--lp2-line-2); }
    .kr .kr-account__btn--primary { box-shadow: inset 0 0 0 1px var(--lp2-line-2); }
    .kr .kr-account__modal { display: none; }
}