/*
Theme Name: SeoulEdits
Theme URI: https://seouledits.com
Description: SeoulEdits editorial theme — black & white slash CI for a global K-fashion magazine. Typographic index, Archivo + Space Grotesk + Pretendard, Instagram official embeds.
Author: SeoulEdits
Version: 2.0
Requires at least: 6.0
Tested up to: 7.0
*/

:root{--ink:#111;--paper:#fff;--cream:#E8E6E1;--stone:#9A968D;--panel:#F5F3EF;--hair:#ECECEC;--bodymut:#56544E;--cline:#cbc8c0;--max:1240px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Pretendard,"Space Grotesk",-apple-system,system-ui,sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}
::selection{background:#111;color:#fff}
img{max-width:100%;height:auto}
.se-wrap{max-width:var(--max);margin:0 auto;padding:0 40px}

/* ── 헤더 (라이트 sticky) ── */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--hair)}
header.site .se-wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{display:flex;align-items:center;gap:9px;font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.5px;font-size:20px;text-decoration:none;color:var(--ink)}
.logo .slash{font-weight:400;display:inline-block;transform:scaleY(1.6);font-size:27px;margin:0 1px}
header.site nav{display:flex;align-items:center;font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.se-cats{display:inline-flex;gap:32px}
header.site nav a{color:var(--bodymut);text-decoration:none}
header.site nav a:hover,header.site nav a.active{color:var(--ink);font-weight:600}
.se-lang{display:inline-flex;gap:10px;padding-left:18px;margin-left:18px;border-left:1px solid var(--hair)}
.se-lang a{color:var(--stone)}
.se-lang a.active{color:var(--ink);font-weight:700}

/* ── 배너/마스트헤드 ── */
.se-meta{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--hair);font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--stone)}
.se-meta .sl{font-weight:400;transform:scaleY(1.5);display:inline-block;color:var(--ink);margin:0 5px}
.se-band{padding:60px 0 44px;border-bottom:1.5px solid var(--ink);display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.se-eyebrow{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--stone);margin-bottom:20px}
.se-h1{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(34px,6vw,62px);letter-spacing:-2px;line-height:.98;margin:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.se-h1 .sl{font-weight:400;transform:scaleY(1.65);display:inline-block}
.se-band-copy{font-family:"Space Grotesk",sans-serif;font-size:13px;color:var(--bodymut);max-width:280px;line-height:1.85;text-align:right;padding-bottom:8px;flex:none}
.se-band-copy b{color:var(--ink)}

/* ── 피처드 + Most Read ── */
.se-feature-wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:36px;align-items:stretch;padding-top:48px}
.se-card{text-decoration:none;color:inherit;cursor:pointer;display:block;transition:transform .25s ease}
.se-feature-wrap .se-card{height:100%}
.se-card:hover{transform:translateY(-4px)}
.se-feature{position:relative;width:100%;height:100%;min-height:360px;background:var(--ink);color:#fff;border-radius:4px;overflow:hidden;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between}
.se-feature .wm{position:absolute;right:-30px;bottom:-90px;font-family:Archivo,sans-serif;font-weight:300;font-size:420px;line-height:.7;color:rgba(255,255,255,.11);transform:scaleY(1.35);pointer-events:none}
.se-feat-tag{position:relative;display:flex;align-items:center;gap:10px}
.se-feat-tag .chip{background:transparent;color:#b9b6ae;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:0;display:flex;align-items:center;gap:5px}
.se-feat-tag .chip .sl{font-weight:300;transform:scaleY(1.3);display:inline-block}
.se-feat-tag .no{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:1px;color:#8d8a82}
.se-feat-cat{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#b9b6ae;margin-bottom:16px}
.se-feat-title{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,46px);letter-spacing:-1.5px;line-height:1.02;margin:0;max-width:88%;text-wrap:balance}
.se-feat-by{font-family:"Space Grotesk",sans-serif;font-size:13px;color:#8d8a82;margin-top:18px}
.se-mr-head{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);padding-bottom:14px;border-bottom:1.5px solid var(--ink)}
.se-mr{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline;text-decoration:none;color:inherit}
.se-mr:last-child{border-bottom:0}
/* 순위 번호: Archivo 900 굵은 숫자 + 우측 회전 막대 슬래시(CI). 조정: left/rotate/width */
.se-mr .rk{position:relative;font-family:Archivo,sans-serif;font-weight:900;font-size:40px;letter-spacing:-1px;color:var(--ink);line-height:1;flex:none;width:62px;overflow:hidden}
/* 슬래시 오른쪽을 배경색으로 대각선 덮음 → 숫자 뒷꼬리 제거. 슬래시=덮개 왼쪽 모서리. 조정: left(컷위치)·skewX(각도)·border-left(두께) */
.se-mr .rk::after{content:"";position:absolute;top:-6px;bottom:-6px;left:66%;right:-26px;background:var(--paper);border-left:4px solid var(--ink);transform:skewX(-22deg);transform-origin:center;pointer-events:none}
.se-mr .cat{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--bodymut)}
.se-mr h3{font-family:Archivo,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.3px;line-height:1.3;margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.se-mr:hover h3{color:var(--stone)}

/* ── The Index 디바이더 ── */
.se-index-head{display:flex;align-items:center;gap:16px;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-top:64px}
.se-index-head .t{font-family:Archivo,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.3px}
.se-index-head .s{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--stone)}
.se-index-head .count{margin-left:auto;font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--stone)}

/* ── 타이포 인덱스 그리드 + 4종 카드 ── */
.se-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:40px}
.se-tile{position:relative;width:100%;aspect-ratio:4/5;border-radius:4px;overflow:hidden;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.se-tile__meta{position:relative;display:flex;justify-content:space-between;align-items:baseline;font-family:"Space Grotesk",sans-serif}
.se-cat{font-size:10px;letter-spacing:1.5px;text-transform:uppercase}
.se-num{font-size:11px;letter-spacing:1px}
.se-tile__title{position:relative;font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,27px);letter-spacing:-1px;line-height:1.06;margin:0;text-wrap:balance}
.se-byline{font-family:"Space Grotesk",sans-serif;font-size:12px;color:var(--stone);margin-top:12px}
/* 슬래시 워터마크 — 변형별 색/위치 다르게 (검정→회색, 회색→흰색, 흰색→연회색) */
.se-tile .se-wm{position:absolute;font-family:Archivo,sans-serif;font-weight:300;font-size:240px;line-height:.7;transform:scaleY(1.4);pointer-events:none}
.v-ink .se-wm{color:rgba(255,255,255,.13);left:-26px;top:-84px}
.v-cream .se-wm{color:rgba(255,255,255,.72);right:-22px;bottom:-66px}
.v-paper .se-wm{color:#e7e4dc;right:-18px;top:-80px}
.v-slash .se-wm{color:rgba(255,255,255,.15);left:50%;top:48%;transform:translate(-50%,-50%) scaleY(1.4);font-size:215px}
.se-tile__foot{position:relative}
.v-ink .se-byline,.v-slash .se-byline{color:#8d8a82}
/* 변형 */
.v-ink .se-tile{background:var(--ink);color:#fff}
.v-ink .se-cat{color:#b9b6ae}.v-ink .se-num{color:#8d8a82}
.v-cream .se-tile{background:var(--cream);color:var(--ink)}
.v-cream .se-cat{color:#76736b}.v-cream .se-num{color:var(--stone)}.v-cream .se-byline{color:#bbb7ae}
.v-paper .se-tile{background:#fff;color:var(--ink);border:1.5px solid var(--cline)}
.v-paper .se-cat{color:#76736b}.v-paper .se-num{color:var(--stone)}.v-paper .se-byline{color:#bbb7ae}
.v-slash .se-tile{background:var(--ink);color:#fff}
.v-slash .se-cat{color:#b9b6ae}.v-slash .se-num{color:#8d8a82}

/* ── 페이지네이션 ── */
.se-pager{padding:64px 0 80px;display:flex;justify-content:center}
.se-pager .nav-links{display:flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-size:14px}
.se-pager .page-numbers{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #d8d5ce;color:var(--bodymut);text-decoration:none;padding:0 6px}
.se-pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.se-pager .page-numbers:hover:not(.current){border-color:var(--ink);color:var(--ink)}
.se-pager .page-numbers.next,.se-pager .page-numbers.prev{padding:0 18px;letter-spacing:1px;text-transform:uppercase;font-size:12px;font-weight:600;color:var(--ink)}

/* ── 기사(single) ── */
main.single{max-width:720px;margin:0 auto;padding:56px 24px 120px}
.brandmark{width:44px;height:44px;display:block;margin:0 0 18px}
.eyebrow{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--stone);margin:0 0 14px}
main.single h1{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-1px;line-height:1.24;font-size:42px;margin:0 0 26px}
.byline{margin:0 0 38px}
.bl-name{display:block;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;color:var(--ink);line-height:1.5}
.bl-meta{display:block;font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--stone);letter-spacing:.3px;margin-top:6px}
.lead{font-size:18px;line-height:1.75;color:var(--bodymut);border-left:3px solid #111;padding-left:18px;margin:0 0 46px}
.body{font-size:17px;line-height:1.9;color:#1a1a1a}
.body p{margin:0 0 30px}
.body h2{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.3px;font-size:26px;margin:66px 0 24px;padding-top:14px;border-top:1px solid var(--hair)}
.body h2::before{content:"/";font-family:Archivo,sans-serif;font-weight:300;display:inline-block;transform:scaleY(1.4);color:var(--stone);margin-right:12px}
.body strong{font-weight:700}
.body ul{padding-left:0;list-style:none;margin:10px 0 30px}
.body li{padding:15px 18px;background:var(--panel);border-radius:8px;margin-bottom:10px;line-height:1.6}
.body img{border-radius:8px}
.instagram-media{margin:52px auto !important}
.single .body .instagram-media{width:100% !important;max-width:540px !important;min-width:0 !important;margin:40px auto !important}

/* ── 관련 글 ── */
.related{max-width:1040px;margin:64px auto 0;padding:0 24px}
.related-h{font-family:Archivo,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.3px;margin:0 0 20px;border-top:1px solid var(--hair);padding-top:32px}
.related-h .rs{font-weight:300;display:inline-block;transform:scaleY(1.4);color:var(--stone);margin-right:6px}
.related-grid{display:flex;flex-direction:column;gap:12px}
.rcard{display:flex;flex-direction:row;align-items:center;gap:26px;text-decoration:none;background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:20px 28px;transition:transform .15s ease,border-color .15s ease}
.rcard:hover{transform:translateX(4px);border-color:var(--cline)}
.rc-eyebrow{flex:none;width:104px;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--stone)}
.rc-title{flex:1;font-family:Archivo,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.3px;line-height:1.3;color:var(--ink)}
.rc-by{flex:none;font-family:"Space Grotesk",sans-serif;font-size:12px;color:var(--stone)}
@media(max-width:620px){.rcard{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px}.rc-eyebrow{width:auto}}

/* ── 푸터 (다크 + 스택 락업) ── */
.site-footer{background:var(--ink);color:#fff;padding:72px 40px 48px;margin-top:24px}
.se-foot-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.se-foot-logo{display:flex;align-items:center;gap:22px}
.se-foot-logo .sl{font-family:Archivo,sans-serif;font-weight:400;font-size:100px;line-height:.7;transform:scaleY(1.45);display:inline-block;color:#fff}
.se-foot-logo .wd{font-family:Archivo,sans-serif;font-weight:800;font-size:40px;line-height:.9;letter-spacing:-.8px;text-transform:uppercase}
.se-foot-nav{display:flex;gap:28px;font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#b9b6ae;padding-bottom:6px}
.se-foot-nav a{color:#b9b6ae;text-decoration:none}.se-foot-nav a:hover{color:#fff}
.se-foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid #2a2a2a;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:1px;color:#8d8a82}
.se-foot-bottom .url{color:#fff;letter-spacing:2px}

@media(max-width:1024px){.se-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.se-feature-wrap{grid-template-columns:1fr}}
@media(max-width:720px){
  html{overflow-x:hidden}
  .se-wrap{padding:0 18px}
  header.site .se-wrap{padding-top:14px;padding-bottom:14px}
  header.site nav{font-size:12px}
  .se-cats{display:none}            /* 모바일: 카테고리 숨기고 로고+KO/EN만 */
  .se-lang{margin-left:0;padding-left:0;border-left:0}
  .logo{font-size:18px}
  .se-meta{flex-wrap:wrap;gap:4px 14px;font-size:10px;letter-spacing:1px}
  .se-band{padding:36px 0 28px;gap:18px}
  .se-h1{gap:10px;letter-spacing:-1px}
  .se-band-copy{text-align:left;max-width:none;flex:1 1 100%;width:100%}   /* 모바일: 전폭 차지 + 줄바꿈(오른쪽 넘침 방지) */
  .se-feature{aspect-ratio:auto;min-height:190px;padding:24px}
  .se-feat-title{max-width:100%;font-size:26px}
  .se-feature .wm{font-size:220px;bottom:-46px}
  .se-grid{grid-template-columns:1fr;gap:14px}
  .se-tile{aspect-ratio:auto;min-height:140px;padding:22px}   /* 모바일: 카드 높이 압축 */
  .se-tile__title{font-size:21px}
  .se-index-head{margin-top:48px}
  main.single{padding:40px 20px 90px}
  main.single h1{font-size:32px}
}

/* ===== 금주의 픽 — 메인 최상단 사진 히어로 (사진 좌 / 컨텐츠 우, 화이트) ===== */
.se-pick{display:grid;grid-template-columns:auto 1fr;background:var(--paper);color:var(--ink);border:1px solid var(--cline);border-radius:4px;overflow:hidden;margin:28px 0 6px;min-height:472px}
.se-pick-ig{background:var(--panel);display:flex;align-items:center;justify-content:center;overflow:hidden}
.se-pick-ig blockquote{opacity:0 !important}
.se-pick-ig .instagram-media{filter:grayscale(1) contrast(1.03);transition:filter .5s;margin:0 !important;min-width:320px !important;max-width:100% !important;border:0 !important;box-shadow:none !important}
.se-pick:hover .se-pick-ig .instagram-media{filter:grayscale(0)}
.se-pick-copy{display:flex;flex-direction:column;padding:38px 46px;color:var(--ink);text-decoration:none}
.se-pick-copy:hover .se-pick-cta{opacity:1;letter-spacing:3px}
.se-pick-kicker{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--stone)}
.se-pick-title{font-family:Archivo,"Noto Sans KR",sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,48px);line-height:1.06;letter-spacing:-1.4px;margin:auto 0 0;word-break:keep-all;color:var(--ink)}
.se-pick-deck{font-family:"Space Grotesk","Noto Sans KR",sans-serif;font-size:15px;line-height:1.65;color:var(--bodymut);margin:18px 0 0;max-width:32em;word-break:keep-all}
.se-pick-by{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--stone);margin-top:22px}
.se-pick-cta{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);opacity:.72;margin-top:12px;transition:.3s}
.se-pick-cta::after{content:" ↗"}
@media(max-width:820px){
  .se-pick{grid-template-columns:1fr}
  .se-pick-ig{border-right:0;border-bottom:1px solid var(--ink);padding:10px 0}
  .se-pick-copy{padding:28px 24px}
  .se-pick-title{margin-top:18px}
}

/* ===== 글 대표이미지(스냅팀 사진 자리) — image-ready ===== */
.single .post-hero{margin:26px 0 6px}
.single .post-hero img{width:100%;height:auto;display:block;border-radius:4px}
.single .post-hero figcaption{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.4px;color:var(--stone);margin-top:9px}

/* ===== 섹션 배너 (TREND·PROFILE) — 픽 히어로 변형 ===== */
.se-sec{min-height:380px;margin:16px 0 0}
.se-sec .se-pick-title{font-size:clamp(24px,2.6vw,38px)}
.se-sec .se-pick-kicker{color:var(--ink)}
.se-sec-trend{grid-template-columns:1fr auto}      /* 사진 우측으로 — 픽과 반대 */
.se-sec-trend .se-pick-ig{order:2;border-right:0;border-left:1px solid var(--cline)}
.se-sec-trend .se-pick-copy{order:1}
@media(max-width:820px){.se-sec-trend{grid-template-columns:1fr}.se-sec-trend .se-pick-ig{order:0;border-left:0;border-bottom:1px solid var(--cline)}}

/* ===== 카테고리 디자인 배너 (영문·한영공용) ===== */
.se-catban{position:relative;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:54px 0;margin:18px 0 8px}
.se-catban-k{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--stone);margin-bottom:16px}
.se-catban-t{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(40px,7vw,84px);letter-spacing:-2.5px;line-height:.94;margin:0;display:flex;align-items:center;gap:14px}
.se-catban-t .sl{font-weight:300;transform:scaleY(1.5);display:inline-block;color:var(--ink)}
.se-catban-d{font-family:"Space Grotesk",sans-serif;font-size:15px;line-height:1.7;color:var(--bodymut);margin:20px 0 0;max-width:560px}
/* KMA 네온 변형 — KMA2026 홈 참고(블랙 베이스 + 네온오렌지 #FF7901 + 2026 워터마크) */
.se-catban--kma{background:#000;color:#fff;border:0;border-radius:6px;padding:64px 48px;overflow:hidden}
.se-catban--kma .se-catban-k{color:#FF7901;letter-spacing:5px}
.se-catban--kma .se-catban-t,.se-catban--kma .se-catban-t .sl{color:#fff}
.se-catban--kma .se-catban-t .sl{color:#FF7901;text-shadow:0 0 18px rgba(255,121,1,.7)}
.se-catban--kma .se-catban-d{color:#cbc8c2}
.se-catban-yr{position:absolute;right:-10px;top:50%;transform:translateY(-50%) scaleY(1.3);font-family:Archivo,sans-serif;font-weight:800;font-size:230px;line-height:.7;color:transparent;-webkit-text-stroke:1.5px rgba(255,121,1,.32);pointer-events:none;user-select:none}
@media(max-width:680px){.se-catban--kma{padding:44px 26px}.se-catban-yr{font-size:130px;right:-6px}}
