/* ==========================================================================
   Teenstock 디자인 시스템 — 공용 컴포넌트
   Figma file: peN1wtXPS0ABYFWnQXKUeW (35 프레임)
   이미지: /img/new/*.png 만 사용. 그 외 모든 시각 요소는 CSS로 구현.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    min-width: var(--viewport-min);         /* 320 미만 가로 스크롤 유도 */
    font-family: var(--font-family-base);
    color: var(--color-text-body);
    background: var(--color-bg-page-outside);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--lh-tight);
}

body {
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

.sound_only {display:none;}

/* --------------------------------------------------------------------------
   1. Page container (반응형 — 320~640)
   -------------------------------------------------------------------------- */
.page {
    position: relative;
    width: 100%;
    max-width: var(--viewport-max);
    margin: 0 auto;
    /* min-height: 100vh; */
    /* background: var(--color-bg); */
    /* padding-bottom: 32px; */
}

.page--soft { background: var(--color-bg-soft); }
.page--white{ background: var(--color-bg); }

.page__pad   { padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); }
.page__pad-l { padding-left: var(--page-pad-x-login); padding-right: var(--page-pad-x-login); }

/* --------------------------------------------------------------------------
   2. 헤더 (상단 앱바)
   -------------------------------------------------------------------------- */
.appbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--header-h);
    padding: 20px 20px 14px;
    background-color: var(--color-bg);
}

.appbar__back {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: url("/img/new/icon_back01.png") center/10px 18px no-repeat;
}
.appbar__menu {
    margin-left: auto;
    width: 32px; height: 32px;
    background: url("/img/new/icon_menu01.png") center/24px 16px no-repeat;
}

/* 학급코드 + 캐릭터 이모지 — 이모지를 크게(~100px) 돌출 배치 */
.appbar__classcode {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 0;
    font: var(--fw-bold) 20px / 1 var(--font-family-base);
    color: var(--color-primary);
    letter-spacing: -0.02em;
}
.appbar__classcode::before {
    content: "";
    width: 24px; height: 24px;
    flex-shrink: 0;
    background: url("/img/new/icon_emoji01.png") center/contain no-repeat;
    margin: 4px 0 0;
}

/* 헤더 타이틀 (강사 페이지) */
.appbar__title {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font: var(--fw-light) var(--fs-title) / 1 var(--font-family-base);
    color: var(--color-text-body);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 페이지 타이틀 (H1)
   -------------------------------------------------------------------------- */
.page-title {
    font: var(--fw-bold) var(--fs-hero) / 1.2 var(--font-family-base);
    color: var(--color-text-hero);
    letter-spacing: -0.02em;
}
.page-title--lg { font-size: 28px; }

.page-title__accent    { color: var(--color-primary); }
.page-title__accent--b { color: var(--color-down); }     /* "1분기" 파랑 */
.page-title__accent--l { color: var(--color-lime); }

.page-subtitle {
    font: var(--fw-bold) var(--fs-md) / 1.4 var(--font-family-base);
    color: var(--color-text-section);
}

.section-title {
    font: var(--fw-bold) var(--fs-lg) / 1.4 var(--font-family-base);
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   4. 본문 텍스트
   · .body-text 기본은 regular, 키워드만 <strong>으로 bold 처리하는 전략
   · .body-text--bold 는 문단 전체 bold가 필요한 특수 케이스용
   -------------------------------------------------------------------------- */
.body-text {
    font: var(--fw-regular) var(--fs-base) / 1.625 var(--font-family-base);
    color: var(--color-text-body);
}
.body-text strong { font-weight: var(--fw-bold); color: var(--color-text-hero); }
.body-text--bold  { font-weight: var(--fw-bold); }
.body-text--light {
    font-weight: var(--fw-light);
    color: var(--color-text-sub);
    line-height: 1.7;
}
.body-text--accent { color: var(--color-primary); font-weight: var(--fw-bold); }

.caption {
    font: var(--fw-regular) var(--fs-caption) / 1.4 var(--font-family-base);
    color: var(--color-text-sub);
}

/* --------------------------------------------------------------------------
   5. 버튼 시스템
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-h);
    padding: 0 var(--space-6);
    font: var(--fw-bold) var(--fs-lg) / 1 var(--font-family-base);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transition: transform var(--dur-fast) var(--ease-base),
                filter var(--dur-fast) var(--ease-base);
    white-space: nowrap;
    user-select: none;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn--block { display: flex; width: 100%; }

/* Variants */
.btn--primary       { background: var(--color-primary); color: #fff; }
.btn--primary-out   {
    background: #fff;
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
.btn--border-out   {
    background: #fff;
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.btn--border-out-light   {
    background: #fff;
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1.5px var(--color-border-light);
}
.btn-etf            {background-color: var(--color-lime); }
.btn--login         {border-radius: var(--radius-xl);}
.btn--act           {border-radius: var(--radius-lg);height: var(--btn-h-lg);}
.btn--lime          { background: var(--color-lime); color: #fff; }
.btn--buy           { background: var(--color-up);   color: #fff; border-radius: var(--radius-md); height: var(--btn-h-action); font-size: var(--fs-xl); }
.btn--sell          { background: var(--color-down); color: #fff; border-radius: var(--radius-md); height: var(--btn-h-action); font-size: var(--fs-xl); }
.btn--danger        { background: var(--color-up);   color: #fff; border-radius: var(--radius-md); height: 50px; font-size: 19px; }
.btn--info          { background: var(--color-down); color: #fff; border-radius: var(--radius-md); height: 50px; font-size: 19px; }

.btn--cta-lg        { height: var(--btn-h-lg); border-radius: var(--radius-md); font-size: var(--fs-lg); }

.btn--disabled,
.btn[disabled] {
    background: #fff;
    color: var(--color-text-body);
    box-shadow: inset 0 0 0 1px var(--color-border);
    cursor: not-allowed;
    filter: none !important;
}

/* 버튼 페어 (구매/판매, 내 리포트/수업 종료) */
.btn-pair {
    display: flex;
    gap: 12px;
}
.btn-pair .btn { flex: 1; }

/* --------------------------------------------------------------------------
   6. 입력 필드
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--space-7); }

.field__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font: var(--fw-light) var(--fs-lg) / 1 var(--font-family-base);
    color: var(--color-text-body);
}
.field__help {
    width: 16px; height: 16px; display: inline-block;
    background: url("/img/new/icon_help01.png") center/contain no-repeat;
    opacity: 0.7;
}

.field__control {
    display: block;
    width: 100%;
    height: var(--input-h);
    padding: 0 14px;
    font: var(--fw-medium) var(--fs-lg) / 1 var(--font-family-base);
    color: var(--color-text-title);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-base);
}
.field__control::placeholder { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.field__control:focus { border-color: var(--color-primary); }

.field__select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-body) 50%),
        linear-gradient(135deg, var(--color-text-body) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* --------------------------------------------------------------------------
   7. 푸터 (이티원 로고 + 기관명)
   -------------------------------------------------------------------------- */
.appfooter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 50px 0;
}
.appfooter__logo {
    width: 42px; height: 42px;
    background: url("/img/new/logo_etone01.png") center/contain no-repeat;
}
.appfooter__text {
    display: flex;
    flex-direction: column;
    color: var(--color-text-body);
    font-family: var(--font-family-base);
    font-weight: var(--fw-light);
}
.appfooter__text .t1 { font-size: var(--fs-footer); line-height: 1.4; }
.appfooter__text .t2 { font-size: var(--fs-lg);     line-height: 1.4; }

.appfooter--centered { flex-direction: column; gap: 2px; }
.appfooter--centered .appfooter__logo { display: none; }
.appfooter--centered .appfooter__text { align-items: center; }

/* --------------------------------------------------------------------------
   8. 로고 비주얼 (TEEN'S STOCK)
   -------------------------------------------------------------------------- */
.brand-visual {
    display: block;
    margin: 0 auto;
    max-width: 65%;
    width: 90%;
    background: url("/img/new/visual01.png") center/contain no-repeat;
    aspect-ratio: 513 / 385;
}

.brand-visual.sub {
    margin-top: 100px;
    margin-bottom: 60px;
}

.brand-sub {
    text-align: center;
    font: var(--fw-medium) var(--fs-hero) / 1 var(--font-family-base);
    color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   9. 캔들 아이콘 (헤더 장식)
   -------------------------------------------------------------------------- */
.candle-deco {
    width: 50px; height: 48px;
    background: url("/img/new/icon_candle01.png") center/contain no-repeat;
    flex-shrink: 0;
}
.candle-deco--lg {
    width: 70px; height: 40px;
    background-image: url("/img/new/icon_candle02.png");
}

/* 타이틀 + 캔들 장식 (3.종목정보, 4.분기투자 공통 — 캔들 상단 중앙, 타이틀 그 아래) */
.section-intro {
    text-align: center;
    padding: 4vh var(--page-pad-x) 5vh;
    background-color: var(--color-bg);
}
.section-intro__candle {
    width: 50px; height: 48px;
    margin: 0 auto 4px;
    background: url("/img/new/icon_candle01.png") center/contain no-repeat;
}
.section-intro__title {
    font: var(--fw-bold) 26px / 1.25 var(--font-family-base);
    color: var(--color-text-hero);
    letter-spacing: -0.02em;
    margin: 0;
}
.section-intro__title em {
    font-style: normal;
    color: var(--color-primary);
}
body.cg-b .section-intro__title em { color: var(--color-lime); }
.section-intro__caption {
    margin-top: 12px;
    font: var(--fw-light) var(--fs-sm) / 1.4 var(--font-family-base);
    color: var(--color-text-sub);
}

/* --------------------------------------------------------------------------
   10. 햄버거 드로어
   -------------------------------------------------------------------------- */
.drawer-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-drawer);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-base);
}
.drawer-dim.is-open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 220px;
    max-width: 75vw;
    height: 100vh;
    background: #fff;
    z-index: calc(var(--z-drawer) + 1);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    padding: 0;
}
.drawer.is-open { transform: translateX(0); }

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px 18px;
    font: var(--fw-medium) var(--fs-md) / 1 var(--font-family-base);
    color: var(--color-primary);
}
.drawer__close {
    width: 22px; height: 22px;
    background: url("/img/new/icon_close01.png") center/contain no-repeat;
    opacity: 0.9;
}
.drawer__menu { padding: 0 18px; }
.drawer__item {
    display: block;
    padding: 14px 4px;
    font: var(--fw-regular) var(--fs-base) / 1 var(--font-family-base);
    color: var(--color-text-hero);
    border-bottom: 1px solid var(--color-border-hair);
}
.drawer__item:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. 카드: 종목 리스트
   -------------------------------------------------------------------------- */
.stock-card-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: var(--card-pad-x);
}

.stock-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* box-shadow: var(--shadow-card); */
}

.stock-card__body   { flex: 1 1 auto; padding-right: 10px; min-width: 0; }
.stock-card__name {
    font: var(--fw-bold) var(--fs-md) / 1.2 var(--font-family-base);
    color: var(--color-text-hero);
    margin-bottom: 4px;
}
.stock-card__tags {
    font: var(--fw-medium) var(--fs-sm) / 1.3 var(--font-family-base);
    color: var(--color-primary);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
body.cg-b .stock-card__tags { color: var(--color-lime-600); }

.stock-card__desc {
    font: var(--fw-light) var(--fs-sm) / 1.45 var(--font-family-base);
    color: var(--color-text-sub);
}
.stock-card__icon {
    flex-shrink: 0;
    width: 64px; height: 64px;
    background: #fff center/contain no-repeat;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   12. 종목 / ETF 아이콘 (개별 PNG 16종)
   기본: 원형 배경 + 중앙에 아이콘. 컨텍스트별(리스트/상세/투자행 등) 배경색은
   --icon-bg CSS 변수로 override 가능.
   -------------------------------------------------------------------------- */
.stock-icon,
.etf-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--icon-bg, #FFFFFF);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 투자 행 / 리스트 카드에서 사용되는 기본 흰 배경 + 얕은 그림자 (Figma 원본 재현) */
.stock-card .stock-icon,
.stock-card .etf-icon,
.invest-row .stock-icon,
.invest-row .etf-icon,
.news-highlight .stock-icon,
.news-highlight .etf-icon {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.stock-card .stock-icon {
    background-color: #F1F2F2;
}

/* 히어로 카드 내부 아이콘 — 투명 배경 (카드 자체가 컬러 블록) */
.hero-card .stock-icon,
.hero-card .etf-icon {
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

/* Group A — 국내주식 (8종) */
.stock-icon.t1 { background-image: url("/img/new/icon_company_A01.png"); }  /* 네오칩스 */
.stock-icon.t2 { background-image: url("/img/new/icon_company_A02.png"); }  /* 누리자동차 */
.stock-icon.t3 { background-image: url("/img/new/icon_company_A03.png"); }  /* 스마트건설 */
.stock-icon.t4 { background-image: url("/img/new/icon_company_A04.png"); }  /* 뷰티무드 */
.stock-icon.t5 { background-image: url("/img/new/icon_company_A05.png"); }  /* 로보테크 */
.stock-icon.t6 { background-image: url("/img/new/icon_company_A06.png"); }  /* 에이원바이오 */
.stock-icon.t7 { background-image: url("/img/new/icon_company_A07.png"); }  /* 알파로직 */
.stock-icon.t8 { background-image: url("/img/new/icon_company_A08.png"); }  /* 지메타게임즈 */

/* Group B — 글로벌ETF (8종) — 국기/지구본. 원형 배경 불필요하므로 border-radius만 유지 */
.etf-icon {
    background-color: transparent;
    background-size: contain;
}
.etf-icon.t1 { background-image: url("/img/new/icon_company_B01.png"); }   /* 🇺🇸 */
.etf-icon.t2 { background-image: url("/img/new/icon_company_B02.png"); }   /* 🇰🇷 */
.etf-icon.t3 { background-image: url("/img/new/icon_company_B03.png"); }   /* 🇨🇳 */
.etf-icon.t4 { background-image: url("/img/new/icon_company_B04.png"); }   /* 🌍 EU */
.etf-icon.t5 { background-image: url("/img/new/icon_company_B05.png"); }   /* 🇮🇳 */
.etf-icon.t6 { background-image: url("/img/new/icon_company_B06.png"); }   /* 🇻🇳 */
.etf-icon.t7 { background-image: url("/img/new/icon_company_B07.png"); }   /* 🌍 K-BATTERY */
.etf-icon.t8 { background-image: url("/img/new/icon_company_B08.png"); }   /* 🇺🇸 */

/* --------------------------------------------------------------------------
   13. 히어로 카드 (종목/ETF 상세 상단) — Figma 원본: 수직 그라데이션 (위 진한 → 아래 연한)
   -------------------------------------------------------------------------- */
.hero-card {
    position: relative;
    padding: 28px 100px 28px 24px;   /* 우측은 아이콘 공간 */
    border-radius: 10px;
    background: linear-gradient(0deg, #FFFFFF 0%, #FCD5A9 41%, #F89728 100%);
    color: #fff;
    margin: 0 var(--card-pad-x);
    overflow: visible;
    min-height: 140px;
    /* box-shadow: 0 6px 16px rgba(248, 151, 40, 0.18); */
}
body.cg-b .hero-card {
    padding: 28px 24px;   /* 우측은 아이콘 공간 */
    background: linear-gradient(0deg, #FFFFFF 0%, #E8EFA9 41%, #C8D92A 100%);
    /* box-shadow: 0 6px 16px rgba(200, 217, 42, 0.22); */
}

.hero-card__name  {
    font: var(--fw-xbold) 28px / 1 var(--font-family-base);
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.hero-card__desc  {
    font: var(--fw-medium) 16px / 1.45 var(--font-family-base);
    color: #231F20;
}
.hero-card__icon-wrap {
    position: absolute;
    top: 15px; right: 15px;
    width: 76px; height: 76px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.hero-card__icon-wrap img {
    object-fit: contain;
}

body.cg-b .hero-card__icon-wrap {
    display: none;
}

/* --------------------------------------------------------------------------
   14. 본문 설명 + 불릿
   -------------------------------------------------------------------------- */
.article {
    padding: 24px var(--article-pad-x);
    color: var(--color-text-sub);
    font: var(--fw-light) var(--fs-base) / 1.7 var(--font-family-base);
    line-height: 1.5;
}
.article p + p { margin-top: 14px; }

.article-specs {
    color: var(--color-text-black);
    padding: 30px calc(var(--page-pad-x) + 10px);
    background-color: var(--color-bg-company);
    font-size:var(--fs-base);
    line-height:1.3;
}

.article-specs > li {
    position:relative;
    display:block;
    padding-left: 15px;
    margin-top:8px;
}
.article-specs > li:first-child {
    margin-top:0;
}

.article-specs > li:before {
    position:absolute;
    left:0;
    top: calc(var(--fs-base) * 1.3 / 2);
    display:block;
    content:"";
    width:4px;
    height:4px;
    border-radius:100%;
    background-color:var(--color-primary);
}
body.cg-b .article-specs > li:before {
    background-color:var(--color-lime);
}

.bullet-list {
    padding: 0 var(--card-pad-x);
    margin-top: 8px;
}
.bullet-list li {
    position: relative;
    padding-left: 16px;
    font: var(--fw-regular) var(--fs-base) / 1.6 var(--font-family-base);
    color: var(--color-text-hero);
    margin-bottom: 8px;
}
.bullet-list li::before {
    content: "";
    position: absolute;
    top: 10px; left: 0;
    width: 6px; height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}
body.cg-b .bullet-list li::before { background: var(--color-lime); }

/* --------------------------------------------------------------------------
   15. 재무정보 테이블 (주식 5필드 / ETF 8필드)
       라벨 컬럼에 그룹 테마 소프트 배경 적용 (그룹A=주황soft / 그룹B=라임soft)
   -------------------------------------------------------------------------- */
.finance-table {
    width: 100%;
    margin: 30px 0;
    background: #fff;
    border-top: 1px solid  #A0A0A0;
    border-bottom: 1px solid  #A0A0A0;
    /*border-radius: var(--radius-md);*/
    overflow: hidden;
}
.finance-table__row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
    font: var(--fw-regular) var(--fs-md) / 1.3 var(--font-family-base);
    color: var(--color-text-hero);
}
.finance-table__row:last-child { border-bottom: 0; }
.finance-table__label {
    flex: 0 0 45%;
    padding: 14px 16px;
    background: var(--color-bg-company);
    font-weight: var(--fw-regular);
}
.finance-table__value {
    flex: 1;
    padding: 14px 16px;
    font-weight: var(--fw-light);
    color: var(--color-text-body);
    /*text-align: right;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 그룹B — 라임 soft */
body.cg-b .finance-table__label { background: #F5F8D6; }

/* --------------------------------------------------------------------------
   16. 차트 영역 (순수 CSS mock — Chart.js 도입 전 placeholder)
   -------------------------------------------------------------------------- */
.chart-card {
    margin: 24px 0;
    padding: 0;
    background: transparent;
}
.chart-mock {
    position: relative;
    height: 200px;
    background:
        linear-gradient(to top, var(--color-border-soft) 1px, transparent 1px) 0 0 / 100% 25%,
        #fff;
}
.chart-mock__line {
    position: absolute; inset: 10px 20px 24px 40px;
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-8deg);
    transform-origin: bottom left;
}
.chart-mock__x,
.chart-mock__y {
    position: absolute;
    font: var(--fw-regular) var(--fs-caption) / 1 var(--font-family-num);
    color: var(--color-text-hero);
}
.chart-mock__y { left: 4px; }
.chart-mock__x { bottom: 4px; }

/* --------------------------------------------------------------------------
   17. 시장지표 카드 (2×2 grid)
   -------------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 1.5vh var(--card-pad-x);
}
.kpi {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 10px 12px 12px;
    min-height: 68px;
}
.kpi__label {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font: var(--fw-bold) var(--fs-base) / 1 var(--font-family-base);
    color: var(--color-text-title);
    margin-bottom: 8px;
}
.kpi__help {
    width: 13px; height: 13px;
    background: url("/img/new/icon_help01.png") center/contain no-repeat;
    opacity: 0.7;
}
.kpi__value {
    font: var(--fw-regular) var(--fs-base) / 1 var(--font-family-num);
    color: var(--color-down);
    letter-spacing: -0.01em;
    text-align:center;
}
.kpi__unit { font-size: var(--fs-xs); color: var(--color-text-muted); margin-left: 4px; }

/* --------------------------------------------------------------------------
   18. 하이라이트 카드 + NEWS 배너 — Figma 24:2094 재현
       원형 아이콘 배경 + 가벼운 그림자, NEWS 배지는 우측 상단에 돌출
   -------------------------------------------------------------------------- */
.news-highlight {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 var(--card-pad-x);
    /*padding: 20px 80px 20px 14px;*/
    padding: 20px calc(var(--page-pad-x) + 80px) 20px calc(var(--page-pad-x) + 14px);
    background: #fff;
    /* border: 1px solid #EAEAEA; */
    border-radius: var(--radius-lg);
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.04); */
    height:125px;
}
.news-highlight .stock-icon,
.news-highlight .etf-icon {
    width: 30px; height: 30px;
    background-color: #E6E7E8;
}
.news-highlight__body   { flex: 1; min-width: 0; }
.news-highlight__title  {
    display:flex;
    gap:10px;
    justify-content: flex-start;
    align-items: center;
    font: var(--fw-bold) var(--fs-lg) / 1.2 var(--font-family-base);
    color: #000;
    margin-bottom: 4px;
}
.news-highlight__title > span {
    display:block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-highlight__desc   {
    font: var(--fw-light) var(--fs-sm) / 1.45 var(--font-family-base);
    line-height: calc(var(--fs-sm) * 1.5);
    height: calc(var(--fs-sm) * 1.5 * 2);
    color: var(--color-text-sub);
    margin-top:10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

}
.news-highlight__badge  {
    position: absolute;
    top: 50%; right: calc(var(--page-pad-x) + 8px);
    transform: translateY(-50%);
    width: 64px; height: 56px;
    background: url("/img/new/icon_news01.png") center/contain no-repeat;
}

/* Pagination dots */
.pagination-dots {
    display: flex; justify-content: center; align-items: center; gap: 6px;
    padding: 2vh 0;
}
.pagination-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-border);
}
.pagination-dots i.active {
    width: 18px; height: 6px; border-radius: 3px;
    background: var(--color-primary);
}
body.cg-b .pagination-dots i.active{
    background: var(--color-lime);
}

/* --------------------------------------------------------------------------
   19. 투자 입력 행 (스텝퍼) — Figma 24:2094 기준 비율 재조정
       stock(1.75) | stepper(0.75) | amount(1.2) — 종목이 가장 넓음
   -------------------------------------------------------------------------- */
.invest-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.7fr) minmax(0, 1.1fr);
    gap: 5px;
    margin: 0 var(--card-pad-x) 6px;
}
.invest-row__cell {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    min-height: 90px;
    display: flex;
    align-items: center;
}

/* 종목 셀: 아이콘 + (이름 / 가격) */
.invest-row__stock {
    display: flex; align-items: center; gap: 10px;
    min-width: 0; width: 100%;
}
.invest-row__stock .stock-icon{
    width: 40px; height: 40px;
    background-color: #F1F2F2;
    margin-left:5px;
    flex-shrink: 0;
}
.invest-row__stock .etf-icon {
    display:none;
}

.invest-row__stock > div { 
    min-width: 0; 
    flex: 1; 
}
.invest-row__stock > div.etf { 
    text-align:center;
}
.invest-row__name  {
    font: var(--fw-medium) 14px / 1.2 var(--font-family-base);
    color: #000;
    margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invest-row__price {
    font: var(--fw-medium) 16px / 1.1 var(--font-family-num);
    color: #000;
    white-space: nowrap;
}

/* 스텝퍼 셀: 라벨 상단, 값 중앙, ▲▼ 우측 */
.stepper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    text-align: center;
    height: 100%;
}
.stepper__label {
    font: var(--fw-medium) 13px / 1 var(--font-family-base);
    color: var(--color-text-body);
}
.stepper__value {
    font: var(--fw-medium) 22px / 16px var(--font-family-num);
    color: #000;
    margin-top: 10px;
    padding-right:10px;
}
.stepper__ctrl {
    position: absolute;
    right: -5px;
    top: 46%;
    transform: translateY(-10%);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stepper__btn {
    width: 20px; height: 20px;
    display: block;
    position: relative;
    cursor: pointer;
}
.stepper__btn::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform:translate(-50%,-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.stepper__btn--up::before    { border-bottom: 7px solid #333; }
.stepper__btn--down::before  { border-top:    7px solid #333; }

/* 금액 셀 */
.invest-row__amount {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.invest-row__amount .stepper__label {
    left: 10px;
    right: auto;
    text-align: left;
}
.invest-row__amount-value {
    font: var(--fw-medium) 16px / 1 var(--font-family-num);
    color: var(--color-up);
    white-space: nowrap;
}
.invest-row__amount-value:empty::before { content: "\00a0"; }

/* 투자 가능 금액 바 — Figma 실물: "1분기 투자 가능 금액"·금액 모두 주황 */
.capital-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin: 0 var(--card-pad-x);*/
    padding: 3vh 0;
    border-top: 1px solid var(--color-border);
    font: var(--fw-bold) var(--fs-lg) / 1 var(--font-family-base);
}
.capital-bar__label      { color: var(--color-text-title); }
.capital-bar__label .q   { color: var(--color-text-value); }
.capital-bar__value      { color: var(--color-text-value); font-family: var(--font-family-num); }
body.cg-b .capital-bar__label,
body.cg-b .capital-bar__label .q,
body.cg-b .capital-bar__value { color: var(--color-lime); }

/* --------------------------------------------------------------------------
   20. 뉴스 팝업 (모달)
   -------------------------------------------------------------------------- */
.modal-dim {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-base);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}
.modal-dim.is-open { opacity: 1; pointer-events: auto; }

/* 뉴스 팝업 — Figma 29:7462 (그룹A) / 24:5821 (그룹B) 정밀 재현
   · 팝업 배경: 흰색 #FFFFFF
   · 상단 22.5% (≈122px on 541px popup) 에 컬러 밴드:
     - 그룹A: PEACH 그라데이션 (imgVector1: 위 짙은 peach → 아래 연한 peach/흰)
     - 그룹B: 솔리드 LIME #C8D92A
   · 태그:
     - A: "종목명"  #F89728 주황, 30px Bold, 아이콘+텍스트
     - B: "[국가] ETF명"  #C8D92A 라임, 20.96px Bold
   · 헤드라인: 검정 17px Bold
   · 본문: #626262 Light 14.67px */

.news-popup {
    width: 100%;
    /*max-width: 327px;*/
    background: #FFFFFF;
    border-radius: 22px;
    position: relative;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
    padding: 0;
    overflow: hidden;
    /*margin-top: 30px;*/
}

/* 상단 컬러 밴드 — 22.5% 고정 비율로 표현 (::before 오버레이) */
.news-popup::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 122px;
    z-index: 0;
    opacity:0.5;
    /* Group A 기본: peach 그라데이션 */
    background: linear-gradient(0deg,
        #F89728 0%,
        #F89E37 11%,
        #F9B15F 32%,
        #FBD1A1 62%,
        #FEFCF9 98%,
        #FFFFFF 100%);
}
body.cg-b .news-popup::before,
.cg-b-news .news-popup::before {
    background: linear-gradient(0deg,
        #C8D92A 0%,
        #CBDB39 11%,
        #D6E261 33%,
        #E7EEA3 62%,
        #FEFEFB 99%,
        #FFFFFF 100%);
}

/* 상단 영역 — NEWS 아이콘 수용 (122px 밴드와 동일 높이) */
.news-popup__header {
    height: 122px;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* 닫기 X — 팝업 우상단 */
.news-popup__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 22px; height: 22px;
    background: url("/img/new/icon_close01.png") center/contain no-repeat;
    z-index: 3;
}
.news-popup__close:hover {
    filter: brightness(0.3);
}

/* NEWS 아이콘 — 밴드(122px) 내부 상단 중앙, 위로 약간 돌출 */
.news-popup__badge {
    position: absolute;
    top: 13px; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 96px;
    background: url("/img/new/icon_news01.png") center/contain no-repeat;
    z-index: 3;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
}

.news-popup__body {
    padding: 0 26px 28px;
    position: relative;
    z-index: 1;
}

/* 종목 태그 — 그룹A 기본값: 주황 30px Bold + 좌측 아이콘 */
.news-popup__tag {
    font-size:21px;
    font-weight: var(--fw-bold);
    font-family: var(--font-family-base);
    color: var(--color-primary);   /* #F89728 주황 */
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: -0.02em;
}
/* 그룹B: 라임 색상 + 작은 폰트, 아이콘 없음 */
body.cg-b .news-popup__tag,
.cg-b-news .news-popup__tag {
    color: var(--color-lime);     /* #C8D92A 라임 */
}

/* 아이콘 (그룹A에서만 사용) */
.news-popup__tag .tag-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background-color: #E6E7E8;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.news-popup__title {
    font: var(--fw-bold) 17px / 1.5 var(--font-family-base);
    color: #000000;
    margin-bottom: 14px;
    text-align: left;
    letter-spacing: -0.02em;
}

.news-popup__content {
    font: var(--fw-light) 14.67px / 1.7 var(--font-family-base);
    color: #626262;
    background: transparent;
    padding: 0;
}
.news-popup__content p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   21. 시상대 포디움 — 원본 디자인 재현 (img-1776437459081-1)
     · 3개 막대 동일 폭 (~104px), 간격 2px
     · 전체 4개 모서리 라운드 (부드러운 카드 블록 느낌)
     · 높이: 1등 268 / 2등 214 / 3등 178 (바닥선 정렬)
     · 트로피는 1등 바 안쪽 상단에 위치
   -------------------------------------------------------------------------- */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 20px 16px 24px;
}
.podium__col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 104px;
    flex-shrink: 0;
}
.podium__bar {
    position: relative;
    width: 100%;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;    /* 컨텐츠를 바닥 정렬 */
    padding: 20px 10px 22px;
    text-align: center;
    gap: 4px;
}
.podium__bar .rank {
    font: var(--fw-bold) 24px / 1 var(--font-family-base);
    color: #1D1D1B;
    letter-spacing: -0.02em;
}
.podium__bar .id {
    font: var(--fw-regular) 16px / 1 var(--font-family-num);
    color: #8F8A8B;
}
.podium__bar .yield {
    font: var(--fw-bold) 18px / 1 var(--font-family-base);
    color: var(--color-up);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.podium__col--first  .podium__bar { background: var(--color-podium-1); height: 180px; }
.podium__col--second .podium__bar { background: var(--color-podium-2); height: 150px; }
.podium__col--third  .podium__bar { background: var(--color-podium-3); height: 120px; }

/* 트로피 — 1등 바 안쪽 상단 */
.podium__col--first .podium__trophy {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 64px;
    background: url("/img/new/icon_trophy01.png") center/contain no-repeat;
    z-index: 1;
}
.podium__col:not(.podium__col--first) .podium__trophy { display: none; }

@media (max-width: 359px) {
    .podium { gap: 2px; padding: 16px 8px 20px; }
    .podium__col { width: 30vw; max-width: 104px; }
}

/* --------------------------------------------------------------------------
   22. 랭킹 테이블 — Figma 13:8650 재현
       "1. 102221"  "4,500,500원 (▲50.5%)"  — 우측 값 전체가 색상
   -------------------------------------------------------------------------- */
.rank-table {
    margin: 18px var(--card-pad-x);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}
.rank-table__head {
    padding: 12px 18px;
    font: var(--fw-regular) var(--fs-rank) / 1 var(--font-family-base);
    color: #000;
    background: var(--color-bg-table-head);
    border-bottom: 1px solid var(--color-border-soft);
    text-align: right;
}
.rank-table__row {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--color-border-soft);
    font: var(--fw-light) 15.5px / 1.2 var(--font-family-base);
}
.rank-table__row:last-child { border-bottom: 0; }
.rank-table__id    {
    flex: 0 0 40%;
    color: #000;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family-num);
}
.rank-table__value {
    flex: 1;
    text-align: right;
    font-family: var(--font-family-num);
    color: var(--color-text-body);
    display: inline-flex;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}
.rank-table__value.up   { color: var(--color-up); }
.rank-table__value.down { color: var(--color-down); }
.rank-table__value.empty {
    color: var(--color-text-sub);
    font-family: var(--font-family-base);
}

/* --------------------------------------------------------------------------
   23. 리포트 페이지 컴포넌트
   -------------------------------------------------------------------------- */
.report-date {
    text-align: center;
    padding: 18px 0 8px;
    font: var(--fw-regular) var(--fs-lg) / 1 var(--font-family-num);
    color: #000;
}

.report-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 16px var(--card-pad-x);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.report-summary__cell {
    padding: 20px 16px;
    text-align: center;
    position: relative;
}
.report-summary__cell + .report-summary__cell::before {
    content: "";
    position: absolute;
    top: 16px; bottom: 16px;
    left: 0;
    width: 1px;
    background: var(--color-border-soft);
}
.report-summary__label {
    font: var(--fw-medium) var(--fs-rank) / 1 var(--font-family-base);
    color: var(--color-down);
    margin-bottom: 10px;
}
.report-summary__value {
    font: var(--fw-bold) var(--fs-rank) / 1.2 var(--font-family-num);
    color: var(--color-down);
    margin-bottom: 6px;
}
.report-summary__yield {
    font: var(--fw-medium) var(--fs-rank) / 1 var(--font-family-base);
    color: var(--color-up);
}

.report-qcards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px var(--card-pad-x);
}
.qcard {
    position: relative;
    padding: 14px 14px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}
.qcard--up   { background: var(--color-up-soft);   border-color: #F8C9CD; }
.qcard--down { background: var(--color-down-soft); border-color: #BBDDF3; }

/* "1R 1분기": 상단 (최고=빨강 / 아쉬운=파랑) */
.qcard__flag {
    font: var(--fw-bold) var(--fs-rank) / 1 var(--font-family-base);
    margin-bottom: 0;
}
.qcard--up   .qcard__flag { color: var(--color-up); }
.qcard--down .qcard__flag { color: var(--color-down); }

/* 이모지: 우상단, 좀 더 크게 */
.qcard__emoji {
    position: absolute;
    top: 0; right: 0;
    width: 100px; height: 100px;
    background-size: contain; background-repeat: no-repeat; background-position: right bottom;
}
.qcard--up   .qcard__emoji { background-image: url("/img/new/icon_report01_happy.png"); }
.qcard--down .qcard__emoji { background-image: url("/img/new/icon_report01_sad.png"); }

/* 중간 라벨 "최고의 선택" / "아쉬운 선택" — 이모지 아래로 밀어내기 위해 margin-top */
.qcard__label {
    font: var(--fw-medium) var(--fs-caption) / 1 var(--font-family-base);
    color: var(--color-text-sub);
    margin-top: auto;
    margin-bottom: 8px;
}

/* 본문: 종목명 : ▲수익률 한 줄 */
.qcard__body {
    font: var(--fw-bold) 15px / 1.3 var(--font-family-base);
    color: var(--color-text-hero);
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.qcard__body > span {display:block;}
.qcard__body .up   { color: var(--color-up); }
.qcard__body .down { color: var(--color-down); }

/* --------------------------------------------------------------------------
   24. 수업 코드 공유 (강사페이지)
   -------------------------------------------------------------------------- */
.classcode-placeholder {
    margin: 16px var(--card-pad-x);
    padding: 24px 16px;
    background: var(--color-bg-placeholder);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-text-muted);
    font: var(--fw-bold) 30px / 1 var(--font-family-base);
}
.classcode-placeholder.waiting {
    font-size: var(--fs-sm);
}

.share-banner {
    margin: 18px var(--card-pad-x) 0;
    background: var(--color-lime);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 12px 16px;
    text-align: center;
    font: var(--fw-bold) var(--fs-lg) / 1 var(--font-family-base);
    color: #fff;
}
.share-body {
    margin: 0 var(--card-pad-x);
    background: #F9FBE9;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 22px 20px 24px;
    display: flex;
    justify-content: space-around;
}
.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
}
.share-btn__icon {
    width: 45px; height: 45px;
    border-radius: 50%;
    background: #fff center/28px 28px no-repeat;
    display: block;
}
.share-btn--copy  .share-btn__icon { background-color: var(--color-share-copy);  background-image: url("/img/new/icon_share01_copy.png"); background-size: 100% 100%; }
.share-btn--kakao .share-btn__icon { background-color: var(--color-share-kakao); background-image: url("/img/new/icon_share01_kakao.png"); background-size: 100% 100%; }
.share-btn--sms   .share-btn__icon { background-color: var(--color-share-sms);   background-image: url("/img/new/icon_share01_sms.png"); background-size: 100% 100%; }
.share-btn__label {
    font: var(--fw-regular) var(--fs-share) / 1 var(--font-family-base);
    color: #282828;
}

/* --------------------------------------------------------------------------
   25. 수업 관리 (강사)
   -------------------------------------------------------------------------- */
.quarter-list  { padding: 12px var(--card-pad-x); }
.quarter-item  { padding: 14px 0; /*border-bottom: 1px solid var(--color-border-soft);*/ }
.quarter-item:last-child { border-bottom: 0; }
.quarter-item__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.quarter-item__label {
    font: var(--fw-regular) var(--fs-base) / 1 var(--font-family-base);
    color: var(--color-text-title);
}
.quarter-item__link {
    font: var(--fw-regular) var(--fs-base) / 1 var(--font-family-base);
    color: var(--color-text-body);
}
/* chevron 제거 — Figma 원본은 순수 텍스트 */

.quarter-item__actions { display: flex; gap: 10px; }
.quarter-item__actions .btn {
    flex: 1;
    height: 44px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   26. 투자 현황 모달 테이블
   -------------------------------------------------------------------------- */
.status-table {
    margin: 0 var(--card-pad-x);
    background: #fff;
    border: 1px solid var(--color-border);
    /*border-radius: var(--radius-md);*/
    overflow: hidden;
}
.status-table__row {
    display: grid;
    grid-template-columns: 0.5fr 1.1fr 1.0fr 1.3fr 0.8fr;
    align-items: center;
    padding: 10px 8px;
    font: var(--fw-regular) 13px / 1.2 var(--font-family-base);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-soft);
    text-align: center;
}
.status-table__row.t2 {
    grid-template-columns: 0.7fr 1.4fr 1.4fr 1fr;
}
.status-table__row:last-child { border-bottom: 0; }
.status-table__row--head {
    background: var(--color-bg-table-head);
    color: #000;
    font-weight: var(--fw-bold);
}
.status-table__row--blank { min-height: 20px; }
.status-table__row--blank > div { /*visibility: hidden;*/ }

/* --------------------------------------------------------------------------
   27. 유틸리티
   -------------------------------------------------------------------------- */
.u-sr-only  {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.u-center   { text-align: center; }
.u-right    { text-align: right; }
.u-hidden   { display: none !important; }
.u-mt-4     { margin-top: 16px; }
.u-mt-6     { margin-top: 24px; }
.u-mb-4     { margin-bottom: 16px; }
.u-mb-6     { margin-bottom: 24px; }
.u-px-4     { padding-left: 16px; padding-right: 16px; }
.u-block    { display: block; }
.u-flex     { display: flex; }
.u-gap-2    { gap: 8px; }
.u-divider  { height: 1px; background: var(--color-border-soft); margin: 16px var(--card-pad-x); }

/* --------------------------------------------------------------------------
   28. 반응형 미세 조정
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
    .page-title,
    .page-title--lg { font-size: 24px; }
    .section-intro__title { font-size: 22px; }
    .hero-card__name { font-size: 24px; }
    .btn { font-size: 17px; padding: 0 14px; }
    .btn-pair { gap: 8px; }
    .kpi__label { font-size: 13px; }
    .kpi__value  { font-size: 14px; }
    .invest-row { gap: 4px; }
    .invest-row__cell { padding: 6px 8px; }
    .invest-row__name { font-size: 13px; }
    .invest-row__price { font-size: 14px; }
    .stepper__label { font-size: 12px; }
    .stepper__value { font-size: 18px; margin-top: 14px; }
    .invest-row__amount-value { font-size: 14px; }
    .capital-bar { font-size: 17px; padding: 12px 2px; }
    .qcard { padding: 12px 10px; min-height: 140px; }
    .qcard__flag { font-size: 15px; }
    .qcard__body { font-size: 14px; }
    .qcard__emoji { width: 56px; height: 56px; }
    .finance-table__row { font-size: 15px; }
    .finance-table__label,
    .finance-table__value { padding: 12px 12px; }
    .quarter-item__actions .btn { font-size: 15px; padding: 0 8px; }
    .podium__col { width: 30vw; }
}

@media (max-width: 339px) {
    .podium__bar .rank { font-size: 20px; }
    .podium__bar .yield { font-size: 14px; }
    .podium__bar { padding: 12px 4px 10px; }
    .podium__col--first  .podium__bar { height: 160px; }
    .podium__col--second .podium__bar { height: 130px; }
    .podium__col--third  .podium__bar { height: 100px; }
}

/*
@media (min-width: 641px) {
    .page { box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); }
}
*/

/* =========================================================================
 * §4.5.1 디자인 시스템 보강 (Phase 2, 검증 라운드 2 반영)
 * ========================================================================= */

.body-text--sub {
    color: var(--color-text-sub);
    font-weight: var(--fw-light);
    padding-bottom: 20px;
}

.field__help--inline {
    display: inline-block;
    width: 18px; height: 18px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
    background: url('../img/icon_help01.png') center/contain no-repeat;
}

.stock-card__tag {
    display: inline-block;
    margin: 0 6px 4px 0;
    padding: 2px 8px;
    font-size: var(--fs-xs);
    color: var(--color-text-sub);
    background: var(--color-bg-soft);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.quarter-item.is-done { opacity: 0.55; }
.quarter-item.is-active .quarter-item__label {
    color: var(--color-theme);
    font-weight: var(--fw-bold);
}

.chart-card {
    height: 240px;
    /*padding: 12px;*/
    background: #fff;
    /*border: 1px solid var(--color-border);*/
    /*border-radius: var(--radius-lg);*/
    position: relative;
}
.chart-card canvas { width: 100% !important; height: 100% !important; }

.news-popup {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.page-title--primary { color: var(--color-primary); }

.news-highlight-slider {
    position: relative;
    /* margin: 12px 0; */
    background-color: var(--color-bg);
    height:125px;
    overflow-y : hidden;
    /*padding: 0 var(--page-pad-x) !important;*/
}


#news-slider .news-highlight.swiper-slide { margin: 0; height: 125px; }
#news-pagination { position: static; display:flex; justify-content:center; align-items:center; gap:6px; padding: 2vh 0; }
#news-pagination .swiper-pagination-bullet { width:6px; height:6px; margin:0; border-radius:50%; background:var(--color-border); opacity:1; }
#news-pagination .swiper-pagination-bullet-active { width:18px; height:6px; border-radius:3px; background:var(--color-primary); }
body.cg-b #news-pagination .swiper-pagination-bullet-active { background:var(--color-lime); }

.rank-table__value.flat,
.status-table__row .flat {
    color: var(--color-text-muted);
}

details.article > summary {
    cursor: pointer;
    font: var(--fw-bold) var(--fs-base)/1.4 var(--font-family-base);
    color: var(--color-text-hero);
    padding: 8px 0;
    list-style: none;
}
details.article > summary::after {
    content: '▾';
    float: right;
    color: var(--color-text-muted);
}
details[open].article > summary::after { content: '▴'; }

@media (max-width: 359px) {
    .status-table__row { font-size: 11px; padding: 8px 4px; gap: 2px; }
    .modal-dim { padding: 12px; }
}

/*================================================================================================
 * Modal Style
 *================================================================================================*/
.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
.fade.in {
    opacity: 1;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-content {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #999999;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-title {
    margin: 0;
    line-height: 1.42857143;
}
.modal-body {
    position: relative;
    padding: 20px;
    line-height: 25px;
}
.modal-footer {
    padding: 20px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.modal .btn {
    border-width: 2px;
}
.modal .btn-default {
    color: #ffffff;
    background-color: #95a5a6;
    border-color: #95a5a6;
}
.modal .btn-default:hover {color:#ffffff;background-color:#798d8f;border-color:#74898a}
.modal .btn-primary {
    color: #ffffff;
    background-color: #2c3e50;
    border-color: #2c3e50;
}
.modal .btn-primary:hover {color:#ffffff;background-color:#1a242f;border-color:#161f29}

@media (min-width: 768px)
{
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}
.modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0);
}
.modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50);
}