@charset "utf-8";

/* NAU GOLD 메인 — Figma 시안(main, node 1:2) 구조·카피·타이포 기준 (MCP get_design_context 텍스트 노드 기준 px) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700;800&display=swap");

.nau-main {
    --nau-gold: #c9a227;
    --nau-gold-soft: #e8d48a;
    --nau-ink: #0f0f0f;
    --nau-heading: #171c22;
    --nau-charcoal: #1a1a1a;
    --nau-muted: #6b6b6b;
    --nau-line: #e6e6e6;
    --nau-up: #e53935;
    --nau-down: #1e88e5;
    --nau-card: #fff;
    /* rem: common.css html 62.5% → 1rem = 10px. Figma px ÷10 = rem (--fs-* 와 동일 체계) */
    --nau-fs-hero-en: clamp(2.8rem, 3.5vw, var(--fs-36, 3.6rem));
    --nau-fs-hero-ko: clamp(3rem, 3.8vw, 3.8rem);
    --nau-fs-hero-body: clamp(1.6rem, 1.8vw, var(--fs-18, 1.8rem));
    --nau-fs-hero-price: clamp(4rem, 6vw, var(--fs-56, 5.6rem));
    --nau-fs-hero-meta: var(--fs-18, 1.8rem);
    --nau-fs-section-ko: var(--fs-18, 1.8rem);
    /* Figma 1:57 Live Market Prices — 32px = 3.2rem */
    --nau-fs-section-en: clamp(2.4rem, 3.2vw, var(--fs-32, 3.2rem));
    --nau-fs-card-ko: clamp(2.2rem, 2.6vw, var(--fs-26, 2.6rem));
    --nau-fs-card-en: clamp(1.2rem, 1.4vw, 1.4rem);
    --nau-fs-num: var(--fs-16, 1.6rem);
    --nau-fs-body: clamp(1.5rem, 1.6vw, var(--fs-18, 1.8rem));
    --nau-fs-caption: clamp(1.4rem, 1.5vw, var(--fs-16, 1.6rem));
    --nau-fs-index-name: var(--fs-16, 1.6rem);
    --nau-fs-index-val: clamp(2rem, 2.6vw, var(--fs-24, 2.4rem));
    --nau-fs-banner-title: clamp(3rem, 4vw, var(--fs-42, 4.2rem));
    font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
    color: var(--nau-ink);
}

/* ----- Header (main.php 전용) ----- */
.main-header { position: absolute; left: 0; top: 0; width: 100%; z-index: 40; pointer-events: none; }
.main-header__inner {
    width: 96%;
    max-width: 1320px;
    margin: 0 auto;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.main-header__logo { display: inline-flex; align-items: center; width: 186px; line-height: 0; }
.main-header__logo { pointer-events: auto; }
.main-header__logo-svg { display: block; width: 100%; }
.main-header__logo-svg svg { display: block; width: 100%; height: auto; }
.main-header__util { pointer-events: auto; }
.main-header__util { display: flex; align-items: center; gap: 16px; color: #fff; }
.main-header__lang { font-size: 14px; color: rgba(255,255,255,.75); font-weight: 500; }
.main-header__lang--active { color: #fff; font-weight: 700; }
.main-header__menu { width: 35px; height: 35px; display: none; align-items: center; justify-content: center; color: #fff; }
.main-header__menu-ico { width: 20px; height: 14px; position: relative; display: block; }
.main-header__menu-ico > span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; }
.main-header__menu-ico > span:nth-child(1) { top: 0; }
.main-header__menu-ico > span:nth-child(2) { top: 6px; }
.main-header__menu-ico > span:nth-child(3) { top: 12px; }

@media (max-width: 1024px) {
    .main-header__menu { display: inline-flex; }
    .main-header__inner { height: 78px; }
    #gnb-wrap { display: none; }
}

@media (max-width: 768px) {
    .main-header__inner { width: 100%; padding: 0 24px; height: 78px; }
    .main-header__logo { width: 150px; }
}

/* hero spacing: avoid overlapping header & board */
body.main-page .nau-hero .inner { padding-top: calc(5rem + 12rem); }
@media (max-width: 1024px) {
    body.main-page .nau-hero .inner { padding-top: calc(5rem + 7.8rem); }
}

.nau-main #container.main {
    min-height: 100%;
}

.nau-main #contents.contents {
    padding: 0;
}

/* ----- Hero (Figma node 39:344 visual — photo + overlay, 820px, bottom radius 60) ----- */
.nau-hero {
    position: relative;
    min-height: 51.25rem; /* 820px */
    background: var(--nau-charcoal);
    color: #fff;
    overflow: hidden;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.nau-hero__bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(23, 28, 34, 0.75), rgba(23, 28, 34, 0.75)),
        url("/resources/img/main/hero_visual.jpg") center / cover no-repeat;
}

.nau-hero .inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr minmax(16rem, 22rem);
    gap: 2.5rem;
    align-items: center;
    padding: 5rem 0 6.5rem;
}

.nau-hero__copy {
    max-width: 38rem;
}

.nau-hero__en {
    /* Figma 1:56 — Montserrat ExtraBold 36px */
    font-family: Montserrat, "Noto Sans KR", sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-hero-en);
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0 0 0.75rem;
}

.nau-hero__ko-lead {
    /* Figma 1:51 — Pretendard ExtraBold 38px → Noto Sans KR 800 */
    font-size: var(--nau-fs-hero-ko);
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 1rem;
}

.nau-hero__ko-sub {
    /* Figma 1:55 — Pretendard SemiBold 18px */
    font-size: var(--nau-fs-hero-body);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0;
}

.nau-hero__board {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 4px;
    padding: 1.25rem 1.35rem;
    backdrop-filter: blur(8px);
}

.nau-hero__board-time {
    /* Figma 1:61 — Montserrat Regular 18px */
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-hero-meta);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 0.35rem;
}

.nau-hero__board-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nau-hero__board-label {
    font-size: var(--nau-fs-hero-meta);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.nau-hero__board-price {
    /* Figma 1:58 — Montserrat ExtraBold 56px */
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-hero-price);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.nau-hero__board-unit {
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-hero-meta);
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.nau-hero__board-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-hero-meta);
    font-weight: 700;
    color: var(--nau-up);
    margin: 0.5rem 0 0;
}

.nau-hero__board-change--up {
    color: var(--nau-up);
}

.nau-hero__board-change--down {
    color: var(--nau-down);
}

.nau-hero__delta {
    color: var(--nau-up);
    font-weight: 600;
    margin-left: 0.25rem;
}

.nau-hero__delta--down {
    color: var(--nau-down);
}

.nau-hero__board-subgrid {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 0.75rem;
}

.nau-hero__mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--nau-fs-body);
    font-weight: 500;
}

.nau-hero__mini strong {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: var(--nau-fs-num);
}

/* 티커 (도매/매입) */
.nau-ticker {
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
    margin-bottom: 0;
}

.nau-ticker .inner {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 2px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 1rem 1.25rem 1.25rem;
}

.nau-ticker__cap {
    /* Figma 1:88 — Pretendard ExtraBold 18px */
    font-size: var(--nau-fs-section-ko);
    font-weight: 800;
    color: var(--nau-heading);
    margin: 0 0 0.75rem;
}

.nau-ticker__gram {
    margin-left: 1rem;
    font-weight: 600;
    color: var(--nau-ink);
}

.nau-ticker__grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 0.75rem 1.5rem;
    align-items: center;
    font-size: var(--nau-fs-body);
}

.nau-ticker__purity {
    font-weight: 800;
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-num);
}

.nau-ticker__head {
    font-size: var(--nau-fs-caption);
    font-weight: 600;
    color: var(--nau-muted);
}

.nau-ticker__val {
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.nau-ticker__unit {
    font-size: var(--nau-fs-caption);
    color: var(--nau-muted);
    margin-left: 0.25rem;
}

/* ----- Section 공통 ----- */
.nau-section {
    padding: 3.5rem 0;
}

.nau-section--light {
    background: #fafafa;
}

.nau-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.nau-section__title-ko {
    /* Figma 1:54 등 — Pretendard ExtraBold 18px, #171c22 */
    display: block;
    font-size: var(--nau-fs-section-ko);
    font-weight: 800;
    color: var(--nau-heading);
    margin-bottom: 0.25rem;
}

.nau-section__title-en {
    /* Figma 1:57 — Montserrat ExtraBold 32px */
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-section-en);
    color: var(--nau-heading);
    letter-spacing: -0.02em;
}

.nau-section__nav {
    display: flex;
    gap: 0.35rem;
}

.nau-section__nav button {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--nau-line);
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
}

.nau-section__nav button:hover {
    border-color: var(--nau-gold);
    color: var(--nau-gold);
}

/* 실시간 시세 카드 */
.nau-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.nau-card {
    background: var(--nau-card);
    border-radius: 2px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.35rem 1.5rem;
    border: 1px solid #f0f0f0;
}

.nau-card__title-ko {
    /* Figma 1:114 — Pretendard ExtraBold 26px */
    font-size: var(--nau-fs-card-ko);
    font-weight: 800;
    margin: 0 0 0.15rem;
}

.nau-card__title-en {
    /* Figma 1:118 — Montserrat Medium 14px */
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-card-en);
    font-weight: 500;
    color: #000;
    text-transform: capitalize;
    margin: 0 0 1.25rem;
}

.nau-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--nau-fs-body);
    margin-bottom: 0.65rem;
}

.nau-card__row:last-child {
    margin-bottom: 0;
}

.nau-card__label {
    color: var(--nau-muted);
}

.nau-card__price {
    /* Figma 1:119 — Montserrat ExtraBold 16px */
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-num);
}

.nau-card__chg {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-caption);
    font-weight: 700;
}

.nau-card__chg--up {
    color: var(--nau-up);
}

.nau-card__chg--down {
    color: var(--nau-down);
}

/* 매매 프리미엄 */
.nau-premium {
    background: #f3f3f3;
}

.nau-premium__toggle {
    display: inline-flex;
    border-radius: 999px;
    background: #e0e0e0;
    padding: 3px;
    margin-bottom: 0.5rem;
    gap: 0;
}

.nau-premium__toggle button {
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: var(--nau-fs-body);
    font-weight: 700;
    color: var(--nau-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
}

.nau-premium__toggle button.is-active,
.nau-premium__toggle button:focus-visible {
    background: var(--nau-charcoal);
    color: #fff;
}

.nau-premium__toggle button:focus-visible {
    outline: 2px solid var(--nau-gold);
    outline-offset: 2px;
}

.nau-premium--silver .nau-premium__pct {
    color: #5c6a7a;
}

.nau-premium__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.nau-premium__cell {
    background: #fff;
    border-radius: 2px;
    padding: 1rem 1.1rem;
    border: 1px solid var(--nau-line);
}

.nau-premium__pct {
    /* Figma 1:198 — Montserrat ExtraBold 16px #171c22 */
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-num);
    color: var(--nau-heading);
    margin: 0 0 0.5rem;
}

.nau-premium__meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--nau-fs-caption);
    color: var(--nau-muted);
}

.nau-premium__meta strong {
    font-family: Montserrat, sans-serif;
    color: var(--nau-ink);
    font-weight: 800;
    font-size: var(--nau-fs-num);
}

/* 제품 배너 */
.nau-banner {
    position: relative;
    background: var(--nau-charcoal);
    color: #fff;
    padding: 3.5rem 0;
    overflow: hidden;
}

.nau-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    z-index: 1;
}

.nau-banner .inner {
    position: relative;
    z-index: 2;
    max-width: 40rem;
}

.nau-banner__brand {
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-caption);
    letter-spacing: 0.18em;
    color: var(--nau-gold);
    margin: 0 0 0.5rem;
}

.nau-banner__title {
    font-size: var(--nau-fs-banner-title);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

.nau-banner__sub {
    font-size: var(--nau-fs-body);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.35rem;
}

.nau-banner__sizes {
    font-size: var(--nau-fs-caption);
    color: rgba(255, 255, 255, 0.65);
    margin: 1rem 0 0;
}

/* 국제 환율 */
.nau-fx {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.nau-fx__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--nau-line);
    border-radius: 2px;
    padding: 0.85rem 1rem;
}

.nau-fx__flag {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #eee;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.nau-fx__code {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: var(--nau-fs-body);
    margin: 0 0 0.15rem;
}

.nau-fx__rates {
    font-size: var(--nau-fs-caption);
    color: var(--nau-muted);
    line-height: 1.45;
}

.nau-fx__rates strong {
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-num);
    color: var(--nau-ink);
}

/* 국제 시세 / 런던 Fix */
.nau-market {
    background: var(--nau-charcoal);
    color: #fff;
    padding: 3.5rem 0 4rem;
}

.nau-market__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.nau-market__panel-title .nau-section__title-ko {
    color: rgba(255, 255, 255, 0.65);
}

.nau-market__panel-title .nau-section__title-en {
    color: #fff;
}

.nau-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
    font-size: var(--nau-fs-body);
}

.nau-table th,
.nau-table td {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.nau-table th {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    font-size: var(--nau-fs-caption);
}

.nau-table td:last-child,
.nau-table th:last-child {
    text-align: right;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-num);
}

.nau-table .nau-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--nau-fs-caption);
    font-weight: 700;
}

.nau-table .nau-pill--up {
    color: #ff8a80;
}

.nau-table .nau-pill--down {
    color: #90caf9;
}

/* 지수 — 어두운 배경: 제목은 밝은색(common span line-height:100% 보정) */
.nau-indices {
    background: #141414;
    color: #fff;
    padding: 3.5rem 0 4rem;
}

.nau-indices .nau-section__head {
    align-items: flex-start;
    margin-bottom: 2.4rem;
}

.nau-indices .nau-section__head h2 {
    margin: 0;
    color: #fff;
}

/* 라이트 섹션용 제목색이 여기서는 배경과 겹쳐 사실상 안 보임 → 시안(다크 패널) 기준 */
.nau-indices .nau-section__title-ko {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.nau-indices .nau-section__title-en {
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 0.4rem;
}

.nau-indices__row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: stretch;
}

.nau-index {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    padding: 1.6rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 11.5rem;
    box-sizing: border-box;
}

.nau-index__name {
    /* Figma — 지수명 Montserrat Medium 16px */
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-index-name);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 0.85rem;
    line-height: 1.35;
}

.nau-index__val {
    /* Figma — 지수값 Montserrat ExtraBold 24px */
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: var(--nau-fs-index-val);
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.nau-index__chg {
    font-family: Montserrat, sans-serif;
    font-size: var(--nau-fs-caption);
    font-weight: 700;
    color: #ff8a80;
    margin: 0;
    margin-top: auto;
    line-height: 1.35;
}

.nau-index__chg--up {
    color: var(--nau-up);
}

.nau-index__chg--down {
    color: var(--nau-down);
}

.nau-index__chg--flat {
    color: rgba(255, 255, 255, 0.65);
}

/* News */
.nau-news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.nau-news__card {
    background: #fff;
    border: 1px solid var(--nau-line);
    border-radius: 2px;
    padding: 1.35rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.nau-news__date {
    font-size: var(--nau-fs-caption);
    color: var(--nau-muted);
    margin: 0 0 0.65rem;
}

.nau-news__tit {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 800;
    line-height: 1.45;
    margin: 0 0 0.65rem;
}

.nau-news__ex {
    font-size: var(--nau-fs-body);
    color: var(--nau-muted);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.nau-news__more {
    text-align: center;
    margin-top: 2rem;
}

.nau-news__more a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--nau-ink);
    border-radius: 2px;
    font-weight: 700;
    font-size: var(--nau-fs-body);
    text-decoration: none;
    color: var(--nau-ink);
}

.nau-news__more a:hover {
    border-color: var(--nau-gold);
    color: var(--nau-gold);
}

/* 반응형 */
@media screen and (max-width: 1024px) {
    .nau-hero {
        min-height: 38rem;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }

    .nau-hero .inner {
        grid-template-columns: 1fr;
    }

    .nau-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .nau-premium__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nau-fx {
        grid-template-columns: repeat(2, 1fr);
    }

    .nau-market__grid {
        grid-template-columns: 1fr;
    }

    .nau-indices__row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nau-index {
        min-height: 10.5rem;
    }

    .nau-news__grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    .nau-hero {
        min-height: 32rem;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
    }

    .nau-ticker__grid {
        grid-template-columns: 1fr;
    }

    .nau-cards {
        grid-template-columns: 1fr;
    }

    .nau-premium__grid {
        grid-template-columns: 1fr;
    }

    .nau-fx {
        grid-template-columns: 1fr;
    }

    .nau-indices__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nau-index {
        min-height: auto;
        padding: 1.35rem 1.2rem 1.35rem;
    }
}