/* Music Project NOVA. 구조는 sample-jennie(한 화면 + 팝업), 메뉴는 soyeong-portfolio(maxrichter 식 오버레이).
   글꼴 : 영문 Josefin Sans, 한글 Gothic A1, 숫자 Jost. 워드마크도 Josefin 700. 색은 브로슈어. */
@font-face { font-family: "Jost Digits"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73oTd4jQmfxI.woff2) format("woff2"); unicode-range: U+0030-0039; }
:root { --field: #f4f1ee;
  --font: "Jost Digits", "Josefin Sans", "Gothic A1", -apple-system, system-ui, sans-serif;
  --ink: #181818; --olive: #646460; --cream: #f1ebe6; --cream-2: #e6dfd8; --coral: #d47f70; --coral-text: #a9553f; --grey: #8a8580; --grey-text: #6a655f;
  --ease: cubic-bezier(.75, 0, .5, 1); --ease2: cubic-bezier(.22, 1, .36, 1); --transition: all 300ms ease-in;
  --gutter: 24px; --max: 1140px; --line: rgba(241, 235, 230, .22); --ink-2: #242424; --coral-2: #b96559;
  --t-display: clamp(96px, 22vw, 320px); --t-h1: clamp(34px, 4.6vw, 56px); --t-h2: 28px; --t-lead: 20px; --t-body: 16px; --t-caption: 13px; --t-label: 12px;
}
@media (max-width: 820px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; }
body { font-family: var(--font); font-weight: 200; font-size: 16px; line-height: 1.5; word-spacing: .05em; letter-spacing: .02em; color: var(--cream); background: var(--ink); word-break: keep-all; overflow-wrap: break-word; }  /* 한글을 단어 단위로 줄바꿈 */
body.noscroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { -webkit-user-drag: none; user-select: none; display: block; }
p .ko { display: block; margin-top: 8px; }

/* ---------- 워드마크 : 브로슈어 원본 마크 이미지 (가로 3.3 : 1) ---------- */
.wordmark { display: inline-block; height: 1em; width: auto; vertical-align: middle; }

/* ---------- 대괄호 링크 ---------- */
.bracket { text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; transition: color .3s var(--ease); cursor: pointer; }
.bracket::before { content: "[ "; } .bracket::after { content: " ]"; }
.bracket:hover { color: var(--coral); }

/* ---------- 고정 트리거 ---------- */
.fixed-trigger { position: fixed; top: 24px; z-index: 100; cursor: pointer; font-size: 22px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); transition: color .3s var(--ease); font-weight: 600; }
#brand { left: var(--gutter); display: flex; align-items: center; gap: 14px; }
#brand .wordmark { height: 22px; }
#brand .sub { font-size: 11px; letter-spacing: .22em; opacity: .7; padding-top: 3px; }
#menu-trigger { right: var(--gutter); top: 24px; }
#menu-trigger .close-label, body.show-menu #menu-trigger .menu-label { display: none; }
body.show-menu #menu-trigger .close-label { display: inline; }
#menu-trigger:hover { color: var(--coral); }

/* ---------- 오버레이 메뉴 (maxrichter 식). dialog 라 어떤 팝업 위에서도 열린다 ---------- */
.menu-container { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; z-index: 300; background: transparent; color: var(--cream); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); font-family: var(--font); font-weight: 200; }
.menu-container::backdrop { background: transparent; }
.menu-container:not([open]) { display: none; }
.menu-container[open] { display: block; }
.menu-container.show { opacity: 1; pointer-events: auto; }
.menu-blur { position: absolute; inset: 0; z-index: 0; background: rgba(24, 24, 24, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.menu-home { position: absolute; top: 24px; left: var(--gutter); z-index: 2; }
.menu-home img { height: 22px; width: auto; display: block; }
#menu-close { position: absolute; top: 24px; right: var(--gutter); color: var(--cream); font-size: 22px; line-height: 1; }
.menu-nav { position: absolute; z-index: 1; top: 50%; left: 0; width: 100%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 8px; padding: 0 var(--gutter); align-items: end; font-size: 30px; line-height: 1.15; text-transform: uppercase; font-weight: 400; }
.menu-column .menu-link { display: block; font-weight: 600; filter: blur(30px); transition: color .3s var(--ease), filter .43s var(--ease); cursor: pointer; }
.menu-column.show .menu-link { filter: blur(0); }
.menu-column .menu-link:hover { color: var(--coral); }
.menu-column .idx { display: block; font-size: 11px; letter-spacing: .22em; opacity: .78; margin-bottom: 10px; margin-left: 1px; }
.menu-footer { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding: 32px var(--gutter) 24px; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
.menu-footer .col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.menu-footer .col:last-child { text-align: right; align-items: flex-end; }
.menu-footer .wordmark { height: 16px; width: auto; align-self: flex-start; }
.menu-footer a:hover { color: var(--coral); }

/* ---------- 한 화면 (jennie 구조) ---------- */
#container { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; }
#container.fixed { position: fixed; }
section.page { width: 100%; height: 100svh; min-height: 640px; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#featured .background { position: absolute; inset: 0; }
#featured .background img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.gradient { position: absolute; box-sizing: border-box; width: 100%; left: 0; pointer-events: none; z-index: 1; }
#top-gradient { top: 0; height: 100px; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
#bottom-gradient { bottom: 0; height: 50%; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
#featured .background::after { content: ""; position: absolute; inset: 0; background: rgba(24, 24, 24, .25); }
.hero-mark { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--gutter) 22.9vh; pointer-events: none; }
.hero-mark img { width: min(442px, 40.8vw); height: auto; opacity: 0; transform: translateY(10px); transition: opacity 800ms ease-out 250ms, transform 800ms ease-out 250ms; filter: drop-shadow(0 4px 30px rgba(24, 24, 24, .6)); }
body.loaded .hero-mark img { opacity: 1; transform: none; }
.copyright br.m { display: none; }
.copyright { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; font-weight: 400; z-index: 5; padding: 0 var(--gutter); }
/* 메인 소셜 : SM recruit 처럼 원 안에 아이콘. 36px 원, 간격 12px. 사진 위라 반투명 흰 원에 검정 아이콘 */
#social { position: absolute; bottom: 20px; left: var(--gutter); z-index: 10; display: flex; flex-direction: row; gap: 12px; }
#social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); display: grid; place-items: center; font-size: 16px; transition: background-color .2s, color .2s, transform .2s; }
#social a:hover { background: var(--coral); color: #fff; transform: translateY(-2px); }


/* 스크롤바 숨김 (원본 사이트들과 같이) */
::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { scrollbar-width: none; }
/* ---------- 팝업 : oddatelier 내부 페이지처럼 흰 바탕 검정 글자 ---------- */
dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--ink); font-family: var(--font); font-weight: 200; }
dialog::backdrop { background: rgba(24, 24, 24, .6); }
dialog[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
/* 팝업 상단 바 : 마크(홈), [ BACK ], [ MENU ]. soyeong-portfolio 하위 페이지와 같은 배치 */
.dlg-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 2; display: flex; align-items: center; gap: 22px; padding: 24px var(--gutter); pointer-events: none; }
.dlg-bar > * { pointer-events: auto; }
.dlg-home, .menu-home { outline: none; }
/* 키보드 포커스 링 (WCAG 2.4.7) : 진한 산호 2px, 검정 바탕에선 원래 산호. 마우스 클릭엔 안 뜬다 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--coral-text); outline-offset: 3px; }
#menu-trigger:focus-visible, #menu-close:focus-visible, #social a:focus-visible, .mail-open:focus-visible, #menuDialog :focus-visible, .dlg-bar :focus-visible, #aboutDialog :focus-visible, .totop:focus-visible { outline-color: var(--coral); }
.search input:focus-visible, #contactDialog .f input:focus-visible, #contactDialog .f select:focus-visible, #contactDialog .f textarea:focus-visible { outline: 2px solid var(--coral-text); outline-offset: 2px; }
.dlg-home img { height: 22px; width: auto; display: block; }
/* MENU 글자 : 대문자 높이가 마크 높이와 같은 글자 크기(22px, 모바일 18px) */
.dlg-back, .dlg-menu { font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; font-weight: 600; transition: color .3s var(--ease); }
.dlg-back:hover, .dlg-menu:hover { color: var(--coral); }
.dlg-menu { margin-left: auto; }
dialog .wrapper { width: 100%; max-width: 1100px; margin: 0 auto; min-height: 100svh; padding: 110px var(--gutter) 60px; }
dialog .kicker { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--coral-text); margin: 0 0 18px; font-weight: 400; }
dialog h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; margin: 0 0 20px; line-height: 1.15; letter-spacing: 0; }
dialog .rule { height: 1px; background: rgba(24, 24, 24, .2); margin: 24px 0 32px; position: relative; }
dialog .rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--coral); }
dialog p { margin: 0 0 20px; line-height: 1.7; font-size: 16px; font-weight: 200; }
dialog .lead { font-size: 18px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
figure.wide { margin: 36px 0 0; }
figure.wide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
figure.wide figcaption { margin-top: 12px; font-size: 13px; opacity: .7; }
dialog .actions { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; font-size: 14px; font-weight: 400; }

/* ---------- About : 검정 바탕, 가운데 원본 마크, 가운데 정렬 글 ---------- */
#aboutDialog { background: var(--ink); color: var(--cream); }
#aboutDialog .dlg-menu { color: var(--cream); } #aboutDialog .dlg-menu:hover { color: var(--coral); }
.about { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.about-mark { width: min(520px, 70vw); height: auto; margin: 10px 0 56px; }
.about p { max-width: 44em; }
.about .actions { justify-content: center; }

/* ---------- Artists 목록 : 3열 카드, 번호, 호버 시 VIEW PROFILE ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.artist { display: block; position: relative; cursor: pointer; opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease2), transform 1s var(--ease2); }
.artist.in { opacity: 1; transform: none; }
.artist .frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ebe8e3; }
.artist .frame img, .artist .frame .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease2); }
.artist:hover .frame img, .artist:hover .frame .ph { transform: scale(1.05); }
.artist .ph { display: grid; place-items: center; font-size: clamp(90px, 12vw, 200px); font-weight: 300; color: rgba(100, 100, 96, .14); line-height: 1; }
.artist .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(63, 59, 55, .5), transparent 55%); opacity: 0; transition: opacity .6s; }
.artist:hover .frame::after { opacity: 1; }
.artist .view { position: absolute; right: 24px; bottom: 24px; color: #fff; font-size: 12px; letter-spacing: .3em; font-weight: 400; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: all .5s var(--ease2); display: flex; align-items: center; gap: 10px; z-index: 1; }
.artist .view i { font-style: normal; transition: transform .4s var(--ease2); }
.artist:hover .view { opacity: 1; transform: none; } .artist:hover .view i { transform: translateX(5px); }
.artist .meta { padding: 20px 0 0; display: flex; flex-direction: column; gap: 6px; }
.artist .name { font-size: 18px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.artist .name small { font-size: 14px; font-weight: 300; color: var(--ink); margin-left: 10px; letter-spacing: .05em; white-space: nowrap; }
.artist .inst { font-size: 12px; letter-spacing: .22em; color: var(--coral-text); font-weight: 400; white-space: nowrap; position: relative; text-transform: uppercase; align-self: flex-start; }
.artist .inst::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease2); }
.artist:hover .inst::after { transform: scaleX(1); transform-origin: left; }
.artist.soon { cursor: default; }
.artist.soon .frame { background: none; border: 1px dashed rgba(100, 100, 96, .3); display: grid; place-items: center; }
.artist.soon .frame div { text-align: center; font-size: 14px; letter-spacing: .35em; color: var(--coral-text); line-height: 2; font-weight: 400; text-transform: uppercase; }
.artist.soon:hover .frame { border-color: var(--coral); }
.artist.soon .frame::after { display: none; }
#artistsDialog .intro { color: var(--ink); letter-spacing: .04em; line-height: 1.8; }

/* ---------- 프로필 : 큰 이름이 올라오고, 왼쪽 사진, 오른쪽 대문자 소개가 순서대로 떠오른다. 아래 Previous / Next ---------- */
/* 제목 : 가운데 이름, 아래 작은 산호색 악기 */
.head { padding: 0 0 44px; }
.bigname { font-size: clamp(28px, 3.4vw, 48px); font-weight: 600; letter-spacing: 0; line-height: 1.2; margin: 0; overflow: hidden; }
.bigname span { display: inline-block; transform: translateY(110%); animation: ar-up 1s var(--ease2) forwards; }
.head .inst { margin: 0; text-transform: uppercase; font-weight: 400; opacity: 0; animation: ar-fade .8s var(--ease2) .35s forwards; }
@keyframes ar-fade { to { opacity: 1; } }
.head.va { text-align: center; }
.head.va .inst { font-size: 12px; letter-spacing: .4em; text-indent: .4em; color: var(--coral-text); margin-top: 10px; }
@keyframes ar-up { to { transform: none; } }
.cols { display: grid; grid-template-columns: 484px 1fr; gap: 20px; align-items: start; }
.photo .frame { aspect-ratio: 4 / 5; overflow: hidden; background: #ebe8e3; position: relative; }
.photo img, .photo .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.text { padding: 10px 0 0 10px; }
.ptabs { display: flex; gap: 24px; font-size: 16px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 20px; }
.ptabs button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; opacity: .4; transition: opacity .25s; }
.ptabs button:hover { opacity: .7; }
.ptabs button.current { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.pane[hidden] { display: none; }
/* 약력 : 학력 / 경력 / 수상 묶음, 묶음 안은 연도 왼쪽 한글 오른쪽 */
.career { max-width: 580px; }
.career .bhead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(24, 24, 24, .15); }
.career h3 { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; font-weight: 400; margin: 0; color: var(--coral-text); }
.career h3 span { color: var(--ink); margin-left: 10px; letter-spacing: .1em; }
.career .blk { padding-bottom: 16px; } .career .blk:last-child { padding-bottom: 0; }
.crow { display: grid; grid-template-columns: 78px 1fr; gap: 16px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(24, 24, 24, .15); }
.crow .y { font-size: 14px; font-weight: 400; letter-spacing: .06em; }
.crow p { margin: 0; }
.crow .ko { font-size: 15px; font-weight: 300; line-height: 1.5; }
.cnav { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.cnav a { width: 16px; height: 16px; display: block; color: var(--ink); transition: opacity .2s, color .2s; }
.cnav a svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cnav a:hover { color: var(--coral); }
.cnav a[disabled] { opacity: .2; pointer-events: none; }
.cnav .cpage { font-size: 11px; letter-spacing: .15em; opacity: .78; }
.bio { max-width: 580px; }
.bio p { font-size: 18px; letter-spacing: .02em; line-height: 1.4; font-weight: 200; margin: 0 0 24px; }
.bio p.ko { font-size: 15px; font-weight: 300; line-height: 1.6; margin: -10px 0 32px; }
.icons { display: flex; gap: 22px; margin-top: 60px; }
.icons a, .icons span { width: 26px; height: 26px; display: block; transition: transform .4s var(--ease2), color .3s; }
.icons span { opacity: .35; }
.icons a:hover { transform: translateY(-4px); color: var(--coral); }
.icons svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.artist-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 90px; padding-top: 28px; border-top: 1px solid rgba(24, 24, 24, .15); }
.artist-nav a { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; font-weight: 400; transition: color .3s; }
.artist-nav a:hover { color: var(--coral); }
.artist-nav a:last-child { text-align: right; }
.artist-nav a.list, .pbot a.list { font-size: 13px; letter-spacing: .06em; text-transform: none; height: 34px; min-width: 0; padding: 0 22px; font-weight: 400; }
.artist-nav a.list:hover, .pbot a.list:hover { color: var(--ink); }
.artist-nav a[hidden] { visibility: hidden; display: block; }
.artist-nav #ar-prev .dir::before { content: "\2190\00a0\00a0"; } .artist-nav #ar-next .dir::after { content: "\00a0\00a0\2192"; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; }
::view-transition-group(hero) { animation-duration: .8s; animation-timing-function: var(--ease2); }

/* ---------- History : 머리 사진 + 사진 카드 + 아카이브 표. 치수는 oddatelier NEWS 실측 (history-sample.html) ---------- */
.dlg-bar { transition: color .3s; }
#showsDialog .dlg-bar.light { color: #fff; }
.hhero { position: relative; height: 78vh; min-height: 520px; overflow: hidden; background: var(--ink); }
.hhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 65%; }
.hhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 55%); }
.hhero .cap { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 1; text-align: center; color: #fff; padding: 0 var(--gutter); }
#showsDialog .hhero h2 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; margin: 0; letter-spacing: .02em; line-height: 1.3; }
.hhero .sub { margin: 18px 0 0; font-size: clamp(14px, 1.25vw, 17px); font-weight: 300; line-height: 1.8; letter-spacing: .02em; opacity: .92; }
#showsDialog .wrapper { max-width: 1128px; min-height: 0; padding: 48px var(--gutter) 100px; }
#showsDialog .wrapper > h2 { margin-bottom: 31px; }
.hcards { display: grid; grid-template-columns: 1fr 1fr; }
.hcard { display: block; padding: 0 5px 50px; text-align: center; }
.hcard .img { position: relative; overflow: hidden; }
.hcard img { width: 100%; aspect-ratio: 549 / 309; object-fit: cover; display: block; }
/* 호버 : HYBE 뉴스룸처럼 제목 색만 바뀐다 */
.hcard h4 { transition: color .3s; } .hcard:hover h4 { color: var(--coral); }
.hcard h4 { font-size: 18px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0; margin: 0; padding: 16px 0 3px; }
.hcard .d { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; margin: 0; }
.hcard.hid { display: none; }
.hcard.peek { max-height: 190px; overflow: hidden; pointer-events: none; padding-bottom: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%); }
.more-wrap { text-align: center; position: relative; z-index: 1; margin-top: -90px; }
#notice-more { margin-top: 50px; }
.more { display: inline-flex; justify-content: center; align-items: center; min-width: 160px; height: 50px; padding: 15px 30px; border: 1px solid #000; background: #000; color: #fff; font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: 0; cursor: pointer; white-space: nowrap; transition: color .15s ease-in-out, background-color .15s ease-in-out; }
.more:hover { background: #fff; color: #000; }
.archive { margin-top: 10px; }
.hgal { margin-top: 20px; padding-top: 50px; border-top: 1px solid rgba(24, 24, 24, .15); }
.archive .yr { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 0 5px 48px; align-items: start; }
.archive .yr h3 { margin: 0; font-size: 56px; font-weight: 700; line-height: .9; letter-spacing: -.02em; position: sticky; top: 90px; }
.archive .list { border-top: 1px solid var(--ink); }
.archive .row { display: grid; grid-template-columns: 70px 1fr; gap: 6px 20px; padding: 16px 0; border-bottom: 1px solid rgba(24, 24, 24, .15); align-items: baseline; }
.archive .row .d { font-size: 13px; font-weight: 400; letter-spacing: .08em; grid-row: span 2; }
.archive .row .t { font-size: 16px; font-weight: 400; line-height: 1.4; }
.archive .row .m { font-size: 12px; font-weight: 300; opacity: .78; letter-spacing: .02em; }
.archive .row .m:empty { display: none; }
#galleryDialog .wrapper { max-width: 1128px; }
#galleryDialog .wrapper > h2 { margin-bottom: 31px; }
/* Gallery 필터 줄 : 프로필 탭 + 오른쪽 검색 420px */
.fbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 0 0 44px; padding: 0 5px; }
.fbar .ptabs { margin: 0; padding: 0 0 4px; }
.fbar .search { width: 420px; margin: 0; }
.hcard .img .cnt { position: absolute; right: 10px; bottom: 10px; font-size: 11px; letter-spacing: .12em; font-weight: 400; color: #fff; background: rgba(24, 24, 24, .55); padding: 5px 8px 4px; line-height: 1; }
/* 공연 상세 : oddatelier 뉴스 글처럼 흰 페이지. 가운데 제목 30px, 사진 세로로(첫 장 크게, 뒤는 두 장씩), 아래 이전 / 목록 / 다음 */
.post { background: #fff; color: var(--ink); opacity: 0; transition: opacity .2s ease; }
.post::backdrop { background: #fff; }
.post.show { opacity: 1; }
.pwrap { max-width: 1080px; margin: 0 auto; padding: 110px var(--gutter) 80px; text-align: center; }
.pk { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--coral-text); font-weight: 400; margin: 0 0 14px; }
.pwrap h2 { font-size: 30px; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 0 0 30px; }
.photos { display: flex; flex-direction: column; gap: 40px; }
.photos img { width: 100%; height: auto; display: block; }
.photos .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pbot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; margin-top: 70px; padding-top: 24px; border-top: 1px solid rgba(24, 24, 24, .15); text-align: left; }
.pbot a { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; min-width: 0; }
.pbot a.next { text-align: right; }
.pbot a[disabled] { opacity: .25; pointer-events: none; }
.pbot .prev .dir::before { content: "\2190\00a0\00a0"; } .pbot .next .dir::after { content: "\00a0\00a0\2192"; }
/* 메일 창 : 메뉴와 같은 덮개, 가운데 흰 상자에 주소와 복사 버튼 */
.maildlg { background: transparent; opacity: 0; transition: opacity .2s ease; display: grid; place-items: center; padding: 24px; }
@media (hover: none) { .more:hover { background: var(--ink); color: #fff; } }
.maildlg.show { opacity: 1; }
.maildlg::backdrop { background: rgba(24, 24, 24, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.maildlg[open] { display: grid; } .maildlg:not([open]) { display: none; }
.mailbox { position: relative; background: #fff; color: var(--ink); width: min(440px, 100%); padding: 26px 24px 0; text-align: left; }
.mailbox .modal-close { top: 16px; right: 16px; width: 16px; height: 16px; }
.mailbox .mk { margin: 0 0 14px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--coral-text); font-weight: 400; text-align: center; }
.citem { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 14px 0 16px; border-top: 1px solid rgba(24, 24, 24, .15); font-size: 14px; font-weight: 300; }
.citem i { font-size: 16px; text-align: center; }
.citem .k { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--coral-text); font-weight: 400; display: block; margin-bottom: 3px; }
.citem .v { font-weight: 400; text-transform: none; word-break: break-all; }
.citem .acts { display: flex; gap: 6px; }
.citem .act { font-family: var(--font); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 400; border: 1px solid var(--ink); background: #fff; color: var(--ink); padding: 7px 10px 5px; line-height: 1; cursor: pointer; transition: color .15s, background-color .15s; }
.citem .act:hover { background: var(--ink); color: #fff; }
@media (hover: none) { .citem .act:hover { background: #fff; color: var(--ink); } }
/* 나가기 경고 : 연락 모달과 같은 흰 상자 */
.leavebox { padding: 32px 24px 26px; text-align: center; }
.leavebox .lt { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.leavebox .ld { margin: 0 0 22px; font-size: 13px; font-weight: 300; line-height: 1.7; opacity: .75; }
.leavebox .lbtns { display: flex; gap: 8px; justify-content: center; }
.leavebox .more { height: 44px; min-width: 0; padding: 0 20px; font-size: 14px; }
.leavebox .more.ghost { background: #fff; color: var(--ink); } .leavebox .more.ghost:hover { background: var(--ink); color: #fff; }
/* 복사 알림 : 상자 아래 가운데, 산호색 상자에 흰 글자로 또렷하게. 떠오르며 나타난다 */
.mailbox .copied { position: absolute; left: 50%; bottom: -58px; transform: translate(-50%, 8px); margin: 0; padding: 11px 22px 10px; display: inline-flex; align-items: center; background: var(--coral); color: #fff; font-size: 14px; font-weight: 400; letter-spacing: .06em; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.mailbox .copied.on { opacity: 1; transform: translate(-50%, 0); }
/* 체크 : 가는 선이 왼쪽에서 그려진다 */
.mailbox .copied svg { width: 18px; height: 18px; margin-right: 10px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mailbox .copied .ck { stroke-dasharray: 24; stroke-dashoffset: 24; }
.mailbox .copied.on .ck { animation: ck-draw .35s ease-out .1s forwards; }
@keyframes ck-draw { to { stroke-dashoffset: 0; } }

/* ---------- Notice : 검색 한 줄 + 표 (No. / Title / Writer / Date). oddatelier 의 notice 와 같은 짜임 ---------- */
/* 공지 머리줄 : 검색창 왼쪽, 오른쪽 끝에 접속 중 / 누적 방문 */
.nbar { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 56px; }
.nbar .search { margin: 0; }
.vis { margin: 0; padding-bottom: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; opacity: .78; white-space: nowrap; }
.vis b { font-weight: 400; margin: 0 14px 0 6px; }
.vis .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-right: 6px; vertical-align: 1px; }
.search { width: 640px; max-width: 100%; margin: 0 0 56px; position: relative; }
.search input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); font-family: var(--font); font-size: 15px; font-weight: 300; letter-spacing: .06em; padding: 6px 30px 10px 0; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: rgba(24, 24, 24, .45); }
.search .icon { position: absolute; right: 4px; top: 6px; width: 13px; height: 13px; border: 1.5px solid var(--ink); border-radius: 50%; pointer-events: none; }
.search .icon::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; padding: 0 0 12px; border-bottom: 1px solid var(--ink); }
table.list td { padding: 20px 0; border-bottom: 1px solid rgba(24, 24, 24, .18); vertical-align: middle; font-size: 15px; font-weight: 300; }
table.list .no, table.list th:first-child { width: 72px; }
/* 양끝에서 16px 띄운다 (머리글과 줄 모두). 모바일은 따로 */
table.list th:first-child, table.list td:first-child { padding-left: 16px; }
table.list th:last-child, table.list td:last-child { padding-right: 16px; }
/* 고정 공지 : 줄 전체를 연한 베이지로 (샘플 B). 번호 없음 */
table.list tr.pinned td { background: #f4f1ee; }
table.list .pinicon { width: 15px; height: 15px; fill: none; stroke: var(--coral); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vertical-align: -2px; }
table.list tr.pinned .title { font-weight: 400; }
table.list .title { font-size: 17px; font-weight: 300; padding-right: 24px; }
table.list .title a { display: inline-block; position: relative; }
table.list .title a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
table.list tr:hover .title a::after { transform: scaleX(1); transform-origin: left; }
table.list .writer, table.list th:nth-child(3) { width: 120px; letter-spacing: .08em; }
table.list .date, table.list th:last-child { text-align: right; width: 130px; white-space: nowrap; }
.empty { margin-top: 40px; font-size: 15px; }
.empty .ko { display: block; margin-top: 8px; }

/* Notice 상세 : oddatelier 의 모달 그대로. 뒤는 검정 40%, 가운데 흰 상자 1113px, 안쪽 여백 70px 150px, 우상단 X */
dialog.detail { background: transparent; overflow-y: auto; opacity: 0; transition: opacity .15s ease; }
dialog.detail.show { opacity: 1; }
dialog.detail::backdrop { background: rgba(0, 0, 0, .4); }
dialog.detail[open] { display: block; }
.modal-content { position: relative; background: #fff; color: var(--ink); width: 1113px; max-width: calc(100vw - 40px); margin: 70px auto; padding: 70px 150px; min-height: calc(100vh - 140px); }
.modal-close { position: absolute; top: 30px; right: 36px; width: 22px; height: 22px; cursor: pointer; }
.modal-close::before, .modal-close::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: var(--ink); }
.modal-close::before { transform: rotate(45deg); } .modal-close::after { transform: rotate(-45deg); }
.modal-close:hover::before, .modal-close:hover::after { background: var(--coral); }
.modal-header { text-align: center; }
.modal-kicker { font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 55px; }
.modal-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; line-height: 1.3; margin: 0 auto; max-width: 28em; }
.modal-info { display: flex; justify-content: center; gap: 24px; padding: 15px 0 50px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
.modal-body { padding-top: 40px; }
.modal-body p { margin: 0 0 18px; line-height: 1.75; }
.modal-nav { display: flex; justify-content: space-between; margin-top: 70px; padding-top: 24px; border-top: 1px solid rgba(24, 24, 24, .15); font-size: 13px; font-weight: 400; }
.modal-nav a[hidden] { visibility: hidden; display: inline; }

/* ---------- TOP 버튼 : SM recruit 실측. 48px 검정 원, 오른쪽 아래 40px, 화살표 + TOP. 팝업을 300px 넘게 내리면 떠오른다 ---------- */
.totop { position: fixed; right: 40px; bottom: 40px; z-index: 250; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: var(--font); font-size: 10px; letter-spacing: .08em; font-weight: 400; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .06), 0 14px 36px rgba(0, 0, 0, .16); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s, background-color .2s; }
.totop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--coral); }
#privacyDialog .wrapper { max-width: 760px; }
/* 개인정보 처리방침 : 번호 항목, 제목 한 줄 + 설명 */
.policy .pv { font-size: 12px; letter-spacing: .1em; opacity: .78; margin: -6px 0 28px; }
.policy > p { font-size: 15px; font-weight: 300; line-height: 1.8; margin: 0 0 28px; }
.policy ol { margin: 0; padding: 0; list-style: none; counter-reset: pol; }
.policy li { counter-increment: pol; padding: 20px 0; border-top: 1px solid rgba(24, 24, 24, .15); font-size: 16px; font-weight: 400; }
.policy li::before { content: counter(pol) ". "; font-weight: 400; letter-spacing: .04em; }
.policy li:last-child { border-bottom: 1px solid rgba(24, 24, 24, .15); }
.policy li p { margin: 8px 0 0; font-size: 14px; font-weight: 300; line-height: 1.8; }
/* 처리방침 표 : NAVER 처럼 머리줄 연한 바탕, 가는 선 */
.ptab { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font-size: 13px; font-weight: 300; line-height: 1.6; }
.ptab th { background: #f4f1ee; font-weight: 400; text-align: left; padding: 10px 12px; border: 1px solid rgba(24, 24, 24, .15); letter-spacing: .02em; }
.ptab td { padding: 10px 12px; border: 1px solid rgba(24, 24, 24, .15); vertical-align: top; }
/* ---------- Contact (JYP 구조) ---------- */
#contactDialog .wrapper { max-width: 1100px; }
#contactDialog .intro { font-size: 15px; font-weight: 300; line-height: 1.8; margin: 0 0 50px; }
/* 위 : JYP 처럼 왼쪽 굵은 이름, 오른쪽 내용 */
#contactDialog .info { display: grid; grid-template-columns: 220px 1fr auto; gap: 16px 40px; align-items: start; padding: 26px 0; border-top: 1px solid rgba(24, 24, 24, .15); }
#contactDialog .info:last-of-type { border-bottom: 1px solid rgba(24, 24, 24, .15); }
#contactDialog .info h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
#contactDialog .info .v { font-size: 14px; font-weight: 300; line-height: 1.8; }
#contactDialog .info .v small { display: block; opacity: .78; }
/* 줄마다 앞에 작은 선 아이콘 */
#contactDialog .cl { display: flex; align-items: flex-start; gap: 10px; }
#contactDialog .ci { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 4px; opacity: .8; }
#contactDialog .info .v .cl + .cl { margin-top: 2px; }
/* 오른쪽 칸 : 아이콘이 세로로 맞게 줄들을 왼쪽 정렬한 묶음으로 두고, 묶음을 오른쪽 끝에 붙인다 */
#contactDialog .info .r { display: flex; flex-direction: column; align-items: flex-end; } #contactDialog .info .r .cl { justify-content: flex-start; } #contactDialog .info .r .cl + .cl { margin-top: 2px; }
#contactDialog .info .r .stack { display: inline-flex; flex-direction: column; align-items: flex-start; }
#contactDialog .info a:hover { color: var(--coral); }
#contactDialog .info .r { font-size: 14px; font-weight: 300; line-height: 1.8; text-align: right; }

/* INQUIRY : JYP 실측. 가운데 제목 26px 700, 안내 한 줄, 양식 폭 796px, 입력 52px 회색 바탕 안쪽 26px 14px */
#contactDialog .inq { margin-top: 60px; text-align: center; }
#contactDialog .inq h2 { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
#contactDialog .inq .lead { margin: 0 0 44px; font-size: 13px; font-weight: 300; opacity: .8; }
#contactDialog form { width: 796px; max-width: 100%; margin: 0 auto; text-align: left; }
#contactDialog .f { margin-bottom: 26px; }
#contactDialog .f > span { display: block; font-size: 14px; font-weight: 500; margin: 0 0 12px; line-height: 1.5; }
#contactDialog .f > span b { color: #d93025; font-weight: 400; margin-left: 3px; }
#contactDialog .f > span em, #contactDialog .agree > span em { font-style: normal; }
#contactDialog .f input, #contactDialog .f select, #contactDialog .f textarea { margin: 0; width: 100%; height: 52px; background: var(--field); border: 1px solid var(--field); border-radius: 0; color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 400; padding: 6px 26px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .2s; }
#contactDialog .f input::placeholder, #contactDialog .f textarea::placeholder { color: var(--grey-text); }
#contactDialog .f select { cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 22px center; background-size: 16px; padding-right: 50px; }
#contactDialog .f select.empty { color: var(--grey-text); }
#contactDialog .f textarea { height: 198px; padding: 14px 26px; resize: vertical; line-height: 1.7; }
#contactDialog .f input:focus, #contactDialog .f select:focus, #contactDialog .f textarea:focus { border-color: var(--ink); }
/* 유형 선택 전 : 유형 칸만 살아 있고 나머지는 흐리게 잠김 */
#contactDialog form.locked input:not([name=type]), #contactDialog form.locked select:not([name=type]), #contactDialog form.locked textarea, #contactDialog form.locked .agree table, #contactDialog form.locked .agree .note, #contactDialog form.locked .agree .chk, #contactDialog form.locked .submit { opacity: .35; pointer-events: none; cursor: not-allowed; }
#contactDialog input, #contactDialog select, #contactDialog textarea, #contactDialog .agree table, #contactDialog .agree .note, #contactDialog .agree .chk, #contactDialog .submit { transition: opacity .3s, background-color .3s; }
#contactDialog .f.err input, #contactDialog .f.err select, #contactDialog .f.err textarea { border-color: #d93025; }
#contactDialog .f .msg { display: none; margin: 6px 0 0; font-size: 12px; color: #d93025; font-weight: 400; }
#contactDialog .f.err .msg { display: block; }
#contactDialog .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

/* 동의 : JYP 처럼 제목 + 표 + 안내 + 오른쪽 체크 */
#contactDialog .agree { margin: 40px 0 0; }
#contactDialog .agree > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
#contactDialog .agree > span b { color: #d93025; font-weight: 400; margin-left: 3px; }
#contactDialog .agree table { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 300; line-height: 1.6; border-top: 1px solid var(--ink); }
#contactDialog .agree th { background: var(--field); font-weight: 500; text-align: center; padding: 14px 10px; border-bottom: 1px solid rgba(24, 24, 24, .15); border-right: 1px solid rgba(24, 24, 24, .15); }
#contactDialog .agree th:last-child, #contactDialog .agree td:last-child { border-right: 0; }
#contactDialog .agree td { text-align: center; padding: 18px 12px; border-bottom: 1px solid rgba(24, 24, 24, .15); border-right: 1px solid rgba(24, 24, 24, .15); vertical-align: middle; }
#contactDialog .agree .note { margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; opacity: .8; }
#contactDialog .agree .chk { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 400; cursor: pointer; }
#contactDialog .agree .chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
#contactDialog .agree.err .chk { color: #d93025; }
#contactDialog .cbtn[disabled] { opacity: .35; cursor: not-allowed; } #contactDialog .cbtn[disabled]:hover { background: var(--ink); color: #fff; }
#contactDialog .submit { text-align: center; margin-top: 50px; }
#contactDialog .cbtn { display: inline-flex; justify-content: center; align-items: center; min-width: 160px; height: 50px; padding: 0 30px; background: var(--ink); color: #fff; border: 1px solid var(--ink); font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: color .15s, background-color .15s; }
#contactDialog .cbtn:hover { background: #fff; color: var(--ink); }
#contactDialog .done { display: none; margin: 16px 0 0; font-size: 13px; opacity: .7; }
/* ---------- 모바일 ---------- */
@media (max-width: 820px) {
  .fixed-trigger { top: 16px; font-size: 18px; }
  #menu-trigger { top: 16px; }
  /* 모바일 상단 바 : 검정 바탕 + 크림 마크 (샘플 D). 팝업 전부, History 머리 사진 위에서도 같다 */
  .dlg-bar { padding: 15px var(--gutter); gap: 14px; background: var(--ink); color: var(--cream); }
  .totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  #contactDialog .intro { font-size: 14px; margin-bottom: 30px; }
  #contactDialog .info { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  #contactDialog .info .r { align-items: flex-start; } #contactDialog .info .r { text-align: left; }
  #contactDialog .inq { margin-top: 44px; } #contactDialog .inq h2 { font-size: 22px; }
  #contactDialog .f input, #contactDialog .f select, #contactDialog .f textarea { padding-left: 16px; padding-right: 16px; } #contactDialog .f select { padding-right: 40px; background-position: right 14px center; }
  #contactDialog .two { grid-template-columns: 1fr; }
  #contactDialog .agree table { font-size: 12px; } #contactDialog .agree th, #contactDialog .agree td { padding: 10px 6px; }
  #contactDialog .cbtn { width: 100%; }
  .ptab { font-size: 12px; } .ptab th, .ptab td { padding: 8px 8px; }
  .dlg-bar img { content: url("images/nova-mark.png"); }
  #showsDialog .dlg-bar.light { color: var(--cream); }
  dialog .wrapper > h2 { font-size: 23px; }
  #galleryDialog .wrapper > h2, #showsDialog .wrapper > h2 { white-space: nowrap; }
  .dlg-home img { height: 18px; }
  .dlg-back, .dlg-menu { font-size: 18px; }
  .menu-home { top: 16px; } .menu-home img { height: 18px; }
  #menu-close { top: 16px; font-size: 18px; }
  #brand .wordmark { height: 18px; } #brand .sub { display: none; }
  .menu-nav { grid-template-columns: 1fr; row-gap: 14px; font-size: 26px; text-align: center; top: 46%; }
  .menu-column .idx { display: none; }
  .menu-footer { grid-template-columns: 1fr; row-gap: 10px; text-align: center; padding-bottom: 28px; font-size: 12px; }

  /* 모바일 : 위 줄에 Instagram / YouTube / Privacy Policy, 아래 저작권 (Privacy 는 두 번째 칸에서 첫 줄로 끌어올림) */
  .menu-footer { display: flex; flex-direction: column; align-items: center; }
  .menu-footer .col { flex-direction: row; justify-content: center; gap: 22px; display: contents; }
  .menu-footer .col > a, .menu-footer .col > span { display: block; white-space: nowrap; }
  .menu-footer .col:first-child > a { order: 1; } .menu-footer .col:last-child > a { order: 1; } .menu-footer .col:last-child > span { order: 2; width: 100%; text-align: center; margin-top: 10px; }
  .menu-footer { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 22px; }
  #featured .background img { object-position: 45% 50%; }
  .hero-mark img { width: 59.5vw; }
  #social { gap: 14px; bottom: 64px; }
  .copyright { font-size: 9px; bottom: 16px; line-height: 1.8; } .copyright br.m { display: inline; }
  dialog .close { top: 20px; }
  dialog .wrapper { padding: 76px var(--gutter) 50px; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .head { padding-bottom: 30px; } .bigname { font-size: 24px; }
  .artist-nav { margin-top: 36px; padding-top: 22px; }
  .career .blk:last-child { padding-bottom: 0; }
  .cols { grid-template-columns: 1fr; gap: 40px; }
  .text { padding: 0; } .ptabs { margin-bottom: 30px; }   /* Notice 모바일 : oddatelier 처럼 줄마다 "NOVA  2026.08.18" 작은 줄 위, 제목 아래. 번호 열은 숨김 */
  .nbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 24px; } .vis { text-align: right; padding: 0; }
  .search { width: 100%; margin: 0 0 24px; }
  table.list thead { display: none; }
  table.list, table.list tbody { display: block; }
  table.list tr { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; padding: 18px 0; border-bottom: 1px solid rgba(24, 24, 24, .18); }
  table.list tr[hidden] { display: none; }
  table.list td { display: block; padding: 0; border: 0; width: auto; }
  table.list .no { display: none; }
  table.list td:first-child, table.list td:last-child { padding-left: 0; padding-right: 0; }
  table.list .writer { grid-column: 1; grid-row: 1; width: auto; font-size: 12px; letter-spacing: .1em; }
  table.list .date { grid-column: 2; grid-row: 1; width: auto; text-align: left; font-size: 12px; letter-spacing: .06em; }
  table.list .title { grid-column: 1 / -1; grid-row: 2; font-size: 16px; font-weight: 400; line-height: 1.45; padding-right: 0; min-width: 0; }
  table.list .title a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.list .title a::after { display: none; }
  table.list tr.pinned { background: #f4f1ee; grid-template-columns: auto auto 1fr; }
  table.list tr.pinned td { background: none; }
  /* 고정 공지 : 핀을 NOVA 앞에, 글자와 같은 줄 높이로 */
  table.list tr.pinned .no { display: flex; align-items: center; grid-column: 1; grid-row: 1; width: auto; padding-right: 2px; } table.list tr.pinned .writer { grid-column: 2; } table.list tr.pinned .date { grid-column: 3; }
  table.list tr.pinned .pinicon { width: 14px; height: 14px; vertical-align: 0; margin-top: -1px; }
  .hhero { height: 44vh; min-height: 300px; } .hhero .cap { bottom: 36px; } #showsDialog .hhero h2 { font-size: 22px; } .hhero .sub { font-size: 13px; line-height: 1.7; }
  #showsDialog .wrapper { padding: 40px var(--gutter) 70px; } #showsDialog .wrapper > h2 { margin-bottom: 22px; }
  .hcards { grid-template-columns: 1fr; } .hcard { padding: 0 0 40px; }
  .hcard.peek { max-height: 120px; } .hcard.peek + .hcard.peek { display: none; } .more-wrap { margin-top: -50px; }
  .hgal { padding-top: 36px; }
  .archive .yr { grid-template-columns: 1fr; gap: 16px; padding: 0 0 40px; } .archive .yr h3 { position: static; font-size: 40px; }
  .archive .row { grid-template-columns: 56px 1fr; padding: 14px 0; } .archive .row .t { font-size: 15px; }
  .fbar { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 32px; padding: 0; } .fbar .search { width: 100%; }
  .pwrap { padding: 76px var(--gutter) 60px; } .pwrap h2 { font-size: 20px; } .photos { gap: 20px; } .photos .pair { grid-template-columns: 1fr; gap: 20px; }
  .pbot { column-gap: 14px; }   .modal-content { width: calc(100% - 20px); max-width: none; margin: 60px auto; padding: 30px 15px; min-height: calc(100vh - 120px); }
  .modal-close { top: 16px; right: 16px; width: 18px; height: 18px; }
  .modal-kicker { font-size: 15px; margin-bottom: 30px; }
  .modal-info { padding: 10px 0 30px; }
  /* 아티스트 : 모바일은 한 줄. 사진은 폰 폭 가득 정사각, Coming soon 칸은 낮게 */
  .grid { grid-template-columns: 1fr; gap: 36px; }
  .artist .frame { aspect-ratio: 1 / 1; }
  .artist.soon .frame { aspect-ratio: auto; height: 55px; }
  .artist.soon .frame div { line-height: 1; white-space: nowrap; } .artist.soon .frame div br { display: none; } .artist.soon .frame div::first-line { word-spacing: .6em; }
  /* 이름과 악기를 한 줄에 : 왼쪽 이름, 오른쪽 끝 악기 */
  /* 가운데를 기준으로 왼쪽에 이름, 오른쪽에 악기. 양 끝에 붙지 않게 */
  .artist .meta { padding-top: 14px; flex-direction: row; align-items: baseline; justify-content: center; gap: 18px; flex-wrap: nowrap; }
  .artist .name { flex: 0 0 auto; }
  .artist .inst { align-self: auto; flex: 0 0 auto; font-size: 14px; letter-spacing: 0; }
  .artist .name { font-size: 16px; }
  .year h3 { font-size: 44px; }
}