/* ============================================================
   2026 해양 생태 변화 대응 공모전 — v1 「오션 매거진」
   Social Studio 해양공모전 카드뉴스(magazine 스타일)의 시각 언어를 웹으로 옮겼습니다.
   · 어두운 지면(night)과 종이 지면(paper)을 번갈아 씁니다.
   · 제목마다 한 구절만 형광색으로 강조합니다 (--accent).
   · 사진은 글자 밑에 깔지 않고 액자처럼 따로 둡니다 — 글자는 항상 단색 바탕 위에 있습니다.
   가독성 기준: 본문 17~18px · 최소 14px · 본문 대비 7:1 이상 · 보조 글자 4.5:1 이상.
   ============================================================ */

:root{
  /* 지면 — 스튜디오 magazine 스타일과 같은 값 */
  --night:    #101713;
  --night-2:  #18221D;
  --forest:   #173F2E;
  --paper:    #F4F5F0;
  --paper-2:  #E8EBE3;
  --white:    #FFFFFF;

  /* 글자 */
  --ink:      #14271E;
  --ink-2:    #34443B;
  --ink-3:    #47534C;
  --on-night:   #F5F5EF;
  --on-night-2: #C9D3CC;
  --on-night-3: #A3B0A8;

  /* 강조 — 어두운 지면에서만 형광색, 종이 지면에서는 진한 초록 */
  --cyan:   #67E8F9;
  --lime:   #C8FF3D;
  --yellow: #FFCF4A;
  --pink:   #FF7A90;
  --green:  #166349;
  --flag:   #A3341C;   /* AI 표기 경고 한 곳에만 */

  --line:       rgba(20,39,30,.18);
  --line-night: rgba(245,245,239,.18);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
  --measure: 36em;     /* 한 줄 약 36자 — 한글 본문이 가장 편하게 읽히는 폭 */
  --radius: 4px;
}

/* ---------- 지면 테마 ----------
   섹션이나 패널에 t-night / t-paper / t-forest / t-white 를 붙이면
   글자색·보조색·구분선·강조색이 함께 바뀝니다. */
.t-paper, .t-white{
  color:var(--ink);
  --text-2:var(--ink-2); --text-3:var(--ink-3);
  --rule:var(--line); --rule-strong:rgba(20,39,30,.42);
  --accent:var(--green); --focus:#0B63CE;
  --btn-bg:var(--night); --btn-fg:var(--lime);
}
.t-paper{ background:var(--paper); }
.t-white{ background:var(--white); }
.t-paper-2{ background:var(--paper-2); }

.t-night, .t-forest{
  color:var(--on-night);
  --text-2:var(--on-night-2); --text-3:var(--on-night-3);
  --rule:var(--line-night); --rule-strong:rgba(245,245,239,.5);
  --accent:var(--cyan); --focus:var(--cyan);
  --btn-bg:var(--lime); --btn-fg:var(--night);
}
.t-night{ background:var(--night); }
.t-forest{ background:var(--forest); --accent:var(--lime); --focus:var(--lime); }

/* 어두운 지면에서 강조색 고르기 (카드뉴스와 같은 짝) */
.accent-cyan{ --accent:var(--cyan); }
.accent-lime{ --accent:var(--lime); }
.accent-yellow{ --accent:var(--yellow); }
.accent-pink{ --accent:var(--pink); }

/* ---------- 기본 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.78;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
  font-feature-settings:"tnum" 0;
}
@media (min-width: 768px){ body{ font-size:18px; } }

img{ max-width:100%; display:block; }
p{ margin:0; }
em{ font-style:normal; }
strong{ font-weight:700; }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px; }

:focus-visible{ outline:3px solid var(--focus, #0B63CE); outline-offset:3px; border-radius:3px; }
::selection{ background:var(--lime); color:var(--night); }

/* 고정 내비 밑으로 숨지 않게 띄우는 거리. 목적지(섹션)가 아니라 스크롤하는 쪽(html)에 두어서
   #이름 이동뿐 아니라 Tab 키로 옮겨 간 초점도 내비 밑에 가리지 않고 보이는 자리로 스크롤됩니다.
   (섹션에 scroll-margin 을 함께 주면 두 번 띄워지므로 쓰지 않습니다.) */
html{ scroll-padding-top:84px; }
/* 내비가 두 줄(아래 줄은 가로 스크롤)로 바뀌는 너비 — 아래 '내비' 의 979px 과 함께 바꿉니다 */
@media (max-width: 979px){ html{ scroll-padding-top:118px; } }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--lime); color:var(--night);
  padding:12px 18px; font-size:16px; font-weight:700;
}
.skip:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 내비 ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:20px;
  padding:12px var(--gut);
  border-bottom:1px solid var(--line-night);
}
.nav__mark{
  display:flex; align-items:center; gap:10px; min-height:44px;
  font-size:17px; font-weight:800; letter-spacing:-.015em;
  text-decoration:none; white-space:nowrap;
}
.nav__mark .mark{ color:var(--cyan); }
.nav__mark-short{ display:none; }
.nav__links{ display:flex; gap:4px; margin-left:auto; }
.nav__links a{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 10px;
  font-size:16px; font-weight:600; color:var(--on-night-2); text-decoration:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav__links a:hover{ color:var(--on-night); }
.nav__links a.is-current{ color:var(--on-night); border-bottom-color:var(--lime); }
.nav__links a.nav__links-out{ color:var(--on-night); }

@media (max-width: 1180px){
  .nav__mark-full{ display:none; }
  .nav__mark-short{ display:inline; }
}
/* 섹션 링크가 한 줄에 다 들어가지 않는 너비부터 두 줄. 위 html scroll-padding-top 의 979px 과 함께 바꿉니다 */
@media (max-width: 979px){
  .nav{ flex-wrap:wrap; gap:0 12px; padding-bottom:0; }
  .nav .btn--sm{ margin-left:auto; }
  .nav__links{
    order:3; width:calc(100% + 2 * var(--gut)); margin:8px calc(-1 * var(--gut)) 0;
    padding:0 calc(var(--gut) - 10px);
    overflow-x:auto; scrollbar-width:none;
    border-top:1px solid var(--line-night);
  }
  .nav__links::-webkit-scrollbar{ display:none; }
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px;
  font-family:var(--font); font-size:17px; font-weight:800; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  background:var(--btn-bg, var(--night)); color:var(--btn-fg, var(--lime));
  border:2px solid var(--btn-bg, var(--night)); border-radius:8px;
  transition:transform .16s, box-shadow .16s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 0 -2px rgba(0,0,0,.28); }
.btn::after{ content:"→"; content:"→" / ""; font-weight:700; }
.btn--sm{ min-height:44px; padding:0 18px; font-size:16px; }
.btn--sm::after{ content:none; }
.btn--lg{ min-height:58px; padding:0 32px; font-size:18px; }
.btn--ghost{
  background:transparent; color:inherit; border-color:var(--rule-strong);
}
.btn--ghost::after{ content:"↓"; content:"↓" / ""; }
.btn--ghost:hover{ border-color:currentColor; box-shadow:none; }
.btn.is-pending{
  background:transparent; color:var(--text-2); border-style:dashed; border-color:var(--rule-strong);
  cursor:not-allowed; transform:none; box-shadow:none;
}
.btn.is-pending::after{ content:none; }

/* ---------- 폴리오 (지면 머리) ----------
   카드뉴스 위쪽의 「브랜드 · 꼭지 · 쪽 번호」 줄입니다. 쪽 번호는 main.js 가 채웁니다. */
.folio{
  display:flex; align-items:baseline; gap:12px 18px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:clamp(32px, 5vw, 56px);
  border-bottom:1px solid var(--rule);
  font-size:15px; font-weight:700; line-height:1.4;
}
.folio__brand{ font-size:17px; font-weight:800; letter-spacing:-.015em; }
.folio__label{ margin-left:auto; color:var(--text-2); }
.folio__no{ color:var(--text-3); font-variant-numeric:tabular-nums; }
.folio__no:empty{ display:none; }

/* ---------- 공통 타이포 ---------- */
.page{ padding:clamp(56px, 8vw, 104px) 0; }
.title{
  margin:0;
  font-size:clamp(32px, 4.6vw, 54px); font-weight:800;
  line-height:1.24; letter-spacing:-.03em;
}
.title em, .hero__title em, .spread__name em, .quote em, .close__title em{ color:var(--accent); }
.lede{
  margin-top:20px; max-width:var(--measure);
  font-size:clamp(18px, 1.5vw, 20px); line-height:1.75; color:var(--text-2);
}
.head{ margin-bottom:clamp(36px, 5vw, 60px); }
.head--split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px clamp(32px, 6vw, 88px); align-items:end;
}
.head--split .lede{ margin-top:0; }
@media (max-width: 860px){ .head--split{ grid-template-columns:1fr; } }
/* 주제: 제목이 길어서 한 줄 전체를 쓰고, 설명과 말풍선은 그 아래 두 칸으로 */
.head--topics .head__aside{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(32px, 6vw, 88px); align-items:start;
}
.head--topics .guide{ margin-top:20px; }
@media (max-width: 860px){ .head--topics .head__aside{ grid-template-columns:1fr; } }

.tbd{
  display:inline-block;
  font-size:14px; font-weight:600; line-height:1.5;
  color:var(--text-3);
  border:1px dashed var(--rule-strong); border-radius:999px;
  padding:1px 10px; margin-left:2px; vertical-align:1px;
  white-space:nowrap;
}
.note{ margin-top:20px; font-size:15px; color:var(--text-3); max-width:var(--measure); }

/* ---------- 히어로 (표지) ---------- */
.hero{ padding:clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.hero .folio{ margin-bottom:clamp(28px, 4vw, 48px); }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.hero__cat{
  display:inline-block; margin-bottom:22px;
  padding:5px 14px; border:1.5px solid var(--rule-strong); border-radius:999px;
  font-size:15px; font-weight:700; color:var(--on-night);
}
.hero__title{
  margin:0;
  font-size:clamp(46px, 7.4vw, 96px); font-weight:800;
  line-height:1.12; letter-spacing:-.04em;
}
.hero__lede{
  margin-top:26px; max-width:24em;
  font-size:clamp(18px, 1.7vw, 21px); line-height:1.7; color:var(--text-2);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero__note{ margin-top:14px; font-size:15px; color:var(--text-2); max-width:30em; }
.hero__note:empty{ display:none; }

.hero__figure{ margin:0; }
.hero__media{
  aspect-ratio:2/3; max-height:min(76vh, 760px); width:100%;
  overflow:hidden; border-radius:var(--radius); background:var(--night-2);
}
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.fig-cap{ margin-top:10px; font-size:14px; line-height:1.6; color:var(--text-3); }

@media (max-width: 860px){
  .hero__grid{ grid-template-columns:1fr; }
  /* 좁은 화면에서는 제목이 첫 화면에 먼저 보이도록 글 → 사진 순서 */
  .hero__media{ aspect-ratio:4/5; max-height:56vh; }
}

/* 한눈에 보기 */
.facts{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);
  margin:clamp(44px, 6vw, 72px) 0 0; border-top:1px solid var(--rule);
}
.facts__item{ padding:20px 20px 0 0; }
.facts__item + .facts__item{ padding-left:20px; border-left:1px solid var(--rule); }
.facts__item dt{ font-size:15px; font-weight:700; color:var(--text-3); margin-bottom:6px; }
.facts__item dd{ margin:0; font-size:clamp(18px, 1.7vw, 21px); font-weight:800; line-height:1.45; letter-spacing:-.015em; }
@media (max-width: 760px){
  .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .facts__item, .facts__item + .facts__item{ padding:18px 14px 18px 0; border-left:0; border-bottom:1px solid var(--rule); }
  .facts__item:nth-child(even){ padding-left:14px; border-left:1px solid var(--rule); }
  .facts__item:nth-last-child(-n+2){ border-bottom:0; }
}

/* ---------- 캐릭터 안내 말풍선 ---------- */
.guide{
  display:flex; gap:16px; align-items:flex-start;
  max-width:40em; margin-top:30px;
}
.guide__face{
  width:68px; height:68px; flex:none;
  border-radius:50%; object-fit:cover;
  border:2px solid var(--ink); background:var(--white);
}
.guide__bubble{
  position:relative; flex:1; margin:0;
  background:var(--white); color:var(--ink);
  border:2px solid var(--ink); border-radius:16px;
  padding:14px 20px 16px;
  font-size:17px; line-height:1.72;
}
.guide__bubble::before{
  content:""; position:absolute; left:-11px; top:24px;
  width:18px; height:18px; background:var(--white);
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
}
.guide__who{ display:block; margin-bottom:2px; font-size:14px; font-weight:800; color:var(--green); }

/* ---------- 주제 (카드뉴스 2~4장을 펼친 지면) ---------- */
.spreads{ display:grid; gap:clamp(18px, 2.4vw, 28px); }
.spread{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(24px, 4vw, 56px); align-items:center;
  padding:clamp(22px, 3.5vw, 44px);
  border-radius:var(--radius);
}
.spread.t-white{ border:1px solid var(--line); }
.spread--flip .spread__figure{ order:2; }
.spread__figure{ margin:0; }
.spread__figure img{ width:100%; height:auto; border-radius:2px; }
.spread__no{ font-size:16px; font-weight:800; color:var(--text-3); margin-bottom:10px; }
.spread__name{
  margin:0 0 16px;
  font-size:clamp(28px, 3.2vw, 40px); font-weight:800;
  line-height:1.28; letter-spacing:-.03em;
}
.spread__desc{ font-size:clamp(17px, 1.4vw, 19px); line-height:1.78; color:var(--text-2); max-width:24em; }
.spread__eg{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.spread__eg li{
  padding:4px 12px; border:1px solid var(--rule-strong); border-radius:999px;
  font-size:15px; font-weight:600; color:var(--text-2);
}
@media (max-width: 860px){
  .spread{ grid-template-columns:1fr; }
  .spread--flip .spread__figure{ order:0; }
}

/* ---------- 인용 지면 ---------- */
.quote{ padding:clamp(72px, 10vw, 128px) 0; }
.quote__text{
  margin:0; max-width:21em;
  font-size:clamp(26px, 3.6vw, 44px); font-weight:800;
  line-height:1.5; letter-spacing:-.03em;
}
.quote__by{ margin-top:22px; font-size:16px; font-weight:600; color:var(--text-3); }

/* ---------- 시상 ---------- */
.prize{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:12px clamp(28px, 5vw, 64px); align-items:end;
  padding:clamp(28px, 4vw, 48px) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.prize__amount{
  margin:0; color:var(--accent);
  font-size:clamp(76px, 13vw, 168px); font-weight:800;
  line-height:.95; letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.prize__amount span{ font-size:.3em; letter-spacing:-.02em; margin-left:.08em; }
.prize__side{ padding-bottom:.6em; }
.prize__label{ font-size:16px; font-weight:700; color:var(--text-3); }
.prize__teams{ margin-top:4px; font-size:clamp(24px, 2.8vw, 34px); font-weight:800; letter-spacing:-.02em; }
.prize__kinds{ margin-top:6px; font-size:17px; color:var(--text-2); }
.awards{
  margin-top:clamp(28px, 4vw, 44px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 28px);
}
.award{ border-top:2px solid var(--text); padding-top:14px; }
.award__name{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 0 10px; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.award__sum{ font-size:14px; font-weight:600; color:var(--text-3); white-space:nowrap; }
.award__list{ list-style:none; margin:0; padding:0; }
.award__list li{ display:grid; grid-template-columns:1fr auto 3.2em; gap:10px; padding:9px 0; border-bottom:1px solid var(--rule); font-size:16px; font-variant-numeric:tabular-nums; }
.award__rank{ font-weight:700; }
.award__amt{ color:var(--accent); font-weight:700; }
.award__n{ text-align:right; color:var(--text-2); }
.award__memo{ margin-top:10px; font-size:14px; color:var(--text-3); }
@media (max-width: 860px){ .awards{ grid-template-columns:1fr; } }
@media (max-width: 640px){
  .prize{ grid-template-columns:1fr; }
  .prize__side{ padding-bottom:0; }
}

/* ---------- 참여 방법 ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(20px, 2.6vw, 32px);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.step{ border-top:3px solid var(--ink); padding-top:18px; }
.step__no{
  font-size:40px; font-weight:800; line-height:1; letter-spacing:-.04em;
  color:var(--green); margin-bottom:14px; font-variant-numeric:tabular-nums;
}
.step__name{ margin:0 0 10px; font-size:clamp(20px, 2vw, 23px); font-weight:800; line-height:1.4; letter-spacing:-.02em; }
.step__desc{ font-size:17px; line-height:1.75; color:var(--text-2); }
@media (max-width: 880px){ .steps{ grid-template-columns:1fr; } }

.specs-title{ margin:clamp(48px, 6vw, 72px) 0 18px; font-size:clamp(22px, 2.2vw, 26px); font-weight:800; letter-spacing:-.02em; }
.specs{
  margin:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
  background:var(--white);
}
.spec{ padding:20px 22px 22px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.spec dt{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:18px; font-weight:800; }
.spec dd{ margin:0; font-size:17px; line-height:1.7; color:var(--text-2); }
.spec__memo{ font-size:14px; color:var(--text-3); }
.spec--wide{ grid-column:span 2; }
@media (max-width: 520px){ .spec--wide{ grid-column:auto; } }

/* ---------- Instagram 가산점 ---------- */
.bonus{
  margin-top:clamp(28px, 4vw, 40px);
  display:flex; gap:16px 20px; align-items:flex-start;
  padding:20px 22px; background:var(--white);
  border:1px solid var(--rule); border-left:4px solid var(--accent); border-radius:10px;
}
.bonus__tag{
  flex:none; margin:2px 0 0; padding:3px 12px; border-radius:999px;
  background:var(--accent); color:var(--white); font-size:14px; font-weight:800; white-space:nowrap;
}
.bonus__title{ margin:0; font-size:clamp(18px, 1.8vw, 21px); font-weight:800; letter-spacing:-.02em; }
.bonus__desc{ margin:6px 0 0; font-size:16px; line-height:1.65; color:var(--text-2); }
.bonus__tags{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.bonus__tags li{ padding:4px 12px; border:1px solid var(--rule-strong); border-radius:999px; font-size:15px; font-weight:700; color:var(--text); }
@media (max-width: 520px){ .bonus{ flex-direction:column; gap:10px; padding:18px 16px; } }

/* ---------- 포스터·사진 구분 ----------
   카드 두 장을 나란히 (좁은 화면에서는 위아래로).
   예시 그림 아래 설명은 그림 밖에 둡니다 — 사진 위에 글자를 얹지 않는다는 규칙과 맞춥니다. */
.kinds{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
  background:var(--white);
}
.kind{
  display:grid;
  grid-template-columns:clamp(112px, 30%, 168px) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"fig name" "fig lines";
  gap:10px 20px; align-content:start;
  padding:20px 22px 22px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.kind__fig{ grid-area:fig; margin:0; min-width:0; }
.kind__img{
  display:block; width:100%; height:auto; aspect-ratio:1 / 1;
  object-fit:cover; border-radius:2px; background:var(--paper-2);
}
.kind__img--photo{ object-position:80% 50%; }
.kind__img--poster{ object-position:50% 58%; }
.kind__fig figcaption{ margin-top:6px; font-size:14px; line-height:1.4; color:var(--text-3); }
.kind__name{
  grid-area:name; display:flex; align-items:center; gap:10px;
  margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em;
}
.kind__lines{ grid-area:lines; list-style:none; margin:0; padding:0; }
.kind__lines li{ position:relative; padding-left:14px; font-size:16px; line-height:1.65; color:var(--text-2); }
.kind__lines li + li{ margin-top:6px; }
.kind__lines li::before{
  content:""; position:absolute; left:0; top:.82em;
  width:6px; height:2px; background:var(--text-3);
}
.kinds__route{
  display:flex; align-items:baseline; gap:10px;
  margin:16px 0 0; font-size:17px; font-weight:700; line-height:1.6;
}
.kinds__route::before{ content:"→"; content:"→" / ""; flex:none; color:var(--accent); font-weight:800; }
@media (max-width: 880px){ .kinds{ grid-template-columns:1fr; } }
@media (max-width: 520px){
  .kind{
    grid-template-columns:104px minmax(0,1fr);
    grid-template-rows:auto auto;
    grid-template-areas:"fig name" "lines lines";
    gap:14px 16px; padding:18px;
  }
  .kind__name{ align-self:center; }
}
.spec__icon{
  width:26px; height:26px; flex:none;
  fill:none; stroke:var(--green); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width: 880px){ .specs{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .specs{ grid-template-columns:1fr; } }

/* ---------- 응모작 ---------- */
.rank-head{
  display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap;
  margin:0 0 20px; padding-bottom:12px;
  border-bottom:2px solid var(--ink);
}
.rank-head--gap{ margin-top:clamp(44px, 5vw, 64px); }
.rank-title{ margin:0; font-size:clamp(22px, 2.3vw, 26px); font-weight:800; letter-spacing:-.025em; }
.rank-note{ font-size:16px; color:var(--text-3); }

.works{
  display:grid; gap:clamp(14px, 1.8vw, 22px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.works--rank{ grid-template-columns:repeat(5, minmax(0,1fr)); }
@media (max-width: 1080px){ .works--rank{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px){ .works--rank{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* 휴대폰에서도 두 칸 — 한 칸이면 카드 10장이 화면 20개 분량이 됩니다 */
@media (max-width: 560px){
  .works{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .work__body, .card__body{ padding:12px 12px 14px; }
  .work__title, .card__title{ font-size:16px; }
}
@media (max-width: 330px){ .works, .works--rank{ grid-template-columns:1fr; } }

.work, .card{
  display:flex; flex-direction:column; margin:0;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.work:hover{ border-color:rgba(20,39,30,.4); transform:translateY(-2px); }
.work__media, .card__media{
  position:relative; aspect-ratio:4/5; background:var(--paper-2); overflow:hidden;
}
/* 세로로 긴 원본도 4:5 틀을 밀어내지 않도록 틀에 고정합니다 */
.work__media img, .card__media img, .card__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.work__rank{
  position:absolute; top:10px; left:10px; z-index:1;
  min-width:34px; height:34px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--night); color:var(--lime);
  font-size:18px; font-weight:800; border-radius:6px;
}
.card__type{
  position:absolute; top:10px; right:10px; z-index:1;
  font-size:14px; font-weight:700; line-height:1.4;
  background:rgba(16,23,19,.88); color:var(--on-night);
  padding:3px 10px; border-radius:999px;
}
.card__ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:20px;
  background:var(--paper-2);
}
.card__ph-mark{
  width:40px; height:40px; opacity:.5; background-color:var(--ink);
  -webkit-mask:url("img/mark.svg") center / contain no-repeat;
  mask:url("img/mark.svg") center / contain no-repeat;
}
.card__ph-text{ font-size:15px; color:var(--ink-3); }

.work__body, .card__body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.card__theme{ font-size:14px; font-weight:700; line-height:1.45; color:var(--green); }
.work__title, .card__title{
  margin:0; font-size:17px; font-weight:700; line-height:1.45; letter-spacing:-.015em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__by{ font-size:15px; color:var(--ink-3); }
.work__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.work__date{ font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.tag{
  display:inline-block;
  font-size:14px; font-weight:700; line-height:1.45;
  padding:2px 9px; border-radius:999px;
  background:rgba(22,99,73,.1); color:var(--green);
}
.tag--ai{ background:rgba(163,52,28,.1); color:var(--flag); }

.like{
  align-self:flex-start; margin-top:2px;
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 16px 0 13px;
  background:transparent; border:1.5px solid var(--line); border-radius:999px;
  font-family:var(--font); font-size:16px; font-weight:700; color:var(--ink-2);
  cursor:pointer;
  transition:border-color .18s, color .18s, background .18s;
}
.like svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.like:hover{ border-color:var(--ink); color:var(--ink); }
.like.is-on{ border-color:var(--flag); color:var(--flag); background:rgba(163,52,28,.07); }
.like.is-on svg{ fill:currentColor; }
.like__n{ font-variant-numeric:tabular-nums; }

.gallery__loading, .gallery__empty{ grid-column:1/-1; font-size:17px; color:var(--text-3, var(--ink-3)); }

/* 웹앱을 못 불러 마지막으로 받은 목록을 보여줄 때 목록 위에 붙는 안내 (main.js 의 markStaleNotice) */
.works-notice{
  margin:0 0 20px; padding:10px 14px;
  font-size:15px; font-weight:600; line-height:1.5; color:var(--ink-2);
  background:var(--white); border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:var(--radius);
}

/* 마지막 목록을 먼저 보여주고 새 목록을 확인하는 동안의 작은 안내 (main.js 의 paintWorksStatus) */
.works-notice--quiet{
  padding:0; background:none; border:0;
  font-size:14px; font-weight:500; color:var(--ink-3);
}

/* 목록이 오래 걸릴 때 '불러오는 중' 밑에 붙는 줄 · 못 불러왔을 때의 '다시 시도' (main.js) */
.gallery__slow{ display:block; margin-top:6px; font-size:15px; }
.works-fail{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.works-fail .gallery__empty{ margin:0; }
.btn.works-retry::after{ content:none; }

.works-more{ margin-top:clamp(36px, 4.5vw, 52px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.works-more .note{ margin-top:0; }
.works-more .btn--ghost::after{ content:"→"; content:"→" / ""; }

/* 예시 작품 */
.gallery{
  display:grid; gap:clamp(14px, 1.8vw, 22px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.credit{ display:block; margin-top:10px; font-size:15px; color:var(--text-3); }

/* ---------- 응원 게시판 ----------
   공모전 전체에 남기는 한 줄 응원 (index.html 의 #cheer, assets/cheer.js).
   위: 남기기 칸(흰 패널) · 아래: 응원 카드 목록(최신순, 20개씩 '더 보기'). */
.cheer-form{
  padding:clamp(18px, 2.6vw, 28px);
  background:var(--white); color:var(--ink);
  border:1px solid var(--rule); border-left:4px solid var(--accent); border-radius:10px;
}
.cheer-form__row{
  display:grid; grid-template-columns:minmax(0, 200px) minmax(0,1fr) auto;
  gap:14px 16px; align-items:end;
}
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field__top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.field__label{ font-size:16px; font-weight:800; line-height:1.5; }
.field__opt{ font-weight:600; color:var(--ink-3); }
.field__count{ font-size:14px; font-weight:600; line-height:1.5; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.field__count.is-near{ font-weight:600; }
.field__count.is-over{ color:var(--flag); font-weight:800; }
.field__input{
  width:100%; min-height:52px; margin:0; padding:0 14px;
  font-family:var(--font); font-size:17px; color:var(--ink);
  background:var(--white);
  border:1.5px solid rgba(20,39,30,.6); border-radius:8px;
  transition:border-color .16s;
}
.field__input::placeholder{ color:#5F6B64; opacity:1; }
.field__input:hover{ border-color:var(--ink-2); }
.field__input:focus{ border-color:var(--ink); }
.field__input[aria-invalid="true"]{ border-color:var(--flag); box-shadow:inset 0 0 0 1px var(--flag); }
.field__input[readonly]{ background:var(--paper); }
.cheer-form__send{ min-width:120px; }
.cheer-form__send[aria-disabled="true"]{ opacity:.6; cursor:progress; transform:none; box-shadow:none; }
.cheer-form__rules{ margin-top:14px; font-size:15px; line-height:1.6; color:var(--ink-3); max-width:none; }
.cheer-form__status{ margin-top:10px; font-size:16px; font-weight:700; line-height:1.55; color:var(--ink-2); }
.cheer-form__status:empty{ margin-top:0; }
.cheer-form__status.is-ok{ color:var(--green); }
.cheer-form__status.is-error{ color:var(--flag); }
@media (max-width: 760px){
  .cheer-form__row{ grid-template-columns:minmax(0,1fr); }
  .cheer-form__send{ width:100%; }
}
@media (max-width: 520px){
  .cheer-form{ padding:18px 16px; }
}

.cheer-board{ margin-top:clamp(40px, 5vw, 60px); }
.cheer-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.cheer-item{
  display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  min-width:0; padding:16px 18px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
}
.cheer-item:focus{ outline:3px solid var(--focus, #0B63CE); outline-offset:2px; }
/* 방문자 글은 unicode-bidi:isolate — 오른쪽→왼쪽 문자나 방향 제어 문자가 이름·시간 표시를 뒤섞지 않게 */
.cheer-item__msg{
  font-size:17px; font-weight:600; line-height:1.6; letter-spacing:-.01em;
  overflow-wrap:anywhere; unicode-bidi:isolate;
}
.cheer-item__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
  font-size:14px; line-height:1.5; color:var(--ink-3);
}
.cheer-item__name{ font-weight:700; color:var(--green); overflow-wrap:anywhere; unicode-bidi:isolate; min-width:0; }
.cheer-item__time{ font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 신고: 눈에 덜 띄는 글자 버튼 (누를 자리는 32px 확보) */
.cheer-item__report{
  margin:-6px -8px -6px auto; padding:0 8px; min-height:32px; min-width:32px;
  font-family:var(--font); font-size:14px; font-weight:600; line-height:1.5; color:var(--ink-3);
  background:none; border:0; border-radius:6px; cursor:pointer;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.22em;
  transition:text-decoration-color .16s, color .16s;
}
.cheer-item__report:hover{ color:var(--ink); text-decoration-color:currentColor; }
.cheer-item__report[aria-disabled="true"]{ cursor:default; text-decoration:none; }
.cheer-item__report[aria-disabled="true"]:not(.is-done){ cursor:progress; }
.cheer-item__report.is-done{ color:var(--ink-3); }
.cheer-item__note{ font-size:14px; font-weight:600; line-height:1.5; color:var(--flag); }
.cheer-item__note:empty{ display:none; }
/* 신고가 모여 숨겨지는 글: 흐려지며 빠집니다 */
.cheer-item.is-leaving{ opacity:0; transform:scale(.97); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
/* 방금 남긴 글: 잠깐 연두빛으로 떠올랐다가 가라앉고, 초록 테두리는 남겨 둡니다 */
.cheer-item.is-new{ border-color:var(--green); box-shadow:inset 3px 0 0 var(--green); animation:cheer-new 2.4s ease-out; }
@keyframes cheer-new{
  0%{ background:rgba(200,255,61,.45); transform:translateY(-4px); }
  20%{ transform:none; }
  100%{ background:var(--white); }
}
@media (prefers-reduced-motion: reduce){ .cheer-item.is-new{ animation:none; } .cheer-item.is-leaving{ transition:none; } }

.cheer-board__msg{ font-size:17px; color:var(--text-3); }
.cheer-list:not(:empty) + .cheer-board__msg:not(:empty){ margin-top:16px; }
.cheer-more{ margin-top:clamp(24px, 3vw, 32px); }
.cheer-more__btn[hidden]{ display:none; }
.cheer-more__btn[aria-disabled="true"]{ cursor:progress; opacity:.7; }
.cheer-more:has(> [hidden]){ display:none; }

/* ---------- 일정 ---------- */
.timeline{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.tl{
  display:grid;
  grid-template-columns:minmax(130px, 210px) minmax(0,1fr) auto;
  gap:10px 20px; align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--rule);
}
.tl__date{ font-size:clamp(19px, 1.8vw, 22px); font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.tl__date--empty{ color:var(--text-3); }
.tl__name{ font-size:clamp(19px, 1.8vw, 22px); font-weight:700; }
.tl__state{
  font-size:14px; font-weight:700; line-height:1.5; white-space:nowrap;
  color:var(--text-3); border:1px dashed var(--rule-strong); border-radius:999px; padding:2px 12px;
}
.tl__state--set{ color:var(--night); background:var(--accent); border:1px solid var(--accent); }
@media (max-width: 560px){
  .tl{ grid-template-columns:1fr auto; }
  .tl__date{ grid-column:1 / -1; }
}

/* ---------- 유의사항 ---------- */
.split{
  display:grid; grid-template-columns:minmax(0, 360px) minmax(0,1fr);
  gap:clamp(28px, 6vw, 88px); align-items:start;
}
.split .head{ margin-bottom:0; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split .head{ margin-bottom:28px; } }

.rules{ list-style:none; margin:0; padding:0; counter-reset:rule; }
.rule{
  position:relative; padding:22px 0 22px 52px; border-top:1px solid var(--rule);
  counter-increment:rule;
}
.rule::before{
  content:counter(rule); position:absolute; left:0; top:22px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper);
  font-size:16px; font-weight:800;
}
.rule:first-child{ border-top:0; padding-top:0; }
.rule:first-child::before{ top:0; }
.rule__name{ margin:0 0 6px; font-size:clamp(19px, 1.7vw, 21px); font-weight:800; line-height:1.5; letter-spacing:-.02em; }
.rule__desc{ font-size:17px; line-height:1.75; color:var(--text-2); max-width:var(--measure); }
.rule__desc strong{ color:var(--ink); }
.rule--flag{
  padding:22px 22px 22px 70px; margin-bottom:10px;
  background:var(--white); border:2px solid var(--flag); border-radius:var(--radius);
}
.rule--flag::before{ left:20px; top:22px; background:var(--flag); color:var(--white); content:"!"; }
.rule--flag:first-child{ padding-top:22px; }
.rule--flag:first-child::before{ top:22px; }
.rule--flag .rule__name{ color:var(--flag); }
.rule--flag + .rule{ border-top:0; }

/* ---------- FAQ ---------- */
.faq{ border-top:2px solid var(--ink); }
.qa{ border-bottom:1px solid var(--rule); }
.qa > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  min-height:64px; padding:16px 44px 16px 0; position:relative;
  font-size:clamp(18px, 1.6vw, 20px); font-weight:700; line-height:1.5; letter-spacing:-.015em;
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary::before{
  content:"Q"; flex:none; font-weight:800; color:var(--green);
}
.qa > summary::after{
  content:""; position:absolute; right:10px; top:50%;
  width:12px; height:12px; margin-top:-8px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg); transition:transform .2s;
}
.qa[open] > summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.qa > summary:hover{ color:var(--green); }
.qa__body{ padding:0 0 22px 32px; }
.qa__body p{ font-size:17px; line-height:1.78; color:var(--text-2); max-width:var(--measure); }
.qa__body a{ color:var(--green); font-weight:700; }

/* ---------- 마무리 CTA ---------- */
.close{ padding:clamp(64px, 9vw, 112px) 0; }
.close__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.close__title{
  margin:0 0 18px;
  font-size:clamp(32px, 4.6vw, 56px); font-weight:800; line-height:1.24; letter-spacing:-.035em;
}
.close__lede{ font-size:clamp(18px, 1.5vw, 20px); color:var(--text-2); max-width:24em; margin-bottom:30px; }
.close__note{ margin-top:14px; font-size:15px; color:var(--text-2); }
.close__note:empty{ display:none; }
.close__figure{ margin:0; }
.close__figure img{ width:100%; height:auto; border-radius:var(--radius); }
@media (max-width: 860px){
  .close__grid{ grid-template-columns:1fr; }
  .close__figure{ max-width:420px; }
}

/* ---------- 푸터 ---------- */
.foot{ padding:clamp(48px, 6vw, 72px) 0 40px; border-top:1px solid var(--line-night); }
.foot__inner{ display:grid; gap:clamp(36px, 4vw, 52px); }
.foot__cols{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(36px, 5vw, 72px); }
@media (max-width: 860px){ .foot__cols{ grid-template-columns:1fr; } }

.orgs__title, .contact__title{ margin:0 0 16px; font-size:16px; font-weight:800; color:var(--cyan); }
.orgs__row{
  display:flex; align-items:center; gap:clamp(16px, 2.5vw, 28px);
  padding:14px 0; border-top:1px solid var(--line-night);
}
.orgs__row:last-of-type{ border-bottom:1px solid var(--line-night); }
.orgs__role{ flex:0 0 52px; font-size:16px; font-weight:700; color:var(--on-night-2); }
.orgs__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
@media (max-width: 520px){
  .orgs__row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .orgs__role{ flex:none; }
}
.org{ display:flex; align-items:center; gap:11px; }
/* 기관 CI 는 공식 컬러 그대로 흰 칩 위에 올립니다. */
.org__logo{
  width:auto; height:32px; max-width:180px; object-fit:contain;
  background:#fff; border-radius:6px; padding:9px 13px; box-sizing:content-box;
}
.org__logo.is-missing{
  width:34px; height:34px; padding:0;
  border:1px dashed var(--line-night); border-radius:4px; background:transparent;
}
/* 네 기관 모두 CI 에 기관명이 있어 옆 글자는 화면낭독기용으로만 둡니다. */
.org__name{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.org__logo.is-missing + .org__name{
  position:static; width:auto; height:auto; margin:0; clip:auto; overflow:visible;
  font-size:16px; font-weight:600; color:var(--on-night);
}

.contact__list{ margin:0; }
.contact__row{
  display:flex; flex-wrap:wrap; gap:4px 18px;
  padding:13px 0; border-top:1px solid var(--line-night);
}
.contact__row:last-child{ border-bottom:1px solid var(--line-night); }
.contact__row dt{ flex:0 0 88px; font-size:16px; font-weight:700; color:var(--on-night-2); }
.contact__row dd{ margin:0; font-size:16px; color:var(--on-night); }
.contact__mail{ color:var(--on-night); font-weight:700; }

.foot__base{ padding-top:24px; border-top:1px solid var(--line-night); display:grid; gap:10px; }
.foot__name{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:var(--on-night); }
.foot__name .mark{ color:var(--cyan); }
.foot__note{ font-size:15px; line-height:1.75; color:var(--on-night-2); max-width:46em; }
.foot__ver{ font-size:14px; color:var(--on-night-3); font-variant-numeric:tabular-nums; }

/* ---------- 공모전 마크 ---------- */
.mark{
  display:inline-block; flex:none;
  width:1.6em; height:1.6em;
  background-color:currentColor;
  -webkit-mask:url("img/mark.svg") center / contain no-repeat;
  mask:url("img/mark.svg") center / contain no-repeat;
}

/* ================= 전체 작품 페이지 ================= */
.pagehead{ padding:clamp(28px, 4vw, 48px) 0 clamp(44px, 6vw, 72px); }
.pagehead .folio{ margin-bottom:clamp(28px, 4vw, 44px); }

.toolbar{
  display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center;
  padding-bottom:22px; margin-bottom:22px;
  border-bottom:1px solid var(--rule);
}
.filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filter--end{ margin-left:auto; }
@media (max-width: 760px){ .filter--end{ margin-left:0; } }
.filter__label{ margin-right:4px; font-size:16px; font-weight:800; color:var(--ink); }
.chip{
  min-height:44px; padding:0 16px;
  background:var(--white); border:1.5px solid var(--line); border-radius:999px;
  font-family:var(--font); font-size:16px; font-weight:600; color:var(--ink-2);
  cursor:pointer; white-space:nowrap;
  transition:border-color .18s, color .18s, background .18s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{ background:var(--night); border-color:var(--night); color:var(--lime); font-weight:800; }
.result-count{ margin:0 0 22px; font-size:16px; font-weight:600; color:var(--ink-3); }

/* ---------- 작품 크게 보기 ----------
   카드는 4:5 로 잘라 보여줍니다. 미디어 위에 덮은 투명 버튼(.zoom)을 누르면
   <dialog class="viewer"> 에서 원본 비율 그대로 엽니다 (main.js 의 openViewer). */
.work__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

.zoom{
  position:absolute; inset:0; z-index:2;
  margin:0; padding:0; border:0; border-radius:0;
  background:transparent; cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
/* 사진 위에서도 보이도록 바깥은 초점색, 안쪽은 흰 띠를 겹칩니다 */
.zoom:focus-visible{
  outline:3px solid var(--focus, #0B63CE); outline-offset:-3px;
  box-shadow:inset 0 0 0 6px var(--white);
  border-radius:var(--radius);
}
.zoom__icon{
  position:absolute; right:10px; bottom:10px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,23,19,.88); color:var(--on-night);
  opacity:0; transform:scale(.88);
  transition:opacity .18s, transform .18s;
}
.zoom__icon svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
}
.zoom:hover .zoom__icon, .zoom:focus-visible .zoom__icon{ opacity:1; transform:none; }
/* 마우스가 없는 기기에서는 처음부터 보여 둡니다 — 눌러서 크게 볼 수 있다는 표시 */
@media (hover: none){ .zoom__icon{ opacity:1; transform:none; } }

/* 영상 카드: 가운데 재생 표시. 늘 보입니다 (사진과 구분되도록) */
.zoom--play{ cursor:pointer; }
.zoom__play{
  position:absolute; left:50%; top:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,23,19,.8); color:var(--on-night);
  box-shadow:0 0 0 2px rgba(245,245,239,.85);
  transition:background .18s, transform .18s;
}
.zoom__play svg{ width:20px; height:20px; margin-left:2px; fill:currentColor; }
.zoom--play:hover .zoom__play, .zoom--play:focus-visible .zoom__play{ background:var(--night); transform:scale(1.08); }
@media (prefers-reduced-motion: reduce){ .zoom__play{ transition:none; } }

/* 열려 있는 동안 뒤 화면은 스크롤되지 않습니다 */
.is-viewing, .is-viewing body{ overflow:hidden; }

.viewer{
  position:fixed; inset:0;
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:rgba(16,23,19,.97); color:var(--on-night);
  overflow:hidden;
}
.viewer[open]{
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  animation:viewer-in .2s ease-out;
}
.viewer::backdrop{ background:rgba(16,23,19,.6); }
@keyframes viewer-in{ from{ opacity:0; } to{ opacity:1; } }

.viewer__top{ display:flex; align-items:center; gap:12px; padding:10px 16px; }
.viewer__count{
  font-size:15px; font-weight:700; line-height:1.4;
  color:var(--on-night-2); font-variant-numeric:tabular-nums;
}
.viewer__close{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 16px 0 12px;
  background:rgba(245,245,239,.08); color:var(--on-night);
  border:1.5px solid var(--line-night); border-radius:999px;
  font-family:var(--font); font-size:16px; font-weight:700; line-height:1;
  cursor:pointer;
}
.viewer__close:hover{ border-color:var(--on-night); }
.viewer__close svg, .viewer__nav svg{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* 무대: 가로는 화면의 92% 안, 세로는 위아래 띠를 뺀 나머지 전부 */
.viewer__stage{
  position:relative; min-height:0;
  width:min(92vw, calc(100% - 32px)); justify-self:center;
}
.viewer__media{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:2px;
}
/* 영상도 원본 비율 크기로: 컨트롤 막대가 화면 아래가 아니라 영상 바로 위에 붙습니다 */
.viewer__media--video{ width:auto; height:auto; border-radius:0; }
/* 드라이브 영상 틀: 포스터 비율(--ar, 모르면 16:9)대로 무대 안에 들어가는 가장 큰 크기.
   세로(9:16) 영상은 높이에 맞춰 좁고 길게 섭니다. 컨테이너 단위를 모르는 옛 브라우저는 무대를 꽉 채웁니다. */
.viewer__frame{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%;
  border:0; background:#000;
}
@supports (width: 1cqw){
  .viewer__stage{ container-type:size; }
  .viewer__frame{
    width:min(100cqw, 100cqh * var(--ar, 1.7778));
    height:min(100cqh, 100cqw / var(--ar, 1.7778));
  }
}
.viewer__fail{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center;
  font-size:16px; color:var(--on-night-2);
}

.viewer__bar{
  display:grid; grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center; gap:12px;
  width:min(720px, calc(100% - 32px)); justify-self:center;
  padding:14px 0 max(18px, env(safe-area-inset-bottom, 0px));
}
.viewer__nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:transparent; color:var(--on-night);
  border:1.5px solid var(--line-night); border-radius:50%;
  cursor:pointer;
}
.viewer__nav--prev{ grid-column:1; grid-row:1; }
.viewer__nav--next{ grid-column:3; grid-row:1; }
.viewer__nav:hover:not(:disabled){ border-color:var(--on-night); }
.viewer__nav:disabled{ opacity:.35; cursor:default; }
.viewer__nav[hidden]{ display:none; }

.viewer__cap{ grid-column:2; grid-row:1; min-width:0; text-align:center; }
.viewer__title{
  font-size:clamp(17px, 1.6vw, 20px); font-weight:800;
  line-height:1.4; letter-spacing:-.015em; color:var(--on-night);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.viewer__meta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 8px; margin-top:8px;
  font-size:14px; font-weight:600; line-height:1.45; color:var(--on-night-2);
}
.viewer__meta:empty{ display:none; }
.viewer__kind{
  padding:1px 10px; border:1px solid var(--rule-strong); border-radius:999px;
  font-weight:700; color:var(--on-night);
}
.viewer__ai{
  padding:2px 10px; border-radius:999px;
  background:var(--pink); color:var(--night); font-weight:800;
}
/* 드라이브 영상: 끼워 넣은 재생기가 막힐 때 새 탭에서 여는 링크 (main.js 의 viewerShow) */
.viewer__link{
  display:inline-block; padding:4px 2px;
  color:var(--on-night); font-weight:700;
  text-decoration:underline; text-underline-offset:.22em;
}
.viewer__link:hover{ color:var(--lime); }

@media (min-width: 768px){
  .viewer__top{ padding:14px 24px; }
  .viewer__bar{ padding-top:16px; padding-bottom:max(22px, env(safe-area-inset-bottom, 0px)); }
}
/* 휴대폰을 가로로 눕혔을 때: 위아래 띠를 줄여 작품을 크게 (버튼은 44px 유지) */
@media (max-height: 500px){
  .viewer__top{ padding:4px 16px; }
  .viewer__bar{ padding-top:6px; padding-bottom:max(6px, env(safe-area-inset-bottom, 0px)); }
  /* 부문·주제 표시는 감추되, 영상을 가로로 보는 휴대폰에서도 드라이브 링크는 남깁니다 */
  .viewer__meta{ margin-top:0; }
  .viewer__meta > :not(.viewer__link){ display:none; }
  .viewer__title{ -webkit-line-clamp:1; }
}
@media (prefers-reduced-motion: reduce){
  .viewer[open]{ animation:none; }
}

/* ================= 섹션 접기 (main.js 의 initFolds) =================
   자바스크립트가 내비 탭 섹션마다 .fold 를 달고, 폴리오 줄을 접기 단추(.fold__btn)로 바꿉니다.
   접힌 섹션(.is-folded)은 폴리오 줄과 제목 한 줄만 남습니다. 자바스크립트가 없으면 이 규칙은 쓰이지 않고 모두 펼쳐 보입니다.
   펼친 섹션은 원래 .page 여백 그대로이고(자바스크립트가 없을 때와 같은 모습), 접힌 섹션만 위아래 여백을 줄입니다.
   위쪽 여백이 바뀌는 만큼은 main.js(animateFold)가 높이와 함께 부드럽게 옮겨서 단추가 툭 튀지 않습니다. */
.fold.is-folded{
  padding-top:clamp(28px, 4vw, 48px); padding-bottom:clamp(24px, 3vw, 36px);
  box-shadow:inset 0 1px 0 var(--rule);
}
/* 접힌 칸은 hidden="until-found" 라 상자는 남고 내용만 숨습니다 — 칸 자체의 여백도 없앱니다 */
.fold__panel[hidden], .wgroup__panel[hidden]{ padding:0; margin:0; }

.fold__btn{
  width:100%; padding:0 0 14px;
  background:none; border:0; border-bottom:1px solid var(--rule); border-radius:0;
  font-family:inherit; letter-spacing:inherit; color:inherit; text-align:left;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.fold__btn:focus-visible{ outline-offset:6px; }
.fold.is-folded .fold__btn{ margin-bottom:0; padding-bottom:0; border-bottom:0; }

/* 접혔을 때만 보이는 제목 한 줄 (h2 를 옮겨 적은 것) */
.fold__title{ display:none; }
.fold.is-folded .fold__title{
  display:block; flex:1 0 100%; order:9; margin-top:6px;
  font-size:clamp(20px, 2.2vw, 26px); font-weight:800; line-height:1.4; letter-spacing:-.025em;
}
.fold__title em{ color:var(--accent); }

/* 「펼치기 ⌄ · 접기 ⌃」 — 홈 섹션과 전체 작품 부문이 함께 씁니다 */
.fold__hint{
  display:inline-flex; align-items:center; gap:4px; flex:none; align-self:center;
  min-height:32px; padding:0 10px 0 13px;
  border:1.5px solid var(--rule-strong); border-radius:999px;
  font-size:14px; font-weight:700; line-height:1; white-space:nowrap; color:inherit;
  transition:border-color .18s, background-color .18s;
}
.fold__hint svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s ease;
}
[aria-expanded="true"] > .fold__hint svg{ transform:rotate(180deg); }
.fold__btn:hover .fold__hint, .wgroup__btn:hover .fold__hint{ border-color:currentColor; }

/* 휴대폰: 브랜드는 감추고 「꼭지 · 쪽 번호 ……… 펼치기」 한 줄로 */
@media (max-width: 560px){
  .fold__btn .folio__brand{ display:none; }
  .fold__btn .folio__label{ margin-left:0; }
  .fold__btn .fold__hint{ margin-left:auto; }
}

/* ================= 전체 작품: 부문별 묶음 (works.js) =================
   영상 · 사진 · 포스터 세 묶음. 처음에는 모두 접혀 있고, 머리줄을 누르면 펼칩니다. */
.wgroups{ border-top:2px solid var(--ink); }
.wgroups > .gallery__loading, .wgroups > .gallery__empty, .wgroups > .works-fail{ padding-top:20px; }
.wgroup{ border-bottom:1px solid var(--rule); }
.wgroup__head{ margin:0; font-size:inherit; font-weight:inherit; }
.wgroup__btn{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:72px; padding:14px 0;
  background:none; border:0; border-radius:0;
  font-family:inherit; color:inherit; text-align:left;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.wgroup__btn:focus-visible{ outline-offset:2px; }
.wgroup__name{ font-size:clamp(22px, 2.3vw, 26px); font-weight:800; line-height:1.3; letter-spacing:-.025em; }
.wgroup__count{
  min-width:2.4em; padding:3px 10px; border-radius:999px;
  background:var(--night); color:var(--lime);
  font-size:15px; font-weight:800; line-height:1.4; text-align:center; font-variant-numeric:tabular-nums;
}
.wgroup__count.is-zero{ background:transparent; color:var(--ink-3); box-shadow:inset 0 0 0 1.5px var(--line); }
.wgroup__btn .fold__hint{ margin-left:auto; }
.wgroup__panel{ padding:4px 0 clamp(28px, 4vw, 44px); }