:root{
    --bg: #F8F6F1;
    --bg-soft: #F3F0E9;
    --panel: #EFEBE2;
    --line: rgba(23,22,20,0.10);
    --line-strong: rgba(23,22,20,0.18);
    --ink: #171614;
    --ink-dim: #716D67;
    --ink-faint: rgba(113,109,103,0.75);

    /* 단일 포인트 컬러(버건디) — 카테고리별로 색을 나누지 않고 전체 통일 */
    --accent: #7D2635;
    --accent-bg: #F3E7E7;
    --charcoal: #23211E;
    --charcoal-soft: #2E2B27;

    /* 기존 섹션별 변수명은 유지하되(다른 파일 호환), 전부 단일 버건디 값으로 통일 */
    --cinema: #7D2635; --cinema-bg: #F3E7E7;
    --culture: #7D2635; --culture-bg: #F3E7E7;
    --beauty: #7D2635; --beauty-bg: #F3E7E7;
    --insight: #7D2635; --insight-bg: #F3E7E7;
    --gold: #7D2635;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Pretendard','SUIT',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .serif{ font-family:'Playfair Display','Noto Serif KR',serif; }

  /* ===== HEADER: 유틸리티바 + 중앙로고 + 대분류 메뉴 (3단 구조) ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }

  /* 1단: 유틸리티 바 */
  .utility-bar{
    height:30px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5vw;
    border-bottom:1px solid var(--line);
    background:var(--bg-soft);
  }
  .utility-left{
    font-size:10px; letter-spacing:0.12em; color:var(--ink-faint); font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .utility-right{ display:flex; gap:20px; flex-shrink:0; }
  .utility-right a{
    font-size:10.5px; letter-spacing:0.05em; color:var(--ink-dim); text-decoration:none; font-weight:500;
  }
  .utility-right a:hover{ color:var(--accent); }

  /* 2단: 중앙 로고 */
  .header-main{
    display:flex; align-items:center; justify-content:center; position:relative;
    padding:22px 5vw 18px;
  }
  .logo{
    font-family:'Cormorant Garamond','Playfair Display',serif;
    font-size:34px; font-weight:600; letter-spacing:0.14em;
    color:var(--ink);
    text-decoration:none;
  }

  /* 3단: 대분류 메뉴 */
  .main-nav{ padding:0 5vw 20px; display:flex; justify-content:center; }
  .main-nav ul{ list-style:none; display:flex; gap:44px; }
  .main-nav a{
    text-decoration:none;
    font-size:13px; letter-spacing:0.14em;
    color:var(--ink-dim);
    font-weight:500;
    padding-bottom:4px;
    border-bottom:1px solid transparent;
    transition:.2s;
  }
  .main-nav a:hover, .main-nav a.active{ color:var(--accent); border-bottom-color:var(--accent); }

  /* 햄버거 버튼: 모바일에서만 header-main 우측에 절대배치 */
  .hamburger-btn{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:36px; height:36px; border:none; background:none; cursor:pointer;
    padding:0; flex-shrink:0;
    position:absolute; right:5vw; top:50%; transform:translateY(-50%);
  }
  .hamburger-btn span{
    display:block; width:22px; height:2px; background:var(--ink);
    border-radius:2px; transition:transform .3s ease, opacity .3s ease;
  }
  .hamburger-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger-btn.open span:nth-child(2){ opacity:0; }
  .hamburger-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ===== 모바일 전체화면 메뉴 오버레이 ===== */
  .mobile-nav-overlay{
    display:none;
    position:fixed; inset:0; z-index:100;
    background:#fff;
    padding:100px 8vw 40px;
    flex-direction:column;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease;
    overflow-y:auto;
  }
  .mobile-nav-overlay.open{
    display:flex; opacity:1; visibility:visible;
  }
  .mobile-nav-overlay nav{
    display:flex; flex-direction:column; gap:4px; margin-bottom:28px;
  }
  .mn-group{ margin-bottom:18px; }
  .mn-group-title{
    font-family:'Playfair Display','Noto Serif KR',serif;
    font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    padding:6px 4px; margin-bottom:2px; display:block; text-decoration:none;
    color:var(--accent);
  }
  .mn-item{
    font-family:'Pretendard',sans-serif;
    font-size:17px; font-weight:500; padding:11px 4px;
    text-decoration:none; color:var(--ink); display:block;
    border-bottom:1px solid var(--line);
  }
  .mn-item.active{ color:var(--accent); }
  .mobile-nav-search{
    display:flex; gap:8px; margin-bottom:28px;
  }
  .mobile-nav-search input{
    flex:1; padding:13px 16px; border:1px solid var(--line-strong); border-radius:999px;
    font-size:14px; font-family:'Pretendard',sans-serif;
  }
  .mobile-nav-search button{
    width:46px; border:none; background:var(--panel); border-radius:999px; font-size:16px; cursor:pointer;
  }
  .mobile-nav-links{
    display:flex; flex-direction:column; gap:14px;
  }
  .mobile-nav-links a{
    font-size:14px; color:var(--ink-dim); text-decoration:none;
  }

  /* ===== HERO (짧은 매거진 마스트헤드) ===== */
  .hero{
    position:relative;
    height:330px;
    display:flex; align-items:center;
    padding:0 5vw;
    overflow:hidden;
    background:var(--charcoal);
  }
  .hero-bg-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(23,22,20,0.74) 0%, rgba(23,22,20,0.42) 42%, rgba(23,22,20,0.10) 68%, rgba(23,22,20,0) 100%);
  }
  .hero:not(.has-bg-image) .hero-overlay{
    background:linear-gradient(160deg, var(--charcoal) 0%, var(--charcoal-soft) 100%);
  }
  .hero-content{ position:relative; z-index:2; max-width:760px; }
  .hero-eyebrow{
    font-size:10.5px; letter-spacing:0.26em; text-transform:uppercase;
    color:#fff; opacity:0.8; font-weight:600; margin-bottom:12px;
  }
  .hero h1{
    font-family:'Pretendard',sans-serif;
    font-weight:700;
    font-size:clamp(30px, 4.4vw, 46px);
    line-height:1.2;
    letter-spacing:-0.01em;
    color:#fff;
  }
  .hero-sub{
    margin-top:10px;
    font-size:14.5px; color:rgba(255,255,255,0.78);
    max-width:440px; line-height:1.55;
    font-weight:400;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* ===== SECTION SHELL ===== */
  .section{
    max-width:1480px; margin:0 auto;
    padding:110px 5vw;
    position:relative;
  }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:52px;
    gap:24px; flex-wrap:wrap;
    border-bottom:1px solid var(--line-strong);
    padding-bottom:22px;
  }
  .section-title{
    font-family:'Pretendard',sans-serif;
    font-size:clamp(28px, 2.8vw, 38px);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.15;
    color:var(--ink);
  }
  .section-desc{
    color:var(--ink-dim); font-size:14.5px; max-width:340px; text-align:right;
    line-height:1.7; font-weight:400;
  }
  .view-all{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; letter-spacing:0.04em; font-weight:600;
    text-decoration:none; color:var(--accent);
    padding:0;
    border-bottom:1px solid var(--accent);
    transition:.25s;
  }

  /* ===== 카드 공통 (모서리 최소화, 그림자 대신 선으로 구분) ===== */
  .card, .mag-main, .mag-sub, .te-main, .te-sub, .es-card, .as-card{
    text-decoration:none; color:inherit; display:block;
  }
  .card-img, .mag-main-img, .mag-sub-img, .te-main-img, .te-sub-img, .es-img, .as-img{
    position:relative; width:100%; overflow:hidden;
    background:linear-gradient(135deg, #ECE7DC, #E2DCCE);
    border-radius:2px;
  }
  .card-img img, .mag-main-img img, .mag-sub-img img, .te-main-img img, .te-sub-img img, .es-img img, .as-img img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s ease;
  }
  .card:hover img, .mag-main:hover img, .mag-sub:hover img, .te-main:hover img, .te-sub:hover img, .es-card:hover img, .as-card:hover img{
    transform:scale(1.04);
  }
  .mag-kicker, .te-kicker{
    font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent);
    font-weight:600; margin-top:18px; margin-bottom:8px;
  }

  /* ===== THE EDIT (비대칭 매거진: 대표 65% + 보조 35%) ===== */
  .the-edit-grid{ display:grid; grid-template-columns:1.86fr 1fr; gap:48px; }
  .te-main-img{ aspect-ratio:16/10; }
  .te-main-title{
    font-family:'Pretendard',sans-serif; font-size:26px; font-weight:700;
    line-height:1.32; color:var(--ink);
  }
  .te-main-excerpt{
    margin-top:12px; font-size:14px; color:var(--ink-dim); line-height:1.7; max-width:480px;
  }
  .te-sub-list{ display:flex; flex-direction:column; gap:36px; }
  .te-sub{ display:flex; flex-direction:column; }
  .te-sub-img{ aspect-ratio:16/10; }
  .te-sub-title{
    font-family:'Pretendard',sans-serif; font-size:19px; font-weight:700;
    line-height:1.36; color:var(--ink);
  }

  /* ===== 광고 슬롯 (실제 코드가 있을 때만 렌더링됨, PHP에서 조건 처리) ===== */
  .ad-slot{
    max-width:1480px; margin:0 auto; padding:0 5vw 56px;
    text-align:center;
    min-height:90px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .ad-label{
    display:block; font-size:9.5px; letter-spacing:0.18em; color:var(--ink-faint);
    margin-bottom:10px; font-weight:600;
  }

  /* ===== 4개 대분류 매거진 섹션 (variant a/b로 배치를 조금씩 다르게) ===== */
  .mag-section{ border-top:1px solid var(--line); }
  .mag-grid-a{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; }
  .mag-grid-a .mag-main-img{ aspect-ratio:4/3; }
  .mag-grid-a .mag-sub-list{ display:flex; flex-direction:column; gap:28px; }
  .mag-grid-a .mag-sub{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:start; }
  .mag-grid-a .mag-sub-img{ aspect-ratio:1/1; }

  .mag-grid-b{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; }
  .mag-grid-b .mag-main{ grid-column:span 3; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
  .mag-grid-b .mag-main-img{ aspect-ratio:16/10; }
  .mag-grid-b .mag-sub-list{ display:contents; }
  .mag-grid-b .mag-sub-img{ aspect-ratio:3/4; }

  /* 게시물 1개뿐인 섹션: 이미지 55% + 텍스트 45% 가로형 대표기사 */
  .mag-solo{ display:grid; grid-template-columns:1.22fr 1fr; gap:48px; align-items:center; }
  .mag-solo-img{ aspect-ratio:16/9; position:relative; width:100%; overflow:hidden; background:linear-gradient(135deg,#ECE7DC,#E2DCCE); border-radius:2px; }
  .mag-solo-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .mag-solo:hover .mag-solo-img img{ transform:scale(1.04); }
  .mag-solo-title{
    font-family:'Pretendard',sans-serif; font-size:26px; font-weight:700;
    line-height:1.32; color:var(--ink);
  }
  .mag-solo-excerpt{
    margin-top:14px; font-size:15px; color:var(--ink-dim); line-height:1.75;
  }
  .mag-solo-meta{
    margin-top:18px; font-size:12.5px; color:var(--ink-faint);
  }

  /* CULTURE(책 리뷰) 섹션 전용: 항상 가로형(16:9) 썸네일 유지 —
     관리자에서 업로드하는 가로형 원본 구도가 깨지지 않도록 강제 override */
  #culture .mag-solo-img,
  #culture .mag-main-img,
  #culture .mag-sub-img{
    aspect-ratio:16/9 !important;
  }
  #culture .mag-solo{ grid-template-columns:1.35fr 1fr; }
  #culture .mag-grid-b .mag-main{ grid-template-columns:1.35fr 1fr; }

  /* CULTURE 보조기사 리스트 (대표기사 아래, 가로형 카드 3~4개) */
  .mc-sub-list{
    margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  }
  .mc-sub{ text-decoration:none; color:inherit; display:block; }
  .mc-sub-img{
    width:100%; aspect-ratio:16/9; overflow:hidden; position:relative; border-radius:2px;
    background:linear-gradient(135deg,#ECE7DC,#E2DCCE);
  }
  .mc-sub-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .mc-sub:hover .mc-sub-img img{ transform:scale(1.04); }

  .mag-main-title{
    font-family:'Pretendard',sans-serif; font-size:26px; font-weight:700;
    line-height:1.32; color:var(--ink);
  }
  .mag-main-excerpt{
    margin-top:12px; font-size:14.5px; color:var(--ink-dim); line-height:1.7;
  }
  .mag-sub-title{
    font-family:'Pretendard',sans-serif; font-size:17px; font-weight:700;
    line-height:1.4; color:var(--ink); margin-top:14px;
  }
  .mag-grid-a .mag-sub-title, .mag-grid-a .mag-sub-img + .mag-sub-title{ margin-top:0; }

  /* ===== EDITOR'S SELECTION (차콜 배경, 편집자 특별기사 — 대형배너 아닌 컴팩트 영역) ===== */
  .editors-selection{
    background:var(--charcoal); color:#fff;
    padding:60px 5vw;
    min-height:320px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .editors-selection .section-head{
    max-width:1480px; margin:0 auto 32px; border-bottom-color:rgba(255,255,255,0.15);
  }
  .editors-selection .section-title{ color:#fff; font-size:clamp(22px, 2vw, 28px); }
  .editors-selection .section-desc{ color:rgba(255,255,255,0.55); }

  /* 추천기사 1개: 이미지 58% + 텍스트 42% 가로형 */
  .es-solo{
    max-width:1480px; margin:0 auto; width:100%;
    display:grid; grid-template-columns:1.38fr 1fr; gap:44px; align-items:center;
    text-decoration:none; color:inherit;
  }
  .es-solo-img{
    width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:2px; background:rgba(255,255,255,0.05);
  }
  .es-solo-img img{ width:100%; height:auto; display:block; }
  .es-solo-title{
    font-family:'Pretendard',sans-serif; font-size:23px; font-weight:700; line-height:1.34; color:#fff;
  }
  .es-solo-excerpt{
    margin-top:10px; font-size:13.5px; color:rgba(255,255,255,0.62); line-height:1.65;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* 추천기사 2개 이상: 개수에 따라 2열/3열 카드 그리드 */
  .es-grid{ max-width:1480px; margin:0 auto; display:grid; gap:28px; }
  .es-grid.es-cols-2{ grid-template-columns:1fr 1fr; }
  .es-grid.es-cols-3{ grid-template-columns:1fr 1fr 1fr; }
  .es-card{ text-decoration:none; color:inherit; display:block; }
  .es-img{
    width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:2px; background:rgba(255,255,255,0.05);
  }
  .es-img img{ width:100%; height:auto; display:block; }

  .es-kicker{
    font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.55);
    margin-top:14px; margin-bottom:6px; font-weight:600;
  }
  .es-title{
    font-family:'Pretendard',sans-serif; font-size:16px; font-weight:700; line-height:1.4; color:#fff;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .es-excerpt{
    margin-top:8px; font-size:12.5px; color:rgba(255,255,255,0.55); line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .es-readmore{
    display:inline-block; margin-top:10px; font-size:11.5px; letter-spacing:0.04em; font-weight:600;
    color:#fff; opacity:0.75; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:2px;
  }
  .es-solo:hover .es-readmore, .es-card:hover .es-readmore{ opacity:1; border-bottom-color:#fff; }

  /* ===== AVENUE SELECTS (제휴상품, 쇼핑몰처럼 안 보이게) ===== */
  .avenue-selects{ background:var(--bg-soft); }
  .as-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
  .as-img{ aspect-ratio:1/1; }
  .as-reason{
    font-size:12.5px; color:var(--ink-faint); font-style:italic; margin-top:16px; line-height:1.6;
  }
  .as-name{
    font-family:'Pretendard',sans-serif; font-size:16.5px; font-weight:700; color:var(--ink);
    margin-top:6px;
  }
  .as-link{
    display:inline-block; font-size:12.5px; color:var(--accent); font-weight:600; margin-top:8px;
  }

  /* ===== FOOTER (차콜 배경, 4열) ===== */
  footer{
    background:var(--charcoal); color:rgba(255,255,255,0.85);
    padding:80px 5vw 32px;
  }
  .footer-inner{ max-width:1480px; margin:0 auto; }
  .footer-brand{ margin-bottom:56px; }
  .footer-brand .serif{
    font-family:'Cormorant Garamond','Pretendard',serif;
    font-size:32px; letter-spacing:0.1em; margin-bottom:12px; color:#fff; font-weight:600;
  }
  .footer-brand p{ font-size:13px; color:rgba(255,255,255,0.5); max-width:360px; line-height:1.8; }
  .footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
  .footer-col h4{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:16px; font-weight:600; }
  .footer-col a{ display:block; font-size:13.5px; color:rgba(255,255,255,0.78); text-decoration:none; margin-bottom:11px; }
  .footer-col a:hover{ color:#fff; }
  .footer-bottom{
    margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12);
    font-size:11px; color:rgba(255,255,255,0.4);
    display:flex; justify-content:space-between; width:100%; flex-wrap:wrap; gap:8px;
  }

  @media (max-width: 980px){
    .main-nav{ display:none; }
    .utility-right a:not(.utility-search-link){ display:none; }
    .header-main{ padding:16px 5vw; }
    .logo{ font-size:24px; }
    .hamburger-btn{ display:flex; }
    .hero{ height:280px; padding:0 6vw; }
    .hero h1{ font-size:32px; }
    .hero-sub{ font-size:14px; margin-top:8px; }
    .section{ padding:64px 6vw; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .section-desc{ text-align:left; }

    .the-edit-grid{ grid-template-columns:1fr; gap:32px; }
    .te-sub-list{ flex-direction:column; }

    .mag-grid-a{ grid-template-columns:1fr; gap:28px; }
    .mag-grid-a .mag-sub{ grid-template-columns:100px 1fr; }
    .mag-grid-b{ grid-template-columns:1fr 1fr; gap:20px; }
    .mag-grid-b .mag-main{ grid-column:span 2; grid-template-columns:1fr; gap:16px; }
    .mag-solo{ grid-template-columns:1fr; gap:20px; }
    #culture .mag-solo{ grid-template-columns:1fr; }
    .mc-sub-list{ grid-template-columns:1fr; gap:20px; margin-top:28px; }

    .es-grid{ gap:20px; }
    .es-grid.es-cols-3{ grid-template-columns:1fr 1fr; }
    .es-grid.es-cols-2{ grid-template-columns:1fr 1fr; }
    .es-solo{ grid-template-columns:1fr; gap:24px; }
    .as-grid{ grid-template-columns:1fr 1fr; gap:20px; }

    footer{ padding:56px 6vw 28px; }
    .footer-cols{ grid-template-columns:1fr 1fr; gap:28px; }
    .footer-bottom{ flex-direction:column; gap:6px; align-items:flex-start; }
    /* iOS 사파리 자동 확대 방지: 입력 폰트 16px 이상 */
    input, textarea, select{ font-size:16px !important; }
  }

  @media (max-width: 480px){
    .hero{ height:260px; }
    .hero h1{ font-size:27px; }
    .mag-grid-b{ grid-template-columns:1fr; }
    .mag-grid-b .mag-main{ grid-column:span 1; }
    .es-grid, .es-grid.es-cols-2, .es-grid.es-cols-3{ grid-template-columns:1fr; }
    .as-grid{ grid-template-columns:1fr; }
    .footer-cols{ grid-template-columns:1fr; }
  }