@charset "utf-8";
/* ============================================================================
 * ERUMENB /book/md/Summa-Junior-Korean/css/supersecretcode-20260411_090500_r003.css
 * ----------------------------------------------------------------------------
 * Version : SSC26_PAGE_CSS-2026-04-11-r003
 * Updated : 2026-04-11 09:05 KST
 * Purpose : 숨마주니어 중학 국어 Super Secret Code 페이지 전용 CSS
 * ----------------------------------------------------------------------------
 * [r001]
 * - Blue Signal 팔레트 기반 Hero / 본문 / quick-nav 전체 스타일 작성
 * - why / middle / define / code / method / change / preview 섹션 통합
 * - 반응형 기준 1280+, 992~1279, 768~991, 413~767, 412 이하 반영
 *
 * [r002]
 * - quick-nav 시각 보정 및 모바일 가로 스크롤 마감
 * - section top 46 / first block 22 / desc max-width 760 / line-height 1.68 적용
 * - 버튼 길이 / 줄바꿈 / 섹션 간 톤 차이 미세 조정
 *
 * [r003]
 * - Hero 구조를 [head] + [copy / visual-stage] + [chip-list 중앙] + [actions 중앙]로 재구성
 * - ssc26-hero__eyebrow / ssc26-hero__kicker / ssc26-hero__title 를 상단 head 영역으로 분리 대응
 * - Quick Nav 를 hero 바로 아래에 배치하는 마크업 구조에 맞춰 간격/연결 보정
 * - 기존 섹션/카드/브리지/프리뷰 스타일 톤은 최대한 유지하여 CSS spoil 최소화
 * ============================================================================
 */

html {
    scroll-behavior: smooth;
}

#ssc26-why,
#ssc26-middle,
#ssc26-define,
#ssc26-code,
#ssc26-method,
#ssc26-change,
#ssc26-preview {
    scroll-margin-top: 140px;
}

#superSecretCodePage.ssc26-page {
    position: relative;
    margin: 0;
    padding: 0;
    color: #0f172a;
}

#superSecretCodePage .ssc26-section {
    position: relative;
    overflow: hidden;
    margin-top: 24px;
    padding: 46px 32px 44px;
    border: 1px solid #e6ebf7;
    border-radius: 24px;
    background: #ffffff;
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-quick-nav + .ssc26-bridge,
#superSecretCodePage .ssc26-quick-nav + .ssc26-section {
    margin-top: 20px;
}

#superSecretCodePage .ssc26-section::before {
    content: "";
    position: absolute;
    left: -8%;
    top: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 201, 240, 0.08) 0%, rgba(76, 201, 240, 0.02) 44%, transparent 70%);
    pointer-events: none;
}

#superSecretCodePage .ssc26-section::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.02) 42%, transparent 70%);
    pointer-events: none;
}

#superSecretCodePage .ssc26-section-head {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

#superSecretCodePage .ssc26-section-head__eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-section-head__title {
    max-width: 860px;
    margin: 0 auto;
    color: #0f172a;
    font-size: 38px;
    line-height: 1.28;
    font-weight: 900;
    letter-spacing: -0.024em;
    text-wrap: balance;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-section-head__desc {
    max-width: 760px;
    margin: 12px auto 0;
    color: #4f6077;
    font-size: 16px;
    line-height: 1.68;
    font-weight: 500;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-section-head + .ssc26-why-intro,
#superSecretCodePage .ssc26-section-head + .ssc26-middle-intro,
#superSecretCodePage .ssc26-section-head + .ssc26-define-box,
#superSecretCodePage .ssc26-section-head + .ssc26-code-grid,
#superSecretCodePage .ssc26-section-head + .ssc26-method-intro,
#superSecretCodePage .ssc26-section-head + .ssc26-change-compare,
#superSecretCodePage .ssc26-section-head + .ssc26-preview-entry {
    margin-top: 22px;
}

/* ==========================================================================
 * HERO
 * ========================================================================== */
#superSecretCodePage .ssc26-hero {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 3px;
    background:
        radial-gradient(circle at 18% 18%, rgba(76, 201, 240, 0.20), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(96, 165, 250, 0.16), transparent 28%),
        radial-gradient(circle at 82% 82%, rgba(76, 201, 240, 0.14), transparent 30%),
        linear-gradient(135deg, #0a1030 0%, #0f1a4a 36%, #13205a 72%, #0b1339 100%);
    box-shadow:
        0 26px 60px rgba(7, 15, 52, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#superSecretCodePage .ssc26-hero__bg,
#superSecretCodePage .ssc26-hero__bg-gradient,
#superSecretCodePage .ssc26-hero__bg-wave,
#superSecretCodePage .ssc26-hero__bg-dots,
#superSecretCodePage .ssc26-hero__bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#superSecretCodePage .ssc26-hero__bg-gradient {
    background:
        radial-gradient(circle at 30% 10%, rgba(147, 197, 253, 0.16), transparent 24%),
        radial-gradient(circle at 75% 35%, rgba(76, 201, 240, 0.18), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(96, 165, 250, 0.14), transparent 30%);
    filter: blur(10px);
}

#superSecretCodePage .ssc26-hero__bg-wave::before,
#superSecretCodePage .ssc26-hero__bg-wave::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(76, 201, 240, 0.12) 0%, rgba(76, 201, 240, 0.04) 42%, transparent 72%);
    filter: blur(8px);
}

#superSecretCodePage .ssc26-hero__bg-wave::before {
    top: 22px;
    transform: rotate(-8deg) scale(1.1);
}

#superSecretCodePage .ssc26-hero__bg-wave::after {
    bottom: -26px;
    transform: rotate(7deg) scale(1.25);
}

#superSecretCodePage .ssc26-hero__bg-grid {
    opacity: .26;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.55) 60%, rgba(0,0,0,.12));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.55) 60%, rgba(0,0,0,.12));
}

#superSecretCodePage .ssc26-hero__bg-dots::before,
#superSecretCodePage .ssc26-hero__bg-dots::after {
    content: "";
    position: absolute;
    left: -4%;
    width: 108%;
    height: 42%;
    background-image: radial-gradient(circle, rgba(76, 201, 240, .78) 1.5px, transparent 2px);
    background-size: 16px 16px;
    opacity: .34;
    filter: blur(.15px);
}

#superSecretCodePage .ssc26-hero__bg-dots::before {
    top: -2%;
    transform: perspective(980px) rotateX(72deg) scale(1.7);
    transform-origin: center top;
}

#superSecretCodePage .ssc26-hero__bg-dots::after {
    bottom: -6%;
    transform: perspective(980px) rotateX(-72deg) scale(1.7);
    transform-origin: center bottom;
}

#superSecretCodePage .ssc26-hero__inner {
    position: relative;
    z-index: 2;
    padding: 64px 56px 58px;
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-hero__head {
    max-width: 980px;
    margin: 0 auto 34px;
    text-align: center;
}

#superSecretCodePage .ssc26-hero__copy {
    min-width: 0;
}

#superSecretCodePage .ssc26-hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
    align-items: center;
    gap: 40px;
}

#superSecretCodePage .ssc26-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(24, 39, 95, 0.72);
    border: 1px solid rgba(147, 197, 253, 0.24);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

#superSecretCodePage .ssc26-hero__kicker {
    margin: 0 0 16px;
    color: #d5def5;
    font-size: 18px;
    line-height: 1.58;
    font-weight: 700;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-hero__title {
    margin: 0;
    color: #f8fafc;
    font-size: 66px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-wrap: balance;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-hero__title-line {
    display: block;
}

#superSecretCodePage .ssc26-hero__title-line--accent {
    margin-top: 4px;
    color: #4cc9f0;
    text-shadow:
        0 0 18px rgba(76, 201, 240, 0.20),
        0 0 38px rgba(76, 201, 240, 0.10);
}

#superSecretCodePage .ssc26-hero__desc {
    max-width: 640px;
    margin: 0;
    color: #f8fafc;
    font-size: 21px;
    line-height: 1.72;
    font-weight: 700;
    letter-spacing: -0.015em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-hero__subdesc {
    max-width: 640px;
    margin: 18px 0 0;
    color: #d5def5;
    font-size: 17px;
    line-height: 1.78;
    font-weight: 500;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-hero__chip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

#superSecretCodePage .ssc26-hero__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(17, 25, 61, 0.64);
    border: 1px solid rgba(96, 165, 250, 0.32);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 8px 18px rgba(8, 14, 48, 0.22);
}

#superSecretCodePage .ssc26-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

#superSecretCodePage .ssc26-hero__btn,
#superSecretCodePage .ssc26-preview-entry__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

#superSecretCodePage .ssc26-hero__btn:hover,
#superSecretCodePage .ssc26-preview-entry__btn:hover {
    transform: translateY(-2px);
}

#superSecretCodePage .ssc26-hero__btn {
    min-width: 206px;
    min-height: 54px;
    padding: 0 20px;
}

#superSecretCodePage .ssc26-hero__btn--primary,
#superSecretCodePage .ssc26-preview-entry__btn--primary {
    background: linear-gradient(135deg, #4cc9f0 0%, #60a5fa 100%);
    color: #081122;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
    box-shadow:
        0 16px 28px rgba(76, 201, 240, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.28);
}

#superSecretCodePage .ssc26-hero__btn--line,
#superSecretCodePage .ssc26-preview-entry__btn--line {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(147, 197, 253, 0.28);
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
}

#superSecretCodePage .ssc26-hero__btn--primary:hover,
#superSecretCodePage .ssc26-preview-entry__btn--primary:hover {
    box-shadow:
        0 22px 34px rgba(76, 201, 240, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

#superSecretCodePage .ssc26-hero__btn--line:hover,
#superSecretCodePage .ssc26-preview-entry__btn--line:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(147, 197, 253, 0.42);
}

#superSecretCodePage .ssc26-hero__visual {
    position: relative;
    min-width: 0;
}

#superSecretCodePage .ssc26-hero__visual-stage {
    position: relative;
    width: 100%;
    min-height: 520px;
}

#superSecretCodePage .ssc26-hero__visual-glow {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 201, 240, 0.30) 0%, rgba(96, 165, 250, 0.14) 38%, rgba(96, 165, 250, 0.02) 68%, transparent 78%);
    transform: translate(-50%, -50%);
    filter: blur(10px);
    animation: ssc26GlowPulse 4.2s ease-in-out infinite;
}

#superSecretCodePage .ssc26-hero__book {
    position: absolute;
    right: 34px;
    bottom: 18px;
    z-index: 3;
    width: 250px;
    margin: 0;
    transform: rotate(-4deg);
    transform-origin: center center;
    filter: drop-shadow(0 24px 34px rgba(3, 9, 31, 0.55));
    animation: ssc26BookFloat 4.6s ease-in-out infinite;
}

#superSecretCodePage .ssc26-hero__book img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

#superSecretCodePage .ssc26-hero__code-card {
    position: absolute;
    z-index: 2;
    width: 230px;
    padding: 16px 16px 15px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(24, 39, 95, 0.78) 0%, rgba(14, 25, 66, 0.82) 100%);
    border: 1px solid rgba(96, 165, 250, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 18px 38px rgba(4, 12, 38, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

#superSecretCodePage .ssc26-hero__code-card--1 {
    left: 10px;
    top: 40px;
    animation: ssc26CardFloat 4s ease-in-out infinite;
}

#superSecretCodePage .ssc26-hero__code-card--2 {
    left: 66px;
    top: 192px;
    animation: ssc26CardFloat 4s ease-in-out infinite .55s;
}

#superSecretCodePage .ssc26-hero__code-card--3 {
    right: 10px;
    top: 86px;
    animation: ssc26CardFloat 4s ease-in-out infinite 1.1s;
}

#superSecretCodePage .ssc26-hero__code-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 24px;
    margin-bottom: 10px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(76, 201, 240, 0.14);
    color: #4cc9f0;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-hero__code-title {
    display: block;
    margin: 0;
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#superSecretCodePage .ssc26-hero__code-text {
    margin: 8px 0 0;
    color: #d5def5;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}

#superSecretCodePage .ssc26-hero__microcopy {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    opacity: .56;
    color: #93c5fd;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ==========================================================================
 * BRIDGE
 * ========================================================================== */
#superSecretCodePage .ssc26-bridge {
    position: relative;
    margin-top: 20px;
    border: 1px solid rgba(46, 77, 167, 0.12);
    border-radius: 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    overflow: hidden;
}

#superSecretCodePage .ssc26-bridge::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(76, 201, 240, 0.12), transparent 22%),
        radial-gradient(circle at 85% 78%, rgba(96, 165, 250, 0.12), transparent 24%);
    pointer-events: none;
}

#superSecretCodePage .ssc26-bridge__inner {
    position: relative;
    z-index: 2;
    padding: 34px 30px 30px;
}

#superSecretCodePage .ssc26-bridge__head {
    text-align: center;
}

#superSecretCodePage .ssc26-bridge__eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-bridge__title {
    margin: 0;
    color: #0f172a;
    font-size: 34px;
    line-height: 1.38;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-wrap: balance;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-bridge__title span {
    display: block;
    color: #1d4ed8;
}

#superSecretCodePage .ssc26-bridge__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

#superSecretCodePage .ssc26-bridge__card {
    padding: 22px 20px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    border: 1px solid #dce7fb;
    box-shadow: 0 12px 24px rgba(17, 38, 89, 0.06);
}

#superSecretCodePage .ssc26-bridge__card-title {
    display: block;
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -0.02em;
}

#superSecretCodePage .ssc26-bridge__card-desc {
    margin: 10px 0 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

/* ==========================================================================
 * QUICK NAV
 * ========================================================================== */
#superSecretCodePage .ssc26-quick-nav {
    position: sticky;
    top: 86px;
    z-index: 15;
    margin-top: 18px;
    padding-top: 2px;
}

#superSecretCodePage .ssc26-quick-nav__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(219, 231, 251, 0.92);
    border-radius: 20px;
    background: rgba(255,255,255,0.88);
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#superSecretCodePage .ssc26-quick-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(248, 251, 255, 0.88);
    border: 1px solid #e4ebf8;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

#superSecretCodePage .ssc26-quick-nav__link:hover {
    transform: translateY(-1px);
    background: #f1f7ff;
    border-color: #cfe0fb;
    color: #0f172a;
    box-shadow: 0 6px 12px rgba(17, 38, 89, 0.06);
}

#superSecretCodePage .ssc26-quick-nav__link.is-active,
#superSecretCodePage .ssc26-quick-nav__link[aria-current="true"] {
    background: linear-gradient(135deg, #4cc9f0 0%, #60a5fa 100%);
    border-color: rgba(96, 165, 250, 0.62);
    color: #081122;
    box-shadow:
        0 10px 18px rgba(76, 201, 240, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.32);
}

/* ==========================================================================
 * SECTION TONES
 * ========================================================================== */
#superSecretCodePage .ssc26-section--why,
#superSecretCodePage .ssc26-section--middle {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    border-color: #e5ecf9;
}

#superSecretCodePage .ssc26-section--define,
#superSecretCodePage .ssc26-section--preview {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border-color: #dde8fb;
}

#superSecretCodePage .ssc26-section--code,
#superSecretCodePage .ssc26-section--method {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-color: #dfe9fb;
}

#superSecretCodePage .ssc26-section--change {
    background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
    border-color: #dde8fb;
}

/* ==========================================================================
 * WHY / MIDDLE
 * ========================================================================== */
#superSecretCodePage .ssc26-why-intro,
#superSecretCodePage .ssc26-middle-intro {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 30px;
    border: 1px solid #dfe9fb;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,250,255,0.98) 100%);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-why-intro__lead,
#superSecretCodePage .ssc26-middle-intro__lead {
    max-width: 820px;
    margin: 0 auto;
    color: #0f172a;
    font-size: 26px;
    line-height: 1.48;
    font-weight: 800;
    letter-spacing: -0.022em;
    text-align: center;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-why-intro__lead strong,
#superSecretCodePage .ssc26-middle-intro__lead strong {
    color: #1d4ed8;
}

#superSecretCodePage .ssc26-why-intro__desc,
#superSecretCodePage .ssc26-middle-intro__desc {
    max-width: 760px;
    margin: 12px auto 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-why-grid,
#superSecretCodePage .ssc26-middle-grid,
#superSecretCodePage .ssc26-define-points,
#superSecretCodePage .ssc26-code-grid,
#superSecretCodePage .ssc26-method-grid,
#superSecretCodePage .ssc26-preview-subgrid {
    max-width: 1120px;
    margin: 22px auto 0;
}

#superSecretCodePage .ssc26-why-grid,
#superSecretCodePage .ssc26-middle-grid,
#superSecretCodePage .ssc26-define-points,
#superSecretCodePage .ssc26-code-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

#superSecretCodePage .ssc26-why-card,
#superSecretCodePage .ssc26-middle-card,
#superSecretCodePage .ssc26-define-point,
#superSecretCodePage .ssc26-code-card,
#superSecretCodePage .ssc26-method-card,
#superSecretCodePage .ssc26-preview-subcard {
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-why-card,
#superSecretCodePage .ssc26-middle-card {
    position: relative;
    padding: 26px 22px 22px;
    border: 1px solid #dce7fb;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow:
        0 16px 28px rgba(17, 38, 89, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.80);
}

#superSecretCodePage .ssc26-why-card::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 18px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(76, 201, 240, 0.14) 0%, rgba(96, 165, 250, 0.16) 100%);
}

#superSecretCodePage .ssc26-why-card__num {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 0 18px;
    border-radius: 14px;
    color: #1d4ed8;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

#superSecretCodePage .ssc26-middle-card__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 32px;
    margin-bottom: 16px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(76, 201, 240, 0.12);
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .10em;
}

#superSecretCodePage .ssc26-why-card__title,
#superSecretCodePage .ssc26-middle-card__title {
    margin: 0;
    color: #0f172a;
    font-size: 23px;
    line-height: 1.38;
    font-weight: 900;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-why-card__desc,
#superSecretCodePage .ssc26-middle-card__desc,
#superSecretCodePage .ssc26-define-point__desc,
#superSecretCodePage .ssc26-code-card__desc,
#superSecretCodePage .ssc26-method-card__desc,
#superSecretCodePage .ssc26-preview-subcard__desc {
    margin: 12px 0 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 500;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-why-card__point {
    margin: 16px 0 0;
    padding: 14px 14px 13px;
    border-radius: 16px;
    background: rgba(238, 244, 255, 0.92);
    color: #1e3a8a;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 700;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-why-summary,
#superSecretCodePage .ssc26-change-result {
    max-width: 980px;
    margin: 20px auto 0;
    padding: 22px 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f1a4a 0%, #13205a 100%);
    box-shadow: 0 22px 40px rgba(10, 16, 48, 0.18);
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-middle-summary,
#superSecretCodePage .ssc26-method-summary,
#superSecretCodePage .ssc26-code-flow {
    max-width: 1120px;
    margin: 20px auto 0;
    padding: 20px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
    border: 1px solid #dbe7fb;
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-why-summary__text,
#superSecretCodePage .ssc26-change-result__text,
#superSecretCodePage .ssc26-middle-summary__text,
#superSecretCodePage .ssc26-method-summary__text,
#superSecretCodePage .ssc26-code-flow__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.72;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.012em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-why-summary__text,
#superSecretCodePage .ssc26-change-result__text {
    color: #f8fafc;
}

#superSecretCodePage .ssc26-middle-summary__text,
#superSecretCodePage .ssc26-method-summary__text,
#superSecretCodePage .ssc26-code-flow__text {
    color: #0f172a;
}

#superSecretCodePage .ssc26-why-summary__text strong,
#superSecretCodePage .ssc26-change-result__text strong {
    color: #4cc9f0;
}

#superSecretCodePage .ssc26-middle-summary__text strong,
#superSecretCodePage .ssc26-method-summary__text strong,
#superSecretCodePage .ssc26-code-flow__text strong,
#superSecretCodePage .ssc26-define-point__desc strong {
    color: #1d4ed8;
}

/* ==========================================================================
 * DEFINE
 * ========================================================================== */
#superSecretCodePage .ssc26-define-box {
    position: relative;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 34px 34px 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 18%, rgba(76, 201, 240, 0.14), transparent 26%),
        radial-gradient(circle at 82% 22%, rgba(96, 165, 250, 0.14), transparent 24%),
        linear-gradient(135deg, #09102b 0%, #13205a 100%);
    box-shadow:
        0 28px 50px rgba(10, 16, 48, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-define-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .20;
    pointer-events: none;
}

#superSecretCodePage .ssc26-define-box__body,
#superSecretCodePage .ssc26-define-box__label {
    position: relative;
    z-index: 2;
}

#superSecretCodePage .ssc26-define-box__label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(76, 201, 240, 0.14);
    border: 1px solid rgba(147, 197, 253, 0.24);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-define-box__title {
    max-width: 820px;
    margin: 18px auto 0;
    color: #f8fafc;
    font-size: 36px;
    line-height: 1.34;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-align: center;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-define-box__title strong {
    color: #4cc9f0;
}

#superSecretCodePage .ssc26-define-box__desc {
    max-width: 760px;
    margin: 14px auto 0;
    color: #d5def5;
    font-size: 16px;
    line-height: 1.74;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-define-point {
    padding: 24px 22px 22px;
    border: 1px solid #dce7fb;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(17, 38, 89, 0.05);
}

#superSecretCodePage .ssc26-define-point__title {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.42;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* ==========================================================================
 * CODE / METHOD
 * ========================================================================== */
#superSecretCodePage .ssc26-code-card,
#superSecretCodePage .ssc26-method-card {
    position: relative;
    overflow: hidden;
    padding: 28px 24px 24px;
    border: 1px solid #dce7fb;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,250,255,0.98) 100%);
    box-shadow:
        0 18px 30px rgba(17, 38, 89, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.92);
}

#superSecretCodePage .ssc26-code-card::before,
#superSecretCodePage .ssc26-method-card::before {
    content: "";
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 201, 240, 0.14) 0%, rgba(96, 165, 250, 0.06) 48%, transparent 72%);
    pointer-events: none;
}

#superSecretCodePage .ssc26-code-card::before {
    left: -24px;
    top: -24px;
}

#superSecretCodePage .ssc26-method-card::before {
    right: -16px;
    top: -18px;
}

#superSecretCodePage .ssc26-code-card__label,
#superSecretCodePage .ssc26-method-card__label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(76, 201, 240, 0.14);
    color: #1e40af;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-code-card__title,
#superSecretCodePage .ssc26-method-card__title {
    position: relative;
    z-index: 2;
    margin: 18px 0 0;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.38;
    font-weight: 900;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-code-card__desc,
#superSecretCodePage .ssc26-method-card__desc {
    position: relative;
    z-index: 2;
}

#superSecretCodePage .ssc26-code-list,
#superSecretCodePage .ssc26-method-list {
    position: relative;
    z-index: 2;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

#superSecretCodePage .ssc26-code-list li,
#superSecretCodePage .ssc26-method-list li {
    position: relative;
    margin-top: 10px;
    padding-left: 16px;
    color: #334155;
    font-size: 14px;
    line-height: 1.72;
    font-weight: 600;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-code-list li:first-child,
#superSecretCodePage .ssc26-method-list li:first-child {
    margin-top: 0;
}

#superSecretCodePage .ssc26-code-list li::before,
#superSecretCodePage .ssc26-method-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4cc9f0 0%, #60a5fa 100%);
}

#superSecretCodePage .ssc26-method-intro {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f1a4a 0%, #13205a 100%);
    box-shadow: 0 22px 40px rgba(10, 16, 48, 0.18);
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-method-intro__lead {
    margin: 0;
    color: #f8fafc;
    font-size: 22px;
    line-height: 1.75;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-method-intro__lead strong {
    color: #4cc9f0;
}

#superSecretCodePage .ssc26-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* ==========================================================================
 * CHANGE
 * ========================================================================== */
#superSecretCodePage .ssc26-change-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#superSecretCodePage .ssc26-change-col {
    padding: 28px 24px 24px;
    border-radius: 24px;
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-change-col--before {
    border: 1px solid #e8d7d7;
    background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.04);
}

#superSecretCodePage .ssc26-change-col--after {
    border: 1px solid #dbe7fb;
    background: linear-gradient(180deg, #f5fbff 0%, #ffffff 100%);
    box-shadow:
        0 20px 34px rgba(17, 38, 89, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

#superSecretCodePage .ssc26-change-col__head {
    margin-bottom: 18px;
}

#superSecretCodePage .ssc26-change-col__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-change-col--before .ssc26-change-col__label {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

#superSecretCodePage .ssc26-change-col--after .ssc26-change-col__label {
    background: rgba(76, 201, 240, 0.12);
    color: #1d4ed8;
}

#superSecretCodePage .ssc26-change-col__title {
    margin: 14px 0 0;
    font-size: 28px;
    line-height: 1.38;
    font-weight: 900;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-change-col--before .ssc26-change-col__title {
    color: #7f1d1d;
}

#superSecretCodePage .ssc26-change-col--after .ssc26-change-col__title {
    color: #0f172a;
}

#superSecretCodePage .ssc26-change-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#superSecretCodePage .ssc26-change-list li {
    position: relative;
    margin-top: 12px;
    padding: 14px 14px 13px 18px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.74;
    font-weight: 600;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-change-list li:first-child {
    margin-top: 0;
}

#superSecretCodePage .ssc26-change-col--before .ssc26-change-list li {
    background: rgba(255,255,255,0.92);
    color: #5b2b2b;
    border: 1px solid #f3d9d9;
}

#superSecretCodePage .ssc26-change-col--after .ssc26-change-list li {
    background: rgba(255,255,255,0.96);
    color: #334155;
    border: 1px solid #dce7fb;
}

#superSecretCodePage .ssc26-change-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

#superSecretCodePage .ssc26-change-arrow span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4cc9f0 0%, #60a5fa 100%);
    color: #081122;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(76, 201, 240, 0.22);
}

/* ==========================================================================
 * PREVIEW
 * ========================================================================== */
#superSecretCodePage .ssc26-preview-entry {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: 28px;
    align-items: center;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding: 34px 34px 32px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 18%, rgba(76, 201, 240, 0.14), transparent 26%),
        radial-gradient(circle at 82% 22%, rgba(96, 165, 250, 0.14), transparent 24%),
        linear-gradient(135deg, #09102b 0%, #13205a 100%);
    box-shadow:
        0 28px 50px rgba(10, 16, 48, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    box-sizing: border-box;
}

#superSecretCodePage .ssc26-preview-entry::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: .18;
    pointer-events: none;
}

#superSecretCodePage .ssc26-preview-entry__copy,
#superSecretCodePage .ssc26-preview-entry__visual {
    position: relative;
    z-index: 2;
}

#superSecretCodePage .ssc26-preview-entry__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(76, 201, 240, 0.14);
    border: 1px solid rgba(147, 197, 253, 0.24);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-preview-entry__title {
    margin: 18px 0 0;
    color: #f8fafc;
    font-size: 34px;
    line-height: 1.42;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-wrap: balance;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-preview-entry__desc {
    max-width: 760px;
    margin: 16px 0 0;
    color: #d5def5;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 500;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-preview-entry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

#superSecretCodePage .ssc26-preview-entry__btn {
    min-width: 270px;
    min-height: 52px;
    padding: 0 18px;
}

#superSecretCodePage .ssc26-preview-entry__visual {
    min-width: 0;
    min-height: 320px;
}

#superSecretCodePage .ssc26-preview-entry__book {
    position: absolute;
    right: 30px;
    bottom: 0;
    z-index: 2;
    width: 205px;
    margin: 0;
    filter: drop-shadow(0 22px 32px rgba(3, 9, 31, 0.52));
}

#superSecretCodePage .ssc26-preview-entry__book img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

#superSecretCodePage .ssc26-preview-entry__badge {
    position: absolute;
    z-index: 3;
    min-width: 180px;
    padding: 14px 16px 13px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(24, 39, 95, 0.78) 0%, rgba(14, 25, 66, 0.82) 100%);
    border: 1px solid rgba(96, 165, 250, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 18px 34px rgba(4, 12, 38, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

#superSecretCodePage .ssc26-preview-entry__badge span {
    display: block;
    margin-bottom: 8px;
    color: #4cc9f0;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#superSecretCodePage .ssc26-preview-entry__badge strong {
    display: block;
    color: #f8fafc;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

#superSecretCodePage .ssc26-preview-entry__badge--1 {
    left: 12px;
    top: 18px;
}

#superSecretCodePage .ssc26-preview-entry__badge--2 {
    left: 48px;
    top: 122px;
}

#superSecretCodePage .ssc26-preview-entry__badge--3 {
    right: 0;
    top: 60px;
}

#superSecretCodePage .ssc26-preview-subgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#superSecretCodePage .ssc26-preview-subcard {
    padding: 22px 20px 20px;
    border: 1px solid #dce7fb;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 28px rgba(17, 38, 89, 0.05);
}

#superSecretCodePage .ssc26-preview-subcard__title {
    margin: 0;
    color: #0f172a;
    font-size: 21px;
    line-height: 1.42;
    font-weight: 900;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* ==========================================================================
 * ANIMATION
 * ========================================================================== */
@keyframes ssc26GlowPulse {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: .88; }
    50%  { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: .88; }
}

@keyframes ssc26BookFloat {
    0%   { transform: rotate(-4deg) translateY(0); }
    50%  { transform: rotate(-2.4deg) translateY(-7px); }
    100% { transform: rotate(-4deg) translateY(0); }
}

@keyframes ssc26CardFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* ==========================================================================
 * 1280+
 * ========================================================================== */
@media all and (min-width: 1280px) {
    #superSecretCodePage .ssc26-hero__title {
        font-size: 70px;
    }

    #superSecretCodePage .ssc26-hero__book {
        width: 262px;
    }
}

/* ==========================================================================
 * 992 ~ 1279
 * ========================================================================== */
@media all and (min-width: 992px) and (max-width: 1279px) {
    #superSecretCodePage .ssc26-hero__inner {
        padding: 56px 36px 50px;
    }

    #superSecretCodePage .ssc26-hero__content {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .84fr);
        gap: 28px;
    }

    #superSecretCodePage .ssc26-hero__head {
        margin-bottom: 28px;
    }

    #superSecretCodePage .ssc26-hero__title {
        font-size: 70px;
    }

    #superSecretCodePage .ssc26-hero__desc {
        font-size: 19px;
    }

    #superSecretCodePage .ssc26-hero__subdesc {
        font-size: 16px;
    }

    #superSecretCodePage .ssc26-hero__visual-stage {
        min-height: 470px;
    }

    #superSecretCodePage .ssc26-hero__book {
        width: 220px;
        right: 18px;
        bottom: 16px;
    }

    #superSecretCodePage .ssc26-hero__code-card {
        width: 208px;
    }

    #superSecretCodePage .ssc26-hero__code-card--1 {
        left: 0;
        top: 30px;
    }

    #superSecretCodePage .ssc26-hero__code-card--2 {
        left: 28px;
        top: 178px;
    }

    #superSecretCodePage .ssc26-hero__code-card--3 {
        right: 0;
        top: 70px;
    }

    #superSecretCodePage .ssc26-bridge__title {
        font-size: 30px;
    }

    #superSecretCodePage .ssc26-section-head__title {
        font-size: 34px;
    }

    #superSecretCodePage .ssc26-why-intro__lead,
    #superSecretCodePage .ssc26-middle-intro__lead {
        font-size: 24px;
    }

    #superSecretCodePage .ssc26-define-box__title {
        font-size: 32px;
    }

    #superSecretCodePage .ssc26-code-card__title,
    #superSecretCodePage .ssc26-method-card__title {
        font-size: 25px;
    }

    #superSecretCodePage .ssc26-change-col__title {
        font-size: 24px;
    }

    #superSecretCodePage .ssc26-preview-entry {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
        gap: 24px;
        padding: 30px 28px 28px;
    }

    #superSecretCodePage .ssc26-preview-entry__title {
        font-size: 30px;
    }

    #superSecretCodePage .ssc26-preview-entry__book {
        width: 190px;
        right: 20px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge {
        min-width: 166px;
    }
}

/* ==========================================================================
 * 768 ~ 991
 * ========================================================================== */
@media all and (min-width: 768px) and (max-width: 991px) {
    #superSecretCodePage .ssc26-hero {
        border-radius: 3px;
    }

    #superSecretCodePage .ssc26-hero__inner {
        padding: 52px 28px 46px;
    }

    #superSecretCodePage .ssc26-hero__head {
        margin-bottom: 24px;
    }

    #superSecretCodePage .ssc26-hero__content {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    #superSecretCodePage .ssc26-hero__head,
    #superSecretCodePage .ssc26-hero__copy,
    #superSecretCodePage .ssc26-preview-entry__copy {
        text-align: center;
    }

    #superSecretCodePage .ssc26-hero__desc,
    #superSecretCodePage .ssc26-hero__subdesc {
        max-width: 100%;
    }

    #superSecretCodePage .ssc26-hero__title {
        font-size: 54px;
    }

    #superSecretCodePage .ssc26-hero__kicker {
        font-size: 17px;
    }

    #superSecretCodePage .ssc26-hero__desc {
        font-size: 19px;
    }

    #superSecretCodePage .ssc26-hero__subdesc {
        font-size: 16px;
    }

    #superSecretCodePage .ssc26-hero__chip-list,
    #superSecretCodePage .ssc26-hero__actions,
    #superSecretCodePage .ssc26-preview-entry__actions {
        justify-content: center;
    }

    #superSecretCodePage .ssc26-hero__visual-stage {
        min-height: 430px;
        max-width: 560px;
        margin: 0 auto;
    }

    #superSecretCodePage .ssc26-hero__book {
        right: 88px;
        bottom: 12px;
        width: 210px;
    }

    #superSecretCodePage .ssc26-hero__code-card {
        width: 206px;
    }

    #superSecretCodePage .ssc26-hero__code-card--1 {
        left: 18px;
        top: 18px;
    }

    #superSecretCodePage .ssc26-hero__code-card--2 {
        left: 40px;
        top: 162px;
    }

    #superSecretCodePage .ssc26-hero__code-card--3 {
        right: 22px;
        top: 58px;
    }

    #superSecretCodePage .ssc26-bridge__cards,
    #superSecretCodePage .ssc26-why-grid,
    #superSecretCodePage .ssc26-middle-grid,
    #superSecretCodePage .ssc26-define-points,
    #superSecretCodePage .ssc26-code-grid,
    #superSecretCodePage .ssc26-method-grid,
    #superSecretCodePage .ssc26-preview-subgrid,
    #superSecretCodePage .ssc26-change-compare {
        grid-template-columns: 1fr;
    }

    #superSecretCodePage .ssc26-change-arrow {
        order: 2;
    }

    #superSecretCodePage .ssc26-change-col--after {
        order: 3;
    }

    #superSecretCodePage .ssc26-bridge__title {
        font-size: 28px;
    }

    #superSecretCodePage .ssc26-section {
        padding: 44px 24px 42px;
    }

    #superSecretCodePage .ssc26-section-head__title {
        font-size: 32px;
    }

    #superSecretCodePage .ssc26-preview-entry {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 24px 24px;
    }

    #superSecretCodePage .ssc26-preview-entry__visual {
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
    }

    #superSecretCodePage .ssc26-preview-entry__book {
        right: 84px;
        width: 188px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge--1 {
        left: 20px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge--2 {
        left: 52px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge--3 {
        right: 18px;
    }

    #superSecretCodePage .ssc26-quick-nav {
        top: 78px;
    }

    #superSecretCodePage .ssc26-quick-nav__inner {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px;
        scroll-snap-type: x proximity;
        scroll-padding-left: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }

    #superSecretCodePage .ssc26-quick-nav__inner::-webkit-scrollbar {
        display: none;
    }

    #superSecretCodePage .ssc26-quick-nav__link {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 38px;
        padding: 0 13px;
        font-size: 13px;
    }
}

/* ==========================================================================
 * 413 ~ 767
 * ========================================================================== */
@media all and (min-width: 413px) and (max-width: 767px) {
    #superSecretCodePage .ssc26-hero {
        border-radius: 3px;
    }

    #superSecretCodePage .ssc26-hero__inner {
        padding: 42px 20px 36px;
    }

    #superSecretCodePage .ssc26-hero__head {
        margin-bottom: 22px;
    }

    #superSecretCodePage .ssc26-hero__content {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    #superSecretCodePage .ssc26-hero__head,
    #superSecretCodePage .ssc26-hero__copy,
    #superSecretCodePage .ssc26-preview-entry__copy {
        text-align: center;
    }

    #superSecretCodePage .ssc26-hero__eyebrow {
        margin-bottom: 12px;
    }

    #superSecretCodePage .ssc26-hero__kicker {
        margin-bottom: 12px;
        font-size: 15px;
    }

    #superSecretCodePage .ssc26-hero__title {
        font-size: 49px;
        line-height: 1.12;
    }

    #superSecretCodePage .ssc26-hero__desc {
        max-width: 100%;
        margin-top: 0;
        font-size: 17px;
        line-height: 1.7;
    }

    #superSecretCodePage .ssc26-hero__subdesc {
        max-width: 100%;
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.72;
    }

    #superSecretCodePage .ssc26-hero__chip-list {
        justify-content: center;
        gap: 10px;
        margin-top: 24px;
    }

    #superSecretCodePage .ssc26-hero__chip {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }

    #superSecretCodePage .ssc26-hero__actions,
    #superSecretCodePage .ssc26-preview-entry__actions {
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    #superSecretCodePage .ssc26-hero__btn,
    #superSecretCodePage .ssc26-preview-entry__btn {
        min-width: 100%;
        min-height: 50px;
    }

    #superSecretCodePage .ssc26-hero__visual-stage {
        min-height: 330px;
        max-width: 100%;
    }

    #superSecretCodePage .ssc26-hero__book {
        right: 50%;
        bottom: 4px;
        width: 170px;
        transform: translateX(50%) rotate(-3deg);
    }

    #superSecretCodePage .ssc26-hero__code-card {
        width: 180px;
        padding: 14px 14px 13px;
    }

    #superSecretCodePage .ssc26-hero__code-card--1 {
        left: 0;
        top: 16px;
    }

    #superSecretCodePage .ssc26-hero__code-card--2 {
        left: 50%;
        top: 146px;
        transform: translateX(-50%);
    }

    #superSecretCodePage .ssc26-hero__code-card--3 {
        right: 0;
        top: 26px;
    }

    #superSecretCodePage .ssc26-hero__code-title {
        font-size: 16px;
    }

    #superSecretCodePage .ssc26-hero__code-text {
        font-size: 13px;
    }

    #superSecretCodePage .ssc26-hero__microcopy {
        display: none;
    }

    #superSecretCodePage .ssc26-bridge__inner {
        padding: 28px 18px 22px;
    }

    #superSecretCodePage .ssc26-bridge__title {
        font-size: 24px;
        line-height: 1.42;
    }

    #superSecretCodePage .ssc26-bridge__cards,
    #superSecretCodePage .ssc26-why-grid,
    #superSecretCodePage .ssc26-middle-grid,
    #superSecretCodePage .ssc26-define-points,
    #superSecretCodePage .ssc26-code-grid,
    #superSecretCodePage .ssc26-method-grid,
    #superSecretCodePage .ssc26-preview-subgrid,
    #superSecretCodePage .ssc26-change-compare {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 22px;
    }

    #superSecretCodePage .ssc26-change-arrow {
        order: 2;
    }

    #superSecretCodePage .ssc26-change-col--after {
        order: 3;
    }

    #superSecretCodePage .ssc26-quick-nav {
        top: 78px;
    }

    #superSecretCodePage .ssc26-quick-nav__inner {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px;
        scroll-snap-type: x proximity;
        scroll-padding-left: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }

    #superSecretCodePage .ssc26-quick-nav__inner::-webkit-scrollbar {
        display: none;
    }

    #superSecretCodePage .ssc26-quick-nav__link {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 13px;
        font-size: 13px;
    }

    #superSecretCodePage .ssc26-section {
        margin-top: 20px;
        padding: 34px 18px 32px;
        border-radius: 20px;
    }

    #superSecretCodePage .ssc26-quick-nav + .ssc26-section,
    #superSecretCodePage .ssc26-quick-nav + .ssc26-bridge {
        margin-top: 18px;
    }

    #superSecretCodePage .ssc26-section-head__title {
        font-size: 27px;
        line-height: 1.32;
    }

    #superSecretCodePage .ssc26-section-head__desc {
        max-width: 100%;
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.64;
    }

    #superSecretCodePage .ssc26-section-head + .ssc26-why-intro,
    #superSecretCodePage .ssc26-section-head + .ssc26-middle-intro,
    #superSecretCodePage .ssc26-section-head + .ssc26-define-box,
    #superSecretCodePage .ssc26-section-head + .ssc26-code-grid,
    #superSecretCodePage .ssc26-section-head + .ssc26-method-intro,
    #superSecretCodePage .ssc26-section-head + .ssc26-change-compare,
    #superSecretCodePage .ssc26-section-head + .ssc26-preview-entry {
        margin-top: 18px;
    }

    #superSecretCodePage .ssc26-why-intro,
    #superSecretCodePage .ssc26-middle-intro {
        padding: 22px 18px;
        border-radius: 20px;
    }

    #superSecretCodePage .ssc26-why-intro__lead,
    #superSecretCodePage .ssc26-middle-intro__lead {
        font-size: 20px;
        line-height: 1.46;
    }

    #superSecretCodePage .ssc26-why-intro__desc,
    #superSecretCodePage .ssc26-middle-intro__desc,
    #superSecretCodePage .ssc26-define-box__desc {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.68;
    }

    #superSecretCodePage .ssc26-why-card,
    #superSecretCodePage .ssc26-middle-card,
    #superSecretCodePage .ssc26-define-point,
    #superSecretCodePage .ssc26-code-card,
    #superSecretCodePage .ssc26-method-card,
    #superSecretCodePage .ssc26-preview-subcard,
    #superSecretCodePage .ssc26-change-col {
        border-radius: 20px;
    }

    #superSecretCodePage .ssc26-why-card,
    #superSecretCodePage .ssc26-middle-card,
    #superSecretCodePage .ssc26-code-card,
    #superSecretCodePage .ssc26-method-card,
    #superSecretCodePage .ssc26-change-col {
        padding: 22px 18px 20px;
    }

    #superSecretCodePage .ssc26-why-card__title,
    #superSecretCodePage .ssc26-middle-card__title,
    #superSecretCodePage .ssc26-define-point__title,
    #superSecretCodePage .ssc26-code-card__title,
    #superSecretCodePage .ssc26-method-card__title,
    #superSecretCodePage .ssc26-change-col__title,
    #superSecretCodePage .ssc26-preview-subcard__title {
        font-size: 20px;
    }

    #superSecretCodePage .ssc26-why-card__desc,
    #superSecretCodePage .ssc26-middle-card__desc,
    #superSecretCodePage .ssc26-define-point__desc,
    #superSecretCodePage .ssc26-code-card__desc,
    #superSecretCodePage .ssc26-method-card__desc,
    #superSecretCodePage .ssc26-preview-subcard__desc,
    #superSecretCodePage .ssc26-change-list li {
        font-size: 14px;
        line-height: 1.7;
    }

    #superSecretCodePage .ssc26-why-summary,
    #superSecretCodePage .ssc26-middle-summary,
    #superSecretCodePage .ssc26-method-summary,
    #superSecretCodePage .ssc26-code-flow,
    #superSecretCodePage .ssc26-change-result {
        margin-top: 20px;
        padding: 18px;
        border-radius: 18px;
    }

    #superSecretCodePage .ssc26-why-summary__text,
    #superSecretCodePage .ssc26-middle-summary__text,
    #superSecretCodePage .ssc26-method-summary__text,
    #superSecretCodePage .ssc26-code-flow__text,
    #superSecretCodePage .ssc26-change-result__text {
        font-size: 16px;
        line-height: 1.68;
    }

    #superSecretCodePage .ssc26-method-intro {
        padding: 18px;
        border-radius: 18px;
    }

    #superSecretCodePage .ssc26-method-intro__lead {
        font-size: 18px;
        line-height: 1.72;
    }

    #superSecretCodePage .ssc26-method-list li,
    #superSecretCodePage .ssc26-code-list li {
        font-size: 13px;
    }

    #superSecretCodePage .ssc26-preview-entry {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 24px;
        padding: 24px 18px 22px;
        border-radius: 22px;
    }

    #superSecretCodePage .ssc26-preview-entry__title {
        font-size: 24px;
        line-height: 1.46;
    }

    #superSecretCodePage .ssc26-preview-entry__desc {
        font-size: 15px;
        line-height: 1.76;
    }

    #superSecretCodePage .ssc26-preview-entry__visual {
        min-height: 290px;
    }

    #superSecretCodePage .ssc26-preview-entry__book {
        right: 50%;
        transform: translateX(50%);
        width: 164px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge {
        min-width: 150px;
        padding: 12px 13px 11px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge strong {
        font-size: 15px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge--1 {
        left: 0;
        top: 8px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge--2 {
        left: 50%;
        top: 118px;
        transform: translateX(-50%);
    }

    #superSecretCodePage .ssc26-preview-entry__badge--3 {
        right: 0;
        top: 18px;
    }
}

/* ==========================================================================
 * 412 이하
 * ========================================================================== */
@media all and (max-width: 412px) {
    #superSecretCodePage .ssc26-hero {
        border-radius: 3px;
    }

    #superSecretCodePage .ssc26-hero__inner {
        padding: 36px 16px 30px;
    }

    #superSecretCodePage .ssc26-hero__head {
        margin-bottom: 20px;
    }

    #superSecretCodePage .ssc26-hero__content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #superSecretCodePage .ssc26-hero__head,
    #superSecretCodePage .ssc26-hero__copy,
    #superSecretCodePage .ssc26-preview-entry__copy {
        text-align: center;
    }

    #superSecretCodePage .ssc26-hero__eyebrow {
        padding: 8px 12px;
        font-size: 11px;
    }

    #superSecretCodePage .ssc26-hero__kicker {
        margin-bottom: 10px;
        font-size: 14px;
    }

    #superSecretCodePage .ssc26-hero__title {
        font-size: 39px;
        line-height: 1.12;
        text-wrap: pretty;
    }

    #superSecretCodePage .ssc26-hero__desc {
        max-width: 100%;
        margin-top: 0;
        font-size: 16px;
        line-height: 1.68;
    }

    #superSecretCodePage .ssc26-hero__subdesc {
        max-width: 100%;
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.7;
    }

    #superSecretCodePage .ssc26-hero__chip-list {
        justify-content: center;
        gap: 8px;
        margin-top: 22px;
    }

    #superSecretCodePage .ssc26-hero__chip {
        width: 100%;
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
    }

    #superSecretCodePage .ssc26-hero__actions,
    #superSecretCodePage .ssc26-preview-entry__actions {
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    #superSecretCodePage .ssc26-hero__btn,
    #superSecretCodePage .ssc26-preview-entry__btn {
        width: 100%;
        min-width: 100%;
        min-height: 48px;
        padding: 0 16px;
        font-size: 15px;
    }

    #superSecretCodePage .ssc26-hero__visual-stage {
        min-height: 298px;
    }

    #superSecretCodePage .ssc26-hero__book {
        right: 50%;
        bottom: 2px;
        width: 150px;
        transform: translateX(50%) rotate(-3deg);
    }

    #superSecretCodePage .ssc26-hero__code-card {
        width: 154px;
        padding: 12px 12px 11px;
        border-radius: 15px;
    }

    #superSecretCodePage .ssc26-hero__code-card--1 {
        left: 0;
        top: 10px;
    }

    #superSecretCodePage .ssc26-hero__code-card--2 {
        left: 50%;
        top: 128px;
        transform: translateX(-50%);
    }

    #superSecretCodePage .ssc26-hero__code-card--3 {
        right: 0;
        top: 18px;
    }

    #superSecretCodePage .ssc26-hero__code-label {
        min-width: 58px;
        height: 22px;
        margin-bottom: 8px;
        font-size: 10px;
    }

    #superSecretCodePage .ssc26-hero__code-title {
        font-size: 14px;
    }

    #superSecretCodePage .ssc26-hero__code-text {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.55;
    }

    #superSecretCodePage .ssc26-hero__microcopy {
        display: none;
    }

    #superSecretCodePage .ssc26-bridge {
        border-radius: 20px;
    }

    #superSecretCodePage .ssc26-bridge__inner {
        padding: 24px 14px 18px;
    }

    #superSecretCodePage .ssc26-bridge__title {
        font-size: 22px;
        line-height: 1.42;
    }

    #superSecretCodePage .ssc26-bridge__cards,
    #superSecretCodePage .ssc26-why-grid,
    #superSecretCodePage .ssc26-middle-grid,
    #superSecretCodePage .ssc26-define-points,
    #superSecretCodePage .ssc26-code-grid,
    #superSecretCodePage .ssc26-method-grid,
    #superSecretCodePage .ssc26-preview-subgrid,
    #superSecretCodePage .ssc26-change-compare {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    #superSecretCodePage .ssc26-change-arrow {
        order: 2;
    }

    #superSecretCodePage .ssc26-change-col--after {
        order: 3;
    }

    #superSecretCodePage .ssc26-quick-nav {
        top: 74px;
    }

    #superSecretCodePage .ssc26-quick-nav__inner {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 9px;
        border-radius: 16px;
        scroll-snap-type: x proximity;
        scroll-padding-left: 9px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }

    #superSecretCodePage .ssc26-quick-nav__inner::-webkit-scrollbar {
        display: none;
    }

    #superSecretCodePage .ssc26-quick-nav__link {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }

    #superSecretCodePage .ssc26-section {
        margin-top: 18px;
        padding: 30px 14px 28px;
        border-radius: 18px;
    }

    #superSecretCodePage .ssc26-quick-nav + .ssc26-section,
    #superSecretCodePage .ssc26-quick-nav + .ssc26-bridge {
        margin-top: 16px;
    }

    #superSecretCodePage .ssc26-section-head__eyebrow {
        margin-bottom: 8px;
    }

    #superSecretCodePage .ssc26-section-head__title {
        font-size: 24px;
        line-height: 1.35;
    }

    #superSecretCodePage .ssc26-section-head__desc {
        max-width: 100%;
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.62;
    }

    #superSecretCodePage .ssc26-section-head + .ssc26-why-intro,
    #superSecretCodePage .ssc26-section-head + .ssc26-middle-intro,
    #superSecretCodePage .ssc26-section-head + .ssc26-define-box,
    #superSecretCodePage .ssc26-section-head + .ssc26-code-grid,
    #superSecretCodePage .ssc26-section-head + .ssc26-method-intro,
    #superSecretCodePage .ssc26-section-head + .ssc26-change-compare,
    #superSecretCodePage .ssc26-section-head + .ssc26-preview-entry {
        margin-top: 16px;
    }

    #superSecretCodePage .ssc26-why-intro,
    #superSecretCodePage .ssc26-middle-intro {
        padding: 20px 14px;
        border-radius: 18px;
    }

    #superSecretCodePage .ssc26-why-intro__lead,
    #superSecretCodePage .ssc26-middle-intro__lead {
        font-size: 18px;
        line-height: 1.44;
    }

    #superSecretCodePage .ssc26-why-intro__desc,
    #superSecretCodePage .ssc26-middle-intro__desc,
    #superSecretCodePage .ssc26-define-box__desc {
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.64;
    }

    #superSecretCodePage .ssc26-why-card,
    #superSecretCodePage .ssc26-middle-card,
    #superSecretCodePage .ssc26-define-point,
    #superSecretCodePage .ssc26-code-card,
    #superSecretCodePage .ssc26-method-card,
    #superSecretCodePage .ssc26-preview-subcard,
    #superSecretCodePage .ssc26-change-col {
        border-radius: 18px;
    }

    #superSecretCodePage .ssc26-why-card,
    #superSecretCodePage .ssc26-middle-card,
    #superSecretCodePage .ssc26-code-card,
    #superSecretCodePage .ssc26-method-card,
    #superSecretCodePage .ssc26-change-col {
        padding: 20px 16px 18px;
    }

    #superSecretCodePage .ssc26-why-card__title,
    #superSecretCodePage .ssc26-middle-card__title,
    #superSecretCodePage .ssc26-define-point__title,
    #superSecretCodePage .ssc26-code-card__title,
    #superSecretCodePage .ssc26-method-card__title,
    #superSecretCodePage .ssc26-change-col__title,
    #superSecretCodePage .ssc26-preview-subcard__title {
        font-size: 18px;
    }

    #superSecretCodePage .ssc26-why-card__point,
    #superSecretCodePage .ssc26-why-card__desc,
    #superSecretCodePage .ssc26-middle-card__desc,
    #superSecretCodePage .ssc26-define-point__desc,
    #superSecretCodePage .ssc26-code-card__desc,
    #superSecretCodePage .ssc26-method-card__desc,
    #superSecretCodePage .ssc26-preview-subcard__desc,
    #superSecretCodePage .ssc26-change-list li {
        font-size: 13px;
        line-height: 1.66;
    }

    #superSecretCodePage .ssc26-why-summary,
    #superSecretCodePage .ssc26-middle-summary,
    #superSecretCodePage .ssc26-method-summary,
    #superSecretCodePage .ssc26-code-flow,
    #superSecretCodePage .ssc26-change-result {
        margin-top: 18px;
        padding: 16px 14px;
        border-radius: 16px;
    }

    #superSecretCodePage .ssc26-why-summary__text,
    #superSecretCodePage .ssc26-middle-summary__text,
    #superSecretCodePage .ssc26-method-summary__text,
    #superSecretCodePage .ssc26-code-flow__text,
    #superSecretCodePage .ssc26-change-result__text {
        font-size: 15px;
        line-height: 1.64;
    }

    #superSecretCodePage .ssc26-define-box {
        padding: 22px 14px 18px;
        border-radius: 20px;
    }

    #superSecretCodePage .ssc26-define-box__label,
    #superSecretCodePage .ssc26-code-card__label,
    #superSecretCodePage .ssc26-method-card__label,
    #superSecretCodePage .ssc26-preview-entry__eyebrow {
        min-height: 28px;
        padding: 0 12px;
        font-size: 11px;
    }

    #superSecretCodePage .ssc26-define-box__title {
        font-size: 22px;
        line-height: 1.4;
    }

    #superSecretCodePage .ssc26-code-list li,
    #superSecretCodePage .ssc26-method-list li {
        font-size: 12px;
        line-height: 1.62;
    }

    #superSecretCodePage .ssc26-method-intro {
        padding: 16px 14px;
        border-radius: 16px;
    }

    #superSecretCodePage .ssc26-method-intro__lead {
        font-size: 16px;
        line-height: 1.66;
    }

    #superSecretCodePage .ssc26-change-col__label {
        min-width: 66px;
        height: 28px;
        font-size: 10px;
    }

    #superSecretCodePage .ssc26-change-arrow span {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }

    #superSecretCodePage .ssc26-preview-entry {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 22px;
        padding: 22px 14px 20px;
        border-radius: 20px;
    }

    #superSecretCodePage .ssc26-preview-entry__title {
        font-size: 22px;
        line-height: 1.42;
    }

    #superSecretCodePage .ssc26-preview-entry__desc {
        font-size: 14px;
        line-height: 1.72;
    }

    #superSecretCodePage .ssc26-preview-entry__visual {
        min-height: 272px;
    }

    #superSecretCodePage .ssc26-preview-entry__book {
        right: 50%;
        transform: translateX(50%);
        width: 148px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge {
        min-width: 138px;
        padding: 11px 12px 10px;
        border-radius: 15px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge span {
        margin-bottom: 7px;
        font-size: 10px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge strong {
        font-size: 14px;
        line-height: 1.4;
    }

    #superSecretCodePage .ssc26-preview-entry__badge--1 {
        left: 0;
        top: 8px;
    }

    #superSecretCodePage .ssc26-preview-entry__badge--2 {
        left: 50%;
        top: 112px;
        transform: translateX(-50%);
    }

    #superSecretCodePage .ssc26-preview-entry__badge--3 {
        right: 0;
        top: 16px;
    }
}

/* ==========================================================================
 * REDUCED MOTION
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    #superSecretCodePage .ssc26-hero__visual-glow,
    #superSecretCodePage .ssc26-hero__book,
    #superSecretCodePage .ssc26-hero__code-card {
        animation: none !important;
    }

    #superSecretCodePage .ssc26-hero__btn,
    #superSecretCodePage .ssc26-quick-nav__link,
    #superSecretCodePage .ssc26-preview-entry__btn {
        transition: none !important;
    }
}



/* ==========================================================================
 * SSC26 HERO 배경이미지 테스트 패치
 * - hero-3d-modern-background.jpg 적용
 * - 배경 레이어 비노출
 * - 가독성용 dark overlay + glass panel 강화
 * ========================================================================== */

#superSecretCodePage .ssc26-hero__bg {
    display: none;
}

#superSecretCodePage .ssc26-hero {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 3px;
	
    background:
        #050816 url('/book/md/Summa-Junior-Korean/css/hero-3d-modern-background.jpg') no-repeat center center;
    background-size: cover;
    box-shadow:
        0 26px 60px rgba(7, 15, 52, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 이미지 위에 톤 정리용 오버레이 */
#superSecretCodePage .ssc26-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            rgba(3, 8, 24, 0.82) 0%,
            rgba(7, 15, 40, 0.72) 36%,
            rgba(9, 22, 56, 0.62) 68%,
            rgba(3, 8, 24, 0.84) 100%);
}

/* 좌측 카피 가독성 강화용 은은한 빛 */
#superSecretCodePage .ssc26-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 34%,
            rgba(76, 201, 240, 0.16) 0%,
            rgba(96, 165, 250, 0.08) 24%,
            transparent 52%);
}

#superSecretCodePage .ssc26-hero__inner {
    position: relative;
    z-index: 2;
}

/* 글래스모피즘 톤 강화 */
#superSecretCodePage .ssc26-hero__eyebrow {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(147, 197, 253, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#superSecretCodePage .ssc26-hero__chip {
    background: rgba(10, 18, 40, 0.42);
    border: 1px solid rgba(96, 165, 250, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 10px 22px rgba(5, 10, 30, 0.24);
}

#superSecretCodePage .ssc26-hero__code-card {
    background: linear-gradient(
        180deg,
        rgba(19, 33, 74, 0.48) 0%,
        rgba(10, 20, 52, 0.58) 100%
    );
    border: 1px solid rgba(125, 211, 252, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 18px 38px rgba(4, 12, 38, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

/* 텍스트 대비 약간 보정 */
#superSecretCodePage .ssc26-hero__kicker {
    color: #dbeafe;
}

#superSecretCodePage .ssc26-hero__desc {
    color: #f8fbff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

#superSecretCodePage .ssc26-hero__subdesc {
    color: #d7e3f8;
}