/* =============================================================================
   MirrorMere — 인증 홍보 사이트 공통 스타일
   =============================================================================
   모든 스타일은 이 파일에만 둔다. HTML 에 <style> 이나 인라인 style= 을 쓰지
   않는다. 페이지가 늘어도 손댈 자리는 여기 하나다.

   색과 서체 토큰은 대표 사이트(2026_mirrormere_web)의 것을 따른다. 두 사이트가
   따로 놀면 같은 회사로 보이지 않는다.
   ========================================================================== */

:root {
    /* 바탕과 글자 */
    --background: hsl(0 0% 100%);
    --foreground: hsl(222.2 84% 4.9%);
    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsl(215.4 16.3% 45%);
    --border: hsl(214.3 31.8% 91.4%);

    /* 강조 */
    --accent-indigo: hsl(238 84% 67%);
    --accent-violet: hsl(258 90% 66%);
    --accent-cyan: hsl(192 91% 55%);

    /* 짙은 면 */
    --ink: hsl(222 47% 11%);
    --ink-soft: hsl(222 32% 22%);
    --surface-deep: hsl(224 64% 6%);
    --surface-rise: hsl(228 35% 12%);


    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.875rem;

    --fz-display: clamp(2.6rem, 1.6rem + 4.6vw, 4.75rem);
    --fz-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
    --fz-h2: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
    --fz-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
    --fz-lede: clamp(1.02rem, 0.95rem + 0.45vw, 1.25rem);

    --shell: 72rem;
    --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
    --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

    /* 본문 서체는 Pretendard 하나로 통일한다. 앞서 쓰던 Inter + Apple SD Gothic Neo
     * 조합은 영문과 한글이 서로 다른 서체로 그려져 한 문장 안에서 굵기와 글자높이가
     * 어긋났다. Pretendard 는 두 문자를 같은 설계로 담고 있어 그 어긋남이 없다.
     * 자체 호스팅한다(assets/css/pretendard.css). 외부 자원을 부르지 않는다. */
    --sans: "Pretendard Variable", "Pretendard", -apple-system,
            BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* 오류 코드, 요소 이름 같은 식별자는 자간이 고른 서체라야 읽힌다 */
    --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    /* 처음엔 느리게 버티다 뒤에서 빨라지는 곡선(easeInQuart). 열 때도 닫을 때도
     * 같은 곡선을 걸어야 양쪽 다 "천천히 → 빠르게" 로 느껴진다. 여는 쪽에만 걸면
     * 닫힐 때는 곡선을 거꾸로 지나 "빠르게 → 천천히" 가 되어 버린다. */
    --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
}

/* -------------------------------------------------------------------------
   바탕
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gap);
}

.section {
    padding-block: var(--section-y);
}

.section-dark {
    background: var(--surface-deep);
    color: hsl(210 40% 96%);
}

.section-muted {
    background: var(--muted);
}

/* -------------------------------------------------------------------------
   글
   ---------------------------------------------------------------------- */

.display {
    font-size: var(--fz-display);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0;
}

.h1 {
    font-size: var(--fz-h1);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0;
}

.h2 {
    font-size: var(--fz-h2);
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 650;
    margin: 0 0 1rem;
}

.h3 {
    font-size: var(--fz-h3);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.lede {
    font-size: var(--fz-lede);
    color: var(--muted-foreground);
    max-width: 46rem;
    margin: 1.1rem 0 0;
}

.section-dark .lede {
    color: hsl(215 25% 72%);
}

.eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin: 0 0 0.75rem;
}

.section-dark .eyebrow {
    color: var(--accent-cyan);
}

.fine {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   머리말
   ---------------------------------------------------------------------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: hsl(0 0% 100% / 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

/* 머리말만 폭 제한을 풀어, 로고는 본문 왼쪽 선에 맞추고 단추는 화면 오른쪽 끝에
 * 붙인다. 왼쪽 여백은 본문 폭(--shell)이 만드는 여백과 같게 계산하고, 오른쪽은
 * 최소 여백만 둔다. 절대 배치를 쓰지 않으므로 메뉴와 겹칠 일이 없다. */
.masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* 로고·메뉴·CTA 세 덩어리가 한 줄에 서야 한다. 사이 간격을 화면 폭에 따라
     * 늘리면 넓은 화면에서 오히려 넘쳐 CTA 가 아래로 떨어진다. 고정폭으로 둔다. */
    gap: 0.5rem 1.25rem;
    min-height: 4rem;
    padding-block: 0.5rem;
    max-width: none;
    padding-left: max(var(--gap), calc((100% - var(--shell)) / 2));
    padding-right: var(--gap);
}

/* 머리말이 화면에 붙어 있으므로, 앵커로 건너뛰면 제목이 그 아래로 숨는다.
 * 건너뛴 자리에 머리말 높이만큼 여백을 두어 가리지 않게 한다. */
main [id],
main {
    scroll-margin-top: 5.5rem;
}

.wordmark {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.12rem;
    text-decoration: none;
}

.wordmark sup {
    font-size: 0.58em;
    font-weight: 500;
    margin-left: 0.1em;
}

/* 메뉴는 다섯 개다. 영문 이름이 한글보다 길어 좁은 화면에서 먼저 넘친다.
 * 자바스크립트로 접는 대신 줄바꿈을 허용한다. 항목이 다 보이고 동작이 단순하다. */
.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem clamp(0.7rem, 0.35rem + 1.2vw, 1.4rem);
}

/* 머리말 우측 CTA — 평소엔 아이콘, 얹으면 글자가 펼쳐진다
 * =============================================================================
 * 단추 두 개를 글자째로 두면 폭을 350px 넘게 먹는다. 메뉴가 한 항목만 늘어도
 * 자리가 없어져 줄이 갈라진다. 평소에는 아이콘만 두어 자리를 비워 두고, 마우스를
 * 얹거나 키보드로 짚었을 때만 글자를 펼친다.
 *
 * 글자는 숨기지 않고 폭만 0 으로 접는다. display:none 으로 지우면 화면 낭독기가
 * 단추 이름을 잃는다. 접어 두면 이름은 그대로 읽힌다.
 * 아이콘은 Material Symbols(Apache 2.0)이며 문서 안에 박아 넣어 요청이 늘지 않고
 * 글자색을 그대로 따라간다.
 * ========================================================================== */

.masthead-cta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.35rem;
    padding-inline: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.icon-btn.is-primary {
    border-color: var(--ink);
    background: var(--ink);
    color: hsl(210 40% 98%);
}

.icon-btn .icon {
    flex: none;
}

.icon-btn-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    /* 닫힐 때 쓰이는 전환 */
    transition:
        max-width 0.45s var(--ease-in),
        margin-left 0.45s var(--ease-in),
        opacity 0.45s var(--ease-in);
}

.icon-btn:hover,
.icon-btn:focus-visible {
    color: var(--foreground);
    border-color: var(--foreground);
}

.icon-btn.is-primary:hover,
.icon-btn.is-primary:focus-visible {
    color: hsl(210 40% 98%);
    border-color: var(--ink-soft);
    background: var(--ink-soft);
}

.icon-btn:hover .icon-btn-label,
.icon-btn:focus-visible .icon-btn-label {
    max-width: 16rem;
    opacity: 1;
    margin-left: 0.45rem;
    /* 열릴 때 쓰이는 전환. 닫힐 때와 같은 곡선이어야 속도감이 대칭이 된다. */
    transition:
        max-width 0.45s var(--ease-in),
        margin-left 0.45s var(--ease-in),
        opacity 0.45s var(--ease-in);
}

/* 움직임을 줄여 달라고 한 이용자에게는 펼침을 곧바로 준다 */
@media (prefers-reduced-motion: reduce) {
    .icon-btn,
    .icon-btn-label {
        transition: none;
    }
}

/* 손가락으로 쓰는 화면에는 마우스 얹기가 없다. 글자를 늘 펼쳐 둔다. */
@media (hover: none) {
    .icon-btn-label {
        max-width: none;
        opacity: 1;
        margin-left: 0.45rem;
    }
}

/* 좁은 화면에서는 메뉴가 한 줄에 못 서서 셋이 뒤엉킨다. 그때는 첫 줄에 로고와
 * 단추만 남기고 메뉴를 통째로 아래 줄로 내린다. 단추는 어느 폭에서든 오른쪽 끝에
 * 붙어 있어야 찾기 쉽다. */
@media (max-width: 56rem) {
    .masthead-cta {
        order: 2;
    }
    .nav {
        order: 3;
        width: 100%;
    }
}

/* 현재 보고 있는 페이지는 메뉴에서 표시해 준다 */
.nav a[aria-current="page"] {
    color: var(--foreground);
    font-weight: 600;
}

.nav a {
    text-decoration: none;
    font-size: 0.92rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.nav a:hover {
    color: var(--foreground);
}

/* -------------------------------------------------------------------------
   첫 화면
   ---------------------------------------------------------------------- */

.hero {
    padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem) var(--section-y);
    background:
        radial-gradient(60rem 30rem at 15% -10%, hsl(238 84% 67% / 0.10), transparent 60%),
        radial-gradient(50rem 26rem at 85% 0%, hsl(192 91% 55% / 0.10), transparent 60%);
}

.hero-title {
    margin-top: 1.25rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   단추
   ---------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1.35rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--ink);
    color: hsl(210 40% 98%);
}

.btn-ghost {
    border-color: var(--border);
    background: transparent;
    color: var(--foreground);
}

.section-dark .btn-ghost {
    border-color: hsl(215 25% 32%);
    color: hsl(210 40% 96%);
}

/* 어두운 구획에서는 짙은 단추가 바탕에 묻힌다. 밝기를 뒤집어 준다. */
.section-dark .btn-primary {
    background: hsl(0 0% 100%);
    color: var(--ink);
}

.section-dark .btn-primary:hover {
    background: hsl(210 40% 92%);
}

/* -------------------------------------------------------------------------
   수치 판
   ---------------------------------------------------------------------- */

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--gap);
    margin-top: 2.5rem;
}

.figure {
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
}

.section-dark .figure {
    border-color: hsl(215 25% 22%);
    background: var(--surface-rise);
}

.figure-value {
    font-family: var(--mono);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.figure-label {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    color: var(--muted-foreground);
}

.section-dark .figure-label {
    color: hsl(215 25% 70%);
}

/* -------------------------------------------------------------------------
   카드 묶음
   ---------------------------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--gap);
    margin-top: 2.25rem;
}

/* 카드는 어두운 구획 안에서도 흰 바탕을 쓴다. 그러면 글자색을 스스로 정해야
 * 한다. 정하지 않으면 구획의 밝은 글자색을 물려받아 흰 바탕에 흰 글자가 된다. */
.card {
    padding: 1.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
    color: var(--foreground);
}

.card p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   적합성 표
   ---------------------------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
    margin-top: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.table th,
.table td {
    text-align: left;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.table th {
    font-weight: 600;
    background: var(--muted);
    white-space: nowrap;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table .num {
    font-family: var(--mono);
    text-align: right;
    white-space: nowrap;
}

.pass {
    color: hsl(158 64% 30%);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   맺음말
   ---------------------------------------------------------------------- */

.footer {
    border-top: 1px solid var(--border);
    padding-block: 2.5rem;
    color: var(--muted-foreground);
    font-size: 0.88rem;
}

/* 맺음말 길잡이. 본문을 다 읽고 내려온 사람이 다음으로 갈 곳을 준다.
 * 기획서 5장의 푸터 메뉴 중 Privacy 와 Terms 는 문서가 없어 넣지 않았다. */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem clamp(0.9rem, 0.5rem + 1.4vw, 2rem);
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
}

.footer-nav a {
    font-size: 0.9rem;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem var(--gap);
    align-items: flex-end;
    justify-content: space-between;
}

/* 저작권과 상표는 서로 다른 권리다. 한 줄에 몰아 넣으면 상표 표시가 저작권 문구의
 * 꼬리처럼 읽힌다. 줄을 나누고 권리자를 밝힌다. */
.footer-legal {
    display: grid;
    gap: 0.3rem;
}

/* 저작권 줄 옆에 붙는 회사 사이트 링크.
   글만 두면 이름인지 링크인지 알기 어려워 밖으로 나가는 화살표를 붙인다. */
.footer-company {
    display: inline-flex;
    align-items: center;
    gap: 0.22em;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.footer-company .icon {
    width: 0.85em;
    height: 0.85em;
}

.footer-copyright,
.footer-trademark {
    margin: 0;
}

.footer-trademark {
    font-size: 0.82rem;
    color: hsl(215 20% 45%);
}

.footer a {
    text-decoration: none;
}

.footer a:hover {
    color: var(--foreground);
}

/* -------------------------------------------------------------------------
   접근성과 좁은 화면
   ---------------------------------------------------------------------- */

:where(a, button):focus-visible {
    outline: 2px solid var(--accent-indigo);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (max-width: 40rem) {
    .nav {
        gap: 0.75rem;
    }

    .nav a {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn:hover {
        transform: none;
    }
}

/* =============================================================================
   Evidence Line — 이 제품의 고유 시각 문법
   =============================================================================
   객체 → 명세 → 규칙 → 근거 → 판정 을 가는 선 하나로 잇는다. 추적성이 이
   제품의 요지이므로, 장식이 아니라 그 요지를 눈으로 보여 주는 자리다.
   ========================================================================== */

.trace {
    margin-top: 2.5rem;
    display: grid;
    gap: 0;
}

.trace-step {
    position: relative;
    padding: 1.15rem 0 1.15rem 2.5rem;
}

/* 세로로 흐르는 선 */
.trace-step::before {
    content: "";
    position: absolute;
    left: 0.44rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        hsl(217 91% 60% / 0.35),
        hsl(217 91% 60% / 0.75)
    );
}

.trace-step:first-child::before {
    top: 1.5rem;
}

.trace-step:last-child::before {
    bottom: calc(100% - 1.5rem);
}

/* 각 단계의 매듭 */
.trace-step::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1.32rem;
    width: 0.92rem;
    height: 0.92rem;
    border-radius: 50%;
    background: var(--surface-deep);
    border: 2px solid hsl(217 91% 62%);
}

.trace-step.is-decision::after {
    background: hsl(217 91% 62%);
    box-shadow: 0 0 0 4px hsl(217 91% 62% / 0.18);
}

.trace-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: hsl(217 91% 72%);
    margin: 0 0 0.3rem;
}

.trace-body {
    margin: 0;
    font-size: 0.98rem;
    color: hsl(210 40% 92%);
}

.trace-body code {
    font-family: var(--mono);
    font-size: 0.9em;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    background: hsl(217 91% 60% / 0.14);
    color: hsl(199 95% 78%);
}

.trace-note {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: hsl(215 25% 66%);
}

/* -------------------------------------------------------------------------
   두 칸 배치 — 설명과 예시를 나란히
   ---------------------------------------------------------------------- */

/* 격자 칸의 기본 최소폭은 내용의 min-content 다. 안에 든 것이 좁은 화면에서
 * 줄어들지 못하면 칸이 그만큼 부풀어 컨테이너를 밀어낸다. minmax(0, 1fr) 로
 * 최소폭을 0 으로 풀어 주어야 칸이 화면 안에서 접힌다. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}

@media (min-width: 56rem) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
   코드 예시
   ---------------------------------------------------------------------- */

/* 다른 조각들과 같은 간격을 둔다. 앞에 카드나 글이 있는데 여백이 없으면 검은 판이
 * 바로 붙어 버린다. 다만 두 칸 배치 안에서는 왼쪽 칸과 윗선이 어긋나므로,
 * .shell 바로 아래에 놓였고 첫 조각이 아닐 때만 준다. */
.shell > .snippet:not(:first-child) {
    margin-top: 2.25rem;
}

.snippet {
    margin: 0;
    padding: 1.25rem 1.4rem;
    border-radius: var(--radius-lg);
    background: var(--surface-deep);
    color: hsl(210 40% 92%);
    font-family: var(--mono);
    font-size: 0.86rem;
    line-height: 1.7;
    overflow-x: auto;
}

.section-dark .snippet {
    background: var(--surface-rise);
    border: 1px solid hsl(215 25% 22%);
}

/* 엔진이 실제로 내놓은 출력을 글자 그대로 싣는 자리.
 *
 * 진단 한 줄에 파일 경로가 둘 다 들어가 매우 길다. 그 줄을 손으로 끊으면 더는
 * 원문이 아니게 되므로, 글은 그대로 두고 브라우저가 접게 한다. 그래야 좁은 화면
 * 에서도 가로로 밀리지 않는다. */
.snippet-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* 출처와 재현 조건. 실물이라는 주장은 확인할 수 있어야 주장이 된다. */
.snippet-caption {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--muted-foreground);
}

.section-dark .snippet-caption {
    color: hsl(215 25% 66%);
}

.snippet-caption code {
    font-family: var(--mono);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

.snippet .c {
    color: hsl(215 20% 55%);
}

.snippet .k {
    color: hsl(258 90% 76%);
}

.snippet .s {
    color: hsl(158 64% 62%);
}

/* -------------------------------------------------------------------------
   문제 목록
   ---------------------------------------------------------------------- */

.problems {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.problems li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--muted-foreground);
}

.problems li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.72em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--accent-indigo);
}

/* -------------------------------------------------------------------------
   연동 방식 — 준비 상태를 함께 보인다
   ---------------------------------------------------------------------- */

.ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--gap);
    margin-top: 2.25rem;
}

.way {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* 상태 뱃지가 위, 제목이 아래다. 한 줄에 나란히 두면 뱃지 길이에 따라 제목이
 * 밀려 낱말 한가운데서 줄이 바뀐다. */
.way-head {
    margin-bottom: 0.6rem;
}

.way-head .status {
    margin-bottom: 0.55rem;
}

.way-head .h3 {
    margin-bottom: 0;
}

.status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.status-available {
    background: hsl(158 64% 94%);
    color: hsl(158 64% 26%);
}

.status-planned {
    background: var(--muted);
    color: var(--muted-foreground);
}

.way p {
    margin: 0;
    font-size: 0.94rem;
    color: var(--muted-foreground);
}

/* -------------------------------------------------------------------------
   언어 전환
   ---------------------------------------------------------------------- */

/* 언어 전환 — 여덟 개를 한 칸에
 * =============================================================================
 * 언어마다 주소가 따로 있으므로 링크여야 한다. 새 탭으로 열든 즐겨찾기에 담든
 * 그 언어가 유지된다. 여덟을 늘어놓으면 머리말이 감당하지 못하므로 details 로
 * 접는다. 브라우저가 여닫기와 키보드 조작을 알아서 하니 자바스크립트가 없다.
 * ========================================================================== */

.lang {
    position: relative;
}

.lang > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.lang > summary::-webkit-details-marker {
    display: none;
}

.lang > summary::after {
    content: "";
    width: 0.32rem;
    height: 0.32rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.1em) rotate(45deg);
}

.lang[open] > summary,
.lang > summary:hover {
    color: var(--foreground);
    border-color: var(--foreground);
}

.lang-list {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    min-width: 9rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px hsl(222 47% 11% / 0.12);
}

.lang-list a {
    display: block;
    padding: 0.42rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--muted-foreground);
    text-decoration: none;
    white-space: nowrap;
}

.lang-list a:hover {
    background: var(--muted);
    color: var(--foreground);
}

.lang-list a[aria-current="true"] {
    color: var(--foreground);
    font-weight: 600;
}

/* 건너뛰기 링크 — 키보드로 탭 하기 전에는 화면 밖에 둔다 */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 30;
    padding: 0.7rem 1.1rem;
    background: var(--ink);
    color: hsl(210 40% 98%);
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
}

.skip:focus {
    left: 0;
}

/* =============================================================================
   XBRL Certified Software 공식 뱃지
   =============================================================================
   software.xbrl.org 의 조건: "현재 유효한 인증을 보유한 소프트웨어는 XBRL
   Certified Software 로고를 표시할 수 있으며, 온라인에 표시할 때는 그 제품의
   인증 페이지로 링크되어야 한다."

   그래서 이 뱃지는 <a> 안에서만 쓴다. 링크 없는 표시는 조건 위반이다.
   비율을 바꾸거나 색을 입히지 않는다.
   ========================================================================== */

.badge-link {
    display: inline-block;
    line-height: 0;              /* 이미지 아래 여백 제거 */
    text-decoration: none;
}

.badge-link img {
    /* 원본 250x84. 비율을 고정하고 높이로만 조절한다 */
    height: 3.5rem;
    width: auto;
}

/* 인증 로고는 가두지 않는다. 둘레 여백만 두고 바탕 위에 그대로 놓는다 */
.badge-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 2.25rem;
}

.badge-caption {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted-foreground);
}

/* 연락처 주소 한 줄. 단추처럼 보이지 않게 글로 두고, 옆에 복사만 세운다 */
.mailline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2.25rem 0 0;
    font-size: 1.05rem;
}

.mailline-addr {
    color: var(--foreground);
    text-underline-offset: 0.2em;
}

.section-dark .mailline-addr {
    color: inherit;
}

.mailline-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.mailline-copy .icon {
    width: 1rem;
    height: 1rem;
}

.mailline-copy:hover {
    color: var(--foreground);
}

.section-dark .mailline-copy {
    border-color: hsl(215 25% 26%);
    color: inherit;
}

/* 복사한 직후 잠깐 표가 나게 */
.mailline-copy.is-done {
    border-color: currentColor;
    color: var(--foreground);
}

.section-dark .mailline-copy.is-done {
    border-color: #fff;
}

/* =============================================================================
   문의 양식
   =============================================================================
   자바스크립트가 없으므로 브라우저 기본 검사(required, type=email)에 기댄다.
   그래서 라벨과 입력칸을 반드시 for/id 로 묶는다. 묶여 있어야 낭독기가 읽고,
   라벨을 눌러도 칸이 잡히며, 브라우저가 오류를 옳은 칸에 붙여 준다.
   ========================================================================== */
.form {
    margin-top: 2.25rem;
    max-width: 42rem;
}

.field {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 1.15rem;
}

/* 이름과 회사는 넓은 화면에서 나란히, 좁아지면 저절로 쌓인다 */
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0 var(--gap);
}

.field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--foreground);
}

.field-req,
.field-opt {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.field textarea {
    resize: vertical;
    min-height: 7rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

/* 동의 칸만 체크상자를 글 왼쪽에 둔다 */
.field-consent {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

.field-consent input {
    margin-top: 0.2rem;
}

.field-consent label {
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.form-actions {
    margin: 1.6rem 0 0;
}

/* 로봇 미끼. display:none 은 일부 로봇이 알아채므로 화면 밖으로 밀어낸다 */
.field-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-fallback {
    margin: 1.5rem 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

/* 이름과 수를 알약 모양으로. 값이 모두 같은 모양일 때 표보다 눈이 덜 지친다 */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    list-style: none;
    padding: 0;
    margin: 2.25rem 0 0;
}

.chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    font-size: 0.85rem;
    line-height: 1.4;
}

.chip-name {
    color: var(--foreground);
}

.chip-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--muted-foreground);
}

.section-dark .chip {
    border-color: hsl(215 25% 26%);
    background: transparent;
}

/* 조각 여럿을 한 줄에. 저마다 다른 위쪽 여백을 눌러야 세로 가운데가 맞는다.
   조각들의 규칙보다 뒤에 두어야 초기화가 밀리지 않는다. */
.row-blocks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
    margin-top: 2.25rem;
}

.row-blocks > * {
    margin-top: 0;
}

/* 맺음말의 작은 뱃지 */
.footer .badge-link img {
    height: 2.25rem;
}

/* =============================================================================
   용어와 설명 — 짧은 이름 왼쪽, 풀이 오른쪽
   ========================================================================== */

.defs {
    margin: 2.25rem 0 0;
    display: grid;
    gap: 0;
}

.defs dt {
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.defs dd {
    margin: 0.3rem 0 1.1rem;
    color: var(--muted-foreground);
    max-width: 46rem;
}

.section-dark .defs dt {
    border-top-color: hsl(215 25% 22%);
}

.section-dark .defs dd {
    color: hsl(215 25% 72%);
}

@media (min-width: 48rem) {
    .defs {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        column-gap: var(--gap);
    }
    .defs dt {
        grid-column: 1;
    }
    .defs dd {
        grid-column: 2;
        padding-top: 1.1rem;
        border-top: 1px solid var(--border);
        margin-bottom: 0;
    }
    .section-dark .defs dd {
        border-top-color: hsl(215 25% 22%);
    }
}

/* =============================================================================
   차례 있는 절차
   ========================================================================== */

.steps {
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: 1.5rem;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 3rem;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.steps li p {
    margin: 0;
    color: var(--muted-foreground);
    max-width: 46rem;
}

/* =============================================================================
   수치 표
   =============================================================================
   좁은 화면에서 표를 접으면 열이 어긋나 읽을 수 없게 된다. 표는 제 상자 안에서
   가로로 밀리게 두고, 페이지 자체는 밀리지 않게 한다.
   ========================================================================== */

.table-wrap {
    margin-top: 2.25rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    white-space: nowrap;
}

.matrix th,
.matrix td {
    padding: 0.72rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.matrix th {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    background: var(--background);
}

.matrix tbody tr:last-child td {
    border-bottom: 0;
}

.matrix .num {
    text-align: right;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.section-muted .table-wrap {
    background: var(--background);
}

/* =============================================================================
   제품 화면 캡처
   =============================================================================
   실제 실행 화면이라 글자가 작다. 원본 해상도를 유지하고, 눌러서 원본을 열 수
   있게 둔다.
   ========================================================================== */

/* =============================================================================
   실행 화면이 스스로 확대된다
   =============================================================================
   실제 화면을 통째로 실으면 글자가 작아 읽히지 않는다. 그렇다고 확대한 조각만
   실으면 그것이 어디에서 온 화면인지 알 수 없다. 그래서 한 장을 그대로 두고,
   전체를 보인 뒤 볼 자리로 당겨 들어간다.

   좌표는 눈대중이 아니라 브라우저에서 잰 실제 값이다. 원본 1700x1365 CSS px 안에서
   Why Path 패널은 (320, 1093) 에서 1320x229 크기로 놓여 있다.
   ========================================================================== */

.zoomshot {
    margin: 2.25rem 0 0;
}

.zoomshot-frame {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: hsl(0 0% 100%);
    aspect-ratio: var(--shot-w) / var(--shot-h);
    animation: zoomshot-frame 9s ease-in-out infinite;
}

.zoomshot-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform-origin: 0 0;
    animation: zoomshot-move 9s ease-in-out infinite;
}

@keyframes zoomshot-frame {
    0%, 12%   { aspect-ratio: var(--shot-w) / var(--shot-h); }
    34%, 70%  { aspect-ratio: var(--focus-w) / var(--focus-h); }
    92%, 100% { aspect-ratio: var(--shot-w) / var(--shot-h); }
}

@keyframes zoomshot-move {
    0%, 12%   { transform: scale(1) translate(0, 0); }
    34%, 70%  { transform: scale(calc(var(--shot-w) / var(--focus-w)))
                           translate(calc(var(--focus-x) / var(--shot-w) * -100%),
                                     calc(var(--focus-y) / var(--shot-h) * -100%)); }
    92%, 100% { transform: scale(1) translate(0, 0); }
}

/* Why Path 패널의 자리 */
.focus-whypath {
    --shot-w: 1700;
    --shot-h: 1365;
    --focus-x: 320;
    --focus-y: 1093;
    --focus-w: 1320;
    --focus-h: 229;
}

/* 움직이지 않고 초점 자리에 그대로 멈춰 있는 변종 */
.zoomshot-still .zoomshot-frame,
.zoomshot-still .zoomshot-frame img {
    animation: none;
}

.zoomshot-still .zoomshot-frame {
    aspect-ratio: var(--focus-w) / var(--focus-h);
}

.zoomshot-still .zoomshot-frame img {
    transform: scale(calc(var(--shot-w) / var(--focus-w)))
               translate(calc(var(--focus-x) / var(--shot-w) * -100%),
                         calc(var(--focus-y) / var(--shot-h) * -100%));
}

/* 움직임을 줄여 달라고 한 이용자에게는 읽을 수 있는 쪽으로 멈춰 세운다 */
@media (prefers-reduced-motion: reduce) {
    .zoomshot-frame,
    .zoomshot-frame img {
        animation: none;
    }
    .zoomshot-frame {
        aspect-ratio: var(--focus-w) / var(--focus-h);
    }
    .zoomshot-frame img {
        transform: scale(calc(var(--shot-w) / var(--focus-w)))
                   translate(calc(var(--focus-x) / var(--shot-w) * -100%),
                             calc(var(--focus-y) / var(--shot-h) * -100%));
    }
}

.section-dark .zoomshot-frame {
    border-color: hsl(215 25% 26%);
}

/* =============================================================================
   글자 안에서 영상이 돈다
   =============================================================================
   영상을 띠처럼 통째로 깔면 화면을 잡아먹으면서 정작 나르는 뜻은 없다. 큰 글자를
   판으로 삼아 그 안에서만 영상이 보이게 하면, 영상은 배경으로 물러나고 글이 앞에
   선다.

   원리: 영상 위에 흰 판을 덮고 글자만 검게 남긴 다음 screen 으로 섞는다.
   screen 은 흰색과 섞으면 흰색이 되고 검은색과 섞으면 아래 색이 그대로 나온다.
   그래서 흰 판은 영상을 가리고 검은 글자 자리만 뚫린다. 판이 흰색이라 종이 위에
   글자만 떠 있고 띠가 생기지 않는다. background-clip: text 로는 배경 그림 자리에
   영상을 넣을 수 없어 이 방법을 쓴다.

   글자 안에 비치는 것이 곧 영상 그 자체이므로, 흰 바탕에서 획이 서려면 영상이
   어두워야 한다. 그래서 어둡게 눌러 둔 판본을 쓴다.

   흰 판이 영상을 덮는 원리이므로 흰 바탕 구획에만 놓는다. 회색 구획에 놓으면
   글자 둘레가 흰 사각형으로 도드라진다.

   영상이 못 뜨면 글자가 흰색이 되어 사라진다. 그래서 뒤를 세 겹으로 받쳐 둔다.
     1. 영상이 돌면 영상이 비친다
     2. 영상이 멈춰 있으면 video 의 poster 정지 화면이 비친다
     3. video 요소가 아예 없거나 못 그리면 CSS 배경으로 깔아 둔 같은 정지 화면이 비친다
   셋 다 실패해야 글자가 사라지는데, 그러면 어차피 이미지도 못 뜨는 환경이다.
   섞기를 못 받는 브라우저에서는 아예 섞지 않고 검은 글자로 남는다.
   ========================================================================== */

.videotype {
    position: relative;
    isolation: isolate;
    margin: 4rem 0 0.5rem;
    overflow: hidden;
    background-color: hsl(215 25% 30%);
    background-position: center;
    background-size: cover;
    /* 영상이 한 장 바뀔 때마다 섞기를 다시 계산해야 한다. 그 다시 그리는 범위가
     * 이 상자를 넘어가면 아래 구획까지 매 프레임 다시 그려져 화면이 떨린다.
     * paint 로 가두어 상자 밖으로 번지지 못하게 하고, 자체 합성 층으로 올려
     * 주변 내용과 아예 따로 그려지게 한다. */
    contain: paint;
    transform: translateZ(0);
}

.videotype-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 영상도 제 층에 두어야 섞기를 계산할 때 아래 내용을 끌어들이지 않는다 */
    transform: translateZ(0);
    object-fit: cover;
}

.videotype-text {
    position: relative;
    margin: 0;
    padding: 0.1em 0 0.14em;
    font-size: clamp(2.6rem, 0.8rem + 9.4vw, 8rem);
    /* Pretendard Variable 이 담고 있는 가장 굵은 획. 굵을수록 뚫리는 면이 넓어
     * 영상이 무엇인지 알아볼 수 있다. */
    font-weight: 920;
    line-height: 0.96;
    letter-spacing: -0.05em;
    /* 한글은 기본값이면 낱말 한가운데서도 줄이 바뀐다. 어절 단위로 끊는다. */
    word-break: keep-all;
    text-wrap: balance;
}

@supports (mix-blend-mode: screen) {
    .videotype-text {
        background: hsl(0 0% 100%);
        color: hsl(0 0% 0%);
        mix-blend-mode: screen;
    }
}

/* 영상이 못 뜰 때 같은 자리에 남을 정지 화면 */
/* image-set 을 받는 브라우저는 WebP 를, 못 받는 브라우저는 뒤의 jpg 를 쓴다. */
.video-problem    { background-image: url("../img/type-problem.jpg");
                    background-image: image-set(url("../img/type-problem.webp") type("image/webp"),
                                                url("../img/type-problem.jpg") type("image/jpeg")); }
.video-product    { background-image: url("../img/type-product.jpg");
                    background-image: image-set(url("../img/type-product.webp") type("image/webp"),
                                                url("../img/type-product.jpg") type("image/jpeg")); }
.video-technology { background-image: url("../img/type-technology.jpg");
                    background-image: image-set(url("../img/type-technology.webp") type("image/webp"),
                                                url("../img/type-technology.jpg") type("image/jpeg")); }
.video-integrate  { background-image: url("../img/type-integrate.jpg");
                    background-image: image-set(url("../img/type-integrate.webp") type("image/webp"),
                                                url("../img/type-integrate.jpg") type("image/jpeg")); }
.video-company    { background-image: url("../img/type-company.jpg");
                    background-image: image-set(url("../img/type-company.webp") type("image/webp"),
                                                url("../img/type-company.jpg") type("image/jpeg")); }

/* 움직임을 줄여 달라고 한 이용자에게는 영상을 세우고 정지 화면만 남긴다 */
@media (prefers-reduced-motion: reduce) {
    .videotype-media {
        display: none;
    }
}

.shot {
    margin: 2.25rem 0 0;
}

.shot-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: hsl(0 0% 100%);
}

.section-dark .shot-img {
    border-color: hsl(215 25% 26%);
}

/* 그림 두 장 나란히. 좁아지면 저절로 위아래로 쌓인다. */
.shotpair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: var(--gap);
    align-items: start;
}

.shotpair .shot {
    margin-top: 2.25rem;
}

.shot-caption {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--muted-foreground);
}

.section-dark .shot-caption {
    color: hsl(215 25% 66%);
}

.shot-caption code {
    font-family: var(--mono);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}