@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   notice01 · 업체 선택 주의사항 (페이지 스킨)  —  PLAYWEBON
   레이아웃(veil)의 토큰·공통 클래스를 그대로 사용합니다.
   레이아웃 없이 단독으로 쓸 때를 대비해 폴백만 아래에 둡니다.
   ═══════════════════════════════════════════════════════════ */

.ntc{
	--ink:#0A0A0A; --ink-2:#111110; --ink-3:#1A1917;
	--paper:#F2F2F0; --paper-2:#E9E9E6; --paper-3:#DEDEDA;
	--gold:#D18C05; --gold-deep:#936300; --gold-lt:#F2D79A;
	--ntw:1400px;                 /* 레이아웃이 --maxw 를 주면 아래에서 덮어씀 */
	--gut:clamp(20px,4.2vw,78px);
	--f-disp:"EB Garamond","Noto Serif KR",Georgia,serif;
	--f-body:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
	--f-mono:"PretendardNum","IBM Plex Mono","Pretendard Variable",ui-monospace,monospace;
	--r-card:14px; --r-pill:999px;
	--e:cubic-bezier(.22,.75,.24,1);
	font-family:var(--f-body);line-height:1.6;
}
.ntc *{box-sizing:border-box}
.ntc img{display:block;max-width:100%}
.ntc a{color:inherit;text-decoration:none}
.ntc ul, .ntc ol{list-style:none;margin:0;padding:0}

/* 레이아웃이 없을 때만 쓰이는 폴백 (레이아웃이 있으면 그쪽 값이 이깁니다) */
.ntc .b-dark{
	--bg:var(--ink); --bg-2:var(--ink-2); --bg-3:var(--ink-3);
	--fg:#EFEDE9; --fg-2:#9C9791; --fg-3:#5E5A56;
	--hair:rgba(239,237,233,.13); --accent:var(--gold);
	background:var(--bg);color:var(--fg);
}
.ntc .b-light{
	--bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
	--fg:#111110; --fg-2:#6B6864; --fg-3:#9B9893;
	--hair:rgba(17,17,16,.14); --accent:var(--gold-deep);
	background:var(--bg);color:var(--fg);
}
.ntc .sec{padding:clamp(84px,10.5vw,172px) 0;position:relative}
.ntc .wrap{width:min(var(--ntw),100% - var(--gut) * 2);margin-inline:auto}
/* 레이아웃(veil)이 있으면 그 콘텐츠 폭을 그대로 따름 */
@supports (width:min(1px,1px)){
	.ntc{--ntw:var(--maxw,1400px)}
}
.ntc .eb{
	font-family:var(--f-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
	color:var(--accent);margin-bottom:clamp(22px,2.6vw,34px);
}
.ntc .dsp{
	font-family:var(--f-disp);font-weight:400;
	font-size:clamp(30px,4.6vw,64px);line-height:1.3;
	letter-spacing:-.012em;color:var(--fg);
}
.ntc .dsp .dot, .ntc .ctah .dot{color:var(--accent)}
.ntc .body-t{font-size:clamp(14px,1.05vw,15.5px);line-height:1.95;color:var(--fg-2)}
.ntc .dsp + .body-t, .ntc .ctah + .body-t{margin-top:clamp(20px,2.4vw,30px)}
.ntc .badge{
	display:inline-flex;align-items:center;align-self:flex-start;
	font-family:var(--f-mono);font-size:11px;letter-spacing:normal;
	padding:6px 14px;border-radius:var(--r-pill);
}
.ntc .badge--solid{background:var(--bg-3);color:var(--fg-2)}
.ntc .badge--line{border:1px solid var(--accent);color:var(--accent)}
.ntc .pill{
	display:inline-flex;align-items:center;gap:10px;
	padding:15px 30px;border-radius:var(--r-pill);
	font-size:14px;font-weight:500;white-space:nowrap;
	transition:background .38s var(--e),border-color .38s var(--e),transform .38s var(--e);
}
.ntc .pill:hover{transform:translateY(-2px)}
.ntc .pill--fill{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.ntc .pill--fill:hover{filter:brightness(.9)}
.ntc .pill--line{border:1px solid var(--hair);color:var(--fg)}
.ntc .pill--line:hover{border-color:var(--fg)}
.ntc .rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--e),transform 1s var(--e)}
.ntc .rv.is-in, .ntc .rv.in{opacity:1;transform:none}
.ntc .d1{transition-delay:.1s}
.ntc .d2{transition-delay:.2s}

/* ── 페이지 헤더 ── */
.ntc .ph{
	padding:calc(var(--hd-h,96px) + clamp(66px,7.4vw,142px)) 0 clamp(58px,6.6vw,96px);
	position:relative;overflow:hidden;background:#14181D;
}
.ntc .ph.has-img .ph__m{
	background-image:var(--ph-img);
	background-size:cover;background-position:center;
}

.ntc .ph__m{
  position:absolute;inset:0;
  background:
    radial-gradient(130% 90% at 78% 14%,rgba(209,140,5,.2),transparent 60%),
    linear-gradient(168deg,#252A30 0%,#171B21 48%,#0D1114 100%);
}
.ntc .ph__v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,12,.6),rgba(8,10,12,.2) 40%,rgba(8,10,12,.8))}
.ntc .ph .wrap{position:relative;z-index:3}
.ntc .ph__eb{font-family:var(--f-mono);font-size:11px;letter-spacing:.34em;color:rgba(239,237,233,.5);margin-bottom:26px}
.ntc .ph__eb b{color:var(--gold);font-weight:400}
.ntc .ph h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(36px,6.2vw,88px);line-height:1.16;letter-spacing:-.022em;color:#FBFAF8}
.ntc .ph h1 .dot{color:var(--gold)}
.ntc .ph p{margin-top:28px;font-size:clamp(14px,1.1vw,16px);line-height:1.9;color:rgba(239,237,233,.74);max-width:46ch}
.ntc .nt:last-of-type{border-bottom:1px solid var(--hair)}
.ntc .nt__n{font-family:var(--f-mono);font-size:11px;color:var(--accent);line-height:1}
.ntc .nt__h{font-family:var(--f-disp);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.34;color:var(--fg);word-break:keep-all}
.ntc .nt__b p{font-size:14.5px;line-height:1.95;color:var(--fg-2);word-break:keep-all}

.ntc .nt__b strong{color:var(--fg);font-weight:600}
.ntc .vsc{border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(26px,3vw,44px);background:rgba(18,18,17,.4)}
.ntc .vsc--key{border-color:rgba(209,140,5,.55);background:rgba(38,24,19,.5)}
.ntc .vsl{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--fg-3);margin-bottom:14px}
.ntc .vsc--key .vsl{color:var(--gold)}
.ntc .vsh{font-family:var(--f-disp);font-weight:400;font-size:clamp(20px,2.1vw,29px);color:#FBFAF8;line-height:1.3}
.ntc .vss{margin-top:10px;font-size:13.5px;color:var(--fg-2)}
.ntc .vsc ol{list-style:none;margin-top:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px}
.ntc .vsc li{display:flex;gap:12px;font-size:14px;line-height:1.75;color:var(--fg-2)}
.ntc .vsc li b{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);flex-shrink:0;padding-top:4px;font-weight:400;letter-spacing:.1em}
.ntc .vsc--key li b{color:var(--gold)}
.ntc .spc{border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(26px,2.8vw,42px);transition:background .45s var(--e),border-color .45s var(--e);display:flex;flex-direction:column}
.ntc .spc:hover{background:var(--bg-2);border-color:rgba(17,17,16,.22)}
.ntc .spc h3{font-family:var(--f-disp);font-weight:400;font-size:clamp(21px,2.1vw,29px);color:var(--fg);margin-top:18px}
.ntc .spc p{margin-top:14px;font-size:14px;line-height:1.9;color:var(--fg-2)}
.ntc .ctah{font-family:var(--f-disp);font-weight:400;font-size:clamp(27px,3.5vw,50px);line-height:1.22;letter-spacing:-.018em;color:var(--fg)}
.ntc .ctah .dot{color:var(--accent)}
.ntc .ctar{margin-top:clamp(32px,3.6vw,52px);display:flex;flex-wrap:wrap;gap:12px}


/* ── 레이아웃 그리드 ── */
.ntc .nt{
	display:grid;
	grid-template-columns:clamp(40px,3.6vw,64px) minmax(0,1.45fr) minmax(0,1fr);
	gap:clamp(18px,2.4vw,40px);
	padding:clamp(34px,4.2vw,64px) 0;
	border-top:1px solid var(--hair);
	align-items:start;
}
.ntc .vs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.5vw,24px);margin-top:clamp(40px,4.6vw,70px)}
.ntc .sp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,24px);margin-top:clamp(40px,4.6vw,68px)}
.ntc .cta-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,3.6vw,70px);align-items:start}

/* ── 반응형 ── */
@media (hover:none){
	.ntc .pill:hover,.ntc .spc:hover{transform:none}
}
@media (max-width:1180px){
	.ntc .nt{grid-template-columns:clamp(38px,4.4vw,56px) minmax(0,1fr);gap:16px 24px}
	.ntc .nt__b{grid-column:2}
	.ntc .cta-row{grid-template-columns:1fr}
	.ntc .cta-row .qf{max-width:520px}
}
@media (max-width:980px){
	.ntc .ph{padding-top:clamp(120px,17vw,180px)}
	.ntc .vs{grid-template-columns:1fr}
	.ntc .sp{grid-template-columns:1fr}
}
@media (max-width:780px){
	.ntc .dsp,.ntc .ctah{max-width:none}
}
@media (max-width:620px){
	.ntc .nt{grid-template-columns:1fr;gap:14px}
	.ntc .nt__b{grid-column:1}
	.ntc .nt__n{font-size:11px}
	.ntc .ctar .pill{flex:1;justify-content:center;min-width:170px}
}
@media (max-width:420px){
	.ntc .ctar .pill{width:100%;flex:none}
}
@media (prefers-reduced-motion:reduce){
	.ntc *{animation:none !important;transition-duration:.01ms !important}
	.ntc .rv{opacity:1;transform:none}
}