/* ==== Magazine editorial (based on reference) ==== */
.mag-page {
    max-width: 1364px; margin: auto; overflow: hidden;
    background: #f8f7f4; box-shadow: 0 0 60px rgba(0,0,0,0.04);
    container-type: inline-size;
}

/* Toolbar (매거진 페이지 열기 / PNG 다운로드) */
.mag-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 18px clamp(20px, 4vw, 40px);
    background: #fbfaf8; border-bottom: 1px solid #e9e8e5;
}
.mag-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 15px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    color: #151515; background: #fff;
    border: 1px solid rgba(21,21,21,.18); border-radius: 999px;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mag-btn:hover { transform: translateY(-1px); background: #f2f2f2; }
.mag-btn.primary { background: #c8081b; color: #fff; border-color: #c8081b; }
.mag-btn.primary:hover { background: #ad0617; border-color: #ad0617; }
.mag-btn svg { stroke: currentColor; }
.mag-toolbar-note { margin-left: auto; font-size: 11px; color: #888; letter-spacing: 0.05em; }

/* Hero */
.mag-hero {
    position: relative; min-height: 390px; height: 65cqw;
    background: radial-gradient(ellipse at 64% 64%, #e7e7e5 0, #f8f8f6 30%, #f9f8f5 70%);
    overflow: hidden;
}
.mag-hero-image {
    position: absolute; right: 0; top: 1cqw;
    width: 54.55cqw; height: 56.75cqw;
    object-fit: cover; object-position: center; z-index: 0;
}
/* readability scrim — fades image on the left copy area so text stays legible on any photo */
.mag-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
        rgba(251,250,248,1) 0%,
        rgba(251,250,248,1) 32%,
        rgba(251,250,248,0.82) 45%,
        rgba(251,250,248,0.35) 55%,
        rgba(251,250,248,0) 65%);
}
.mag-hero-copy {
    position: relative; z-index: 2;
    padding: 3.3cqw 0 0 6.25cqw; width: 50%;
}
.mag-hero-title {
    font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
    letter-spacing: -1.3cqw; line-height: 0.8; margin: 0 0 2cqw; white-space: nowrap;
}
.mag-hero-title .taste { display: block; font-size: 16.5cqw; }
.mag-hero-title .of {
    display: inline-block; font-size: 10.3cqw; font-style: italic;
    letter-spacing: -0.85cqw; vertical-align: 2.3cqw; margin-right: 1.2cqw;
}
.mag-hero-title .country {
    display: inline-block; font-size: 16.4cqw; color: var(--accent);
    margin-left: -0.8cqw; letter-spacing: -1cqw;
}
.mag-hero h2 {
    margin: 0.2cqw 0 1.9cqw; font-size: 3.35cqw; line-height: 1.24;
    letter-spacing: -0.12cqw; font-weight: 700;
}
.mag-hero p {
    margin: 0; font-size: 1.85cqw; line-height: 1.45;
    color: #444; letter-spacing: -0.045cqw;
}
.mag-hero .issue {
    margin-top: 2.7cqw; color: #555; letter-spacing: 0.27cqw;
    font-size: 1.53cqw; line-height: 1.5;
}
.mag-hero .issue::before {
    content: ''; display: block; width: 4.2cqw; height: 0.28cqw;
    background: var(--accent); margin-bottom: 1.4cqw;
}

/* Intro */
.mag-intro {
    min-height: 39cqw; padding: 4.1cqw 8.2cqw 3.35cqw; text-align: center;
    background: radial-gradient(ellipse at center, #f4f4f3 0%, #ebebeb 62%, #e0e0e0 100%);
}
.mag-intro > p {
    margin: 0 0 3.8cqw; font-size: 1.72cqw; line-height: 1.65; color: #535353;
    white-space: pre-wrap;
}
.mag-intro-panels {
    display: grid; grid-template-columns: 1fr 1fr; background: #fffefb;
    min-height: 19.6cqw; padding: 2.8cqw 0 1.9cqw;
}
.mag-intro-panels > div {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mag-intro-panels > div + div { border-left: 1px solid #dedede; }
.mag-intro-panels h3 {
    font: 3.65cqw/0.94 Georgia, 'Times New Roman', serif;
    letter-spacing: -0.18cqw; margin: 0;
}
.mag-intro-panels h3 span { font-size: 3.25cqw; }
.mag-intro-panels small {
    display: block; font-size: 1.55cqw; color: #555; line-height: 1.5; margin-top: 2cqw;
}
.flag-emoji { font-size: 3cqw; margin-bottom: 1cqw; }

/* Mission */
.mag-mission {
    min-height: 116px; text-align: center; padding: 3cqw 4cqw 2.5cqw; background: #fbfaf8;
}
.mag-mission h2 {
    margin: 0 0 1.8cqw; font: 3.65cqw Georgia, 'Times New Roman', serif;
    letter-spacing: -0.13cqw;
}
.mag-mission p {
    margin: 0 auto; max-width: 900px; color: #666;
    font-size: 1.49cqw; line-height: 1.75; white-space: pre-wrap;
}

/* Features (2-col image grid) */
.mag-features {
    display: grid; grid-template-columns: 1fr 1fr; background: #000;
}
.mag-feature {
    display: block; position: relative; overflow: hidden; aspect-ratio: 340 / 284;
}
.mag-feature img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.mag-feature:hover img { transform: scale(1.03); }
/* bottom scrim guarantees label contrast on any image */
.mag-feature::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%);
}
.mag-feature-label {
    position: absolute; left: 3cqw; right: 3cqw; bottom: 2.5cqw; color: #fff; z-index: 2;
}
.mag-feature-label .k {
    font-size: 1cqw; letter-spacing: 0.22em; font-weight: 700;
    color: rgba(255,255,255,0.8); margin-bottom: 0.7cqw;
}
.mag-feature-label h3 {
    font: 2.5cqw Georgia, 'Times New Roman', serif; letter-spacing: -0.06cqw;
    margin: 0;
}

/* Collage (full-width image) */
.mag-collage { background: #020202; }
.mag-collage img { display: block; width: 100%; height: auto; }

/* Branding */
.mag-branding {
    padding: 3cqw 6.3cqw 5.9cqw;
    background: radial-gradient(ellipse at center, #fff 10%, #f3f2ef 100%);
}
.mag-branding h2 {
    text-align: center; font: 4.2cqw/0.95 Georgia, 'Times New Roman', serif;
    letter-spacing: -0.18cqw; margin: 0 0 2.7cqw;
}
.mag-branding h2 span { font-size: 3.7cqw; }
.mag-point-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.45cqw; margin-bottom: 1.8cqw;
}
.mag-point {
    background: #fff; min-height: 15cqw;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 1.1cqw;
    color: #555; font-size: 1.65cqw; font-weight: 600; line-height: 1.45;
}
.mag-point svg { width: 3.4cqw; height: 3.4cqw; stroke: #555; }
.mag-brand-row {
    border-top: 1px solid #d4d4d4;
    display: grid; grid-template-columns: 17.5% 1fr; gap: 0;
    padding: 1.5cqw 0.4cqw; font-size: 1.5cqw; line-height: 1.5; color: #555;
}
.mag-brand-row strong { color: #333; font-size: 1.5cqw; line-height: 1.35; }
.mag-brand-row:last-child { padding-bottom: 0; }

/* Archive + reading list (retained sections) */
.mag-archive-wrap {
    padding: 100px 20px 40px; max-width: 1240px; margin: 0 auto;
}
.mag-archive-head { text-align: center; margin-bottom: 50px; }
.mag-archive-head .k {
    font-size: 10px; letter-spacing: 0.22em; color: #8c877e; font-weight: 700; margin-bottom: 12px;
}
.mag-archive-head h2 {
    font-family: Georgia, serif; font-size: 40px; letter-spacing: -0.04em; margin: 0;
}
.archive-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.archive-card {
    display: block; color: inherit; text-decoration: none;
    transition: transform 0.2s ease;
}
.archive-card:hover { transform: translateY(-4px); }
.archive-card .thumb {
    aspect-ratio: 4/5; overflow: hidden; background: var(--soft); position: relative;
}
.archive-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.archive-card:hover .thumb img { transform: scale(1.05); }
.archive-card .thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5));
}
.archive-card .flag {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    font-size: 22px; background: #fff; padding: 4px 8px;
}
.archive-card .caption {
    position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 2; color: #fff;
}
.archive-card .caption .n { font-size: 10px; letter-spacing: 0.15em; opacity: 0.9; }
.archive-card .caption .c {
    font-family: Georgia, serif; font-size: 22px; letter-spacing: -0.02em; margin-top: 4px;
}
.archive-card .theme { font-size: 12px; color: #666; margin-top: 12px; line-height: 1.5; }

.reading-list-wrap { padding: 40px 20px 50px; max-width: 1240px; margin: 0 auto; }
.reading-head { text-align: center; margin-bottom: 40px; }
.reading-head .k { font-size: 10px; letter-spacing: 0.22em; color: #8c877e; font-weight: 700; margin-bottom: 10px; }
.reading-head h2 { font-family: Georgia, serif; font-size: 32px; letter-spacing: -0.03em; margin: 0; }
.reading-head p { font-size: 12px; color: #888; margin: 12px 0 0; }
.reading-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ref-card {
    display: flex; flex-direction: column; padding: 22px 20px;
    border: 1px solid var(--line); background: #fff;
    text-decoration: none; color: inherit; min-height: 130px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ref-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.ref-card .brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ref-card .brand img { width: 18px; height: 18px; }
.ref-card .name { font-family: Georgia, serif; font-size: 17px; letter-spacing: -0.02em; font-weight: 700; }
.ref-card .tag { font-size: 12px; color: #777; line-height: 1.6; }
.ref-card .stars { color: #f59e0b; font-size: 11px; margin-top: auto; padding-top: 10px; }
.ref-card .visit { font-size: 10px; letter-spacing: 0.14em; color: var(--accent); font-weight: 800; margin-top: 8px; }

/* Mobile fallback */
@media (max-width: 700px) {
    .mag-hero-copy { width: 88%; padding: 5cqw 0 0 4cqw; }
    .mag-hero-title .taste, .mag-hero-title .country { font-size: 12cqw; }
    .mag-hero h2 { font-size: 3.6cqw; }
    .mag-hero p { font-size: 2.4cqw; }
    .mag-intro-panels { grid-template-columns: 1fr; }
    .mag-intro-panels > div + div { border-left: 0; border-top: 1px solid #dedede; }
    .mag-features { grid-template-columns: 1fr; }
    .mag-point-grid { grid-template-columns: repeat(2, 1fr); }
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
    .reading-grid { grid-template-columns: repeat(2, 1fr); }
}