@charset "UTF-8";
/* ==========================================================================
   「오늘의 서사」 사전 캠페인 — 임시 페이지
   모든 클래스는 sa- 접두어로 격리합니다. 테마 CSS(main/refinements)와 섞이지 않게.
   본문 서체는 사이트의 Pretendard, 사진 위 한 문장만 고운바탕(명조)을 씁니다.
   ========================================================================== */

.sa{
	--sa-night:#1b1430;
	--sa-night2:#2a1f47;
	--sa-paper:#ffffff;
	--sa-paper2:#f7f4fb;
	--sa-ink:#1d1a26;
	--sa-ink2:#433c55;
	--sa-mute:#6f6782;
	--sa-faint:#918aa3;
	--sa-plum:#5d3b91;
	--sa-plum2:#7a5cae;
	--sa-lav:#d1b5f5;
	--sa-on-plum:#ffffff;
	--sa-hair:#e9e4f1;
	--sa-line:#d8d0e6;
	--sa-on:#f6f2fc;
	--sa-on2:#c0b2d9;
	--sa-wrap:1180px;
	/* 여백은 이 세 값만 씁니다. 섹션마다 제각각이던 값을 하나로 모았습니다. */
	--sa-sec:clamp(56px,6.6vw,92px);
	--sa-gap:clamp(28px,3.2vw,44px);
	--sa-pad:20px;
	--sa-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
:root[data-theme="dark"] .sa,
.sa{ color:var(--sa-ink); }
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]) .sa{
		--sa-paper:#141120; --sa-paper2:#1b1729; --sa-ink:#f0ecf7; --sa-ink2:#cbc2dc;
		--sa-mute:#9e94b3; --sa-faint:#867c9b; --sa-hair:#2c2540; --sa-line:#3a3153;
		--sa-plum:#c4a6ee; --sa-plum2:#ac8ade; --sa-on-plum:#241638; --sa-faint:#938ba8;
	}
}
:root[data-theme="dark"] .sa{
	--sa-paper:#141120; --sa-paper2:#1b1729; --sa-ink:#f0ecf7; --sa-ink2:#cbc2dc;
	--sa-mute:#9e94b3; --sa-faint:#938ba8; --sa-hair:#2c2540; --sa-line:#3a3153;
	--sa-plum:#c4a6ee; --sa-plum2:#ac8ade; --sa-on-plum:#241638;
}

.sa{ background:var(--sa-paper); }
.sa *,.sa *::before,.sa *::after{ box-sizing:border-box; }
/* 리셋은 :where() 로 감싸 특이도를 0으로 만듭니다.
   이렇게 하지 않으면 `.sa p`(0,1,1) 가 `.sa-hero__sub`(0,1,0) 를 이겨
   컴포넌트에 준 margin·padding 이 통째로 죽습니다. 실제로 8곳이 그랬습니다.
   `.sa` 한 겹은 남겨 둬야 테마의 `p{margin:0 0 1em}` 는 계속 눌러 줍니다. */
.sa :where(p,h1,h2,h3,h4,figure,figcaption,ul,ol,li,dl,dt,dd,fieldset){ margin:0; padding:0; }
.sa :where(fieldset){ border:0; }
.sa :where(li){ list-style:none; }
.sa :where(img){ display:block; max-width:100%; height:auto; }
.sa :where(a){ color:inherit; text-decoration:none; }
.sa-wrap{ max-width:var(--sa-wrap); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.sa-num{ font-variant-numeric:tabular-nums; }
.sa-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── 버튼 ── */
.sa-btn{
	display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
	border:1px solid transparent; border-radius:2px; cursor:pointer;
	font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em;
	transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.sa-btn svg{ width:17px; height:17px; flex:none; }
.sa-btn--go{ background:var(--sa-lav); color:#241638; }
.sa-btn--go:hover{ background:#e6d2ff; transform:translateY(-1px); }
.sa-btn--plum{ background:var(--sa-plum); color:var(--sa-on-plum); }
.sa-btn--plum:hover{ background:var(--sa-plum2); color:var(--sa-on-plum); transform:translateY(-1px); }
.sa-btn--out{ background:transparent; color:var(--sa-on); border-color:rgba(255,255,255,.32); }
.sa-btn--out:hover{ border-color:var(--sa-lav); color:var(--sa-lav); }
.sa-btn--lg{ padding:19px 40px; font-size:16.5px; }

/* ── 히어로 ── */
.sa-hero{
	position:relative; overflow:hidden; background:var(--sa-night); color:var(--sa-on);
	padding-top:var(--header-h,72px);
}
.sa-hero::after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(110% 130% at 78% 34%, rgba(147,104,214,.34) 0%, rgba(38,26,66,.12) 46%, transparent 72%);
}
.sa-hero__cv{ position:absolute; inset:0; opacity:.62; }
.sa-hero__in{ position:relative; z-index:2; padding:var(--sa-sec) 0; }
.sa-hero__eyebrow{
	display:inline-flex; align-items:center; gap:11px;
	font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--sa-lav);
}
.sa-hero__eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; }
.sa-hero__title{
	margin-top:18px; font-size:clamp(30px,4.4vw,54px); font-weight:800;
	letter-spacing:-.045em; line-height:1.24; text-wrap:balance; color:var(--sa-on);
}
.sa-hero__title .sa-q{ color:var(--sa-lav); }
.sa-hero__sub{
	margin-top:18px; max-width:44ch; font-size:clamp(14.5px,1.35vw,16.5px);
	line-height:1.95; color:var(--sa-on2); font-weight:400;
}
.sa-hero__acts{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; }
.sa-hero__meta{ font-family:var(--sa-mono); font-size:12px; color:var(--sa-on2); letter-spacing:.03em; }

/* ── 선언 ── */
.sa-stmt{ padding:var(--sa-sec) 0 var(--sa-gap); }
.sa-stmt__q{
	font-size:clamp(28px,4.2vw,52px); font-weight:800; letter-spacing:-.05em;
	line-height:1.34; color:var(--sa-plum); text-wrap:balance;
}
.sa-stmt__q em{ font-style:normal; color:var(--sa-ink); }
.sa-stmt__b{
	/* 둘째 줄이 한 줄로 떨어지도록 폭을 넉넉히. 좁은 화면에서는 자연스럽게 접힙니다. */
	margin-top:26px; max-width:760px; font-size:clamp(15.5px,1.45vw,17.5px);
	line-height:2.05; color:var(--sa-ink2); font-weight:400;
}
.sa-stmt__b b{ font-weight:700; color:var(--sa-ink); }

/* ── 캠페인 소개 ── */
.sa-about{ padding-bottom:var(--sa-sec); }
.sa-about__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.sa-about__it{ padding:28px 32px; border-top:2px solid var(--sa-plum); }
.sa-about__it + .sa-about__it{ border-left:1px solid var(--sa-hair); }
.sa-about__n{ font-family:var(--sa-mono); font-size:11.5px; letter-spacing:.14em; color:var(--sa-plum); font-weight:500; }
.sa-about__t{ margin-top:13px; font-size:19px; font-weight:800; letter-spacing:-.035em; line-height:1.5; }
.sa-about__d{ margin-top:11px; font-size:14.5px; line-height:1.9; color:var(--sa-mute); }
.sa-about__d b{ font-weight:700; color:var(--sa-ink2); }

/* ── 사진 모자이크 ── */
.sa-gal{ padding:0 0 var(--sa-sec); }
.sa-gal__head{
	display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
	gap:10px 20px; padding-bottom:20px; margin-bottom:var(--sa-gap); border-bottom:1px solid var(--sa-hair);
}
.sa-gal__h{ font-size:clamp(20px,2.3vw,27px); font-weight:800; letter-spacing:-.04em; }
.sa-mosaic{
	max-width:1010px; margin:0 auto; display:grid;
	grid-template-columns:minmax(0,415fr) minmax(0,278fr) minmax(0,278fr);
	grid-template-rows:auto auto auto; gap:12px;
}
.sa-t{ position:relative; overflow:hidden; background:var(--sa-paper2); display:block; min-height:0; }
/* 사진을 절대 배치로 빼 둡니다. 흐름에 두면 원본 비율이 그리드 행 높이를 밀어내
   여러 행에 걸친 타일 옆에서 한 칸씩 어긋납니다. 높이는 타일이 정하게 둡니다. */
.sa-t img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform .55s cubic-bezier(.2,0,0,1);
}
.sa-t:hover img{ transform:scale(1.035); }
.sa-t::after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(to top,
		rgba(14,9,26,.92) 0%, rgba(14,9,26,.66) 26%, rgba(14,9,26,.26) 52%, rgba(14,9,26,0) 78%);
}
.sa-t__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--sa-pad); color:#fff; }

/* 캡션은 마우스가 있는 기기에서만 호버로 드러냅니다.
   터치 기기는 호버가 없어 감추면 영영 못 보므로 기본값을 '보임'으로 둡니다. */
@media (hover:hover) and (pointer:fine){
	.sa-t::after{ opacity:0; transition:opacity .34s cubic-bezier(.2,0,0,1); }
	.sa-t__cap{
		opacity:0; transform:translateY(10px);
		transition:opacity .34s cubic-bezier(.2,0,0,1), transform .34s cubic-bezier(.2,0,0,1);
	}
	.sa-t:hover::after,.sa-t:focus-visible::after{ opacity:1; }
	.sa-t:hover .sa-t__cap,.sa-t:focus-visible .sa-t__cap{ opacity:1; transform:none; }
	.sa-t:focus-visible img{ transform:scale(1.035); }
}
.sa-t:focus-visible{ outline:2px solid var(--sa-plum); outline-offset:3px; }
.sa-t__s{
	font-size:16px; font-weight:600; line-height:1.62; letter-spacing:-.022em;
	text-shadow:0 1px 2px rgba(8,5,16,.72), 0 2px 14px rgba(8,5,16,.5);
}
.sa-t__m{
	margin-top:8px; display:flex; gap:10px; font-family:var(--sa-mono);
	font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.88);
	text-shadow:0 1px 3px rgba(8,5,16,.7);
}
/* 행 높이는 칸을 하나만 쓰는 b·c·e 가 정합니다.
   여러 행에 걸치는 a·d 에까지 aspect-ratio 를 주면 행 높이와 싸워
   타일 아래에 빈 공간이 생깁니다. 두 타일은 자기 영역을 꽉 채우게 둡니다. */
.sa-t--a{ grid-column:1; grid-row:1 / span 3; align-self:stretch; }
.sa-t--b{ grid-column:2 / span 2; grid-row:1; aspect-ratio:504/284; }
.sa-t--c{ grid-column:2; grid-row:2; aspect-ratio:265/150; }
.sa-t--d{ grid-column:3; grid-row:2 / span 2; align-self:stretch; }
.sa-t--e{ grid-column:2; grid-row:3; aspect-ratio:265/257; }

/* ── 하단 전환 ── */
.sa-end{ position:relative; overflow:hidden; background:var(--sa-night); color:var(--sa-on); }
.sa-end::after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(90% 140% at 22% 60%, rgba(147,104,214,.3) 0%, transparent 66%);
}
.sa-end__cv{ position:absolute; inset:0; opacity:.5; }
.sa-end__in{
	position:relative; z-index:2; padding:var(--sa-sec) 0;
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px;
}
.sa-end__h{ font-size:clamp(23px,3vw,36px); font-weight:800; letter-spacing:-.045em; line-height:1.4; text-wrap:balance; color:var(--sa-on); }
.sa-end__h em{ font-style:normal; color:var(--sa-lav); }
.sa-end__p{ margin-top:14px; font-size:14.5px; color:var(--sa-on2); line-height:1.9; }
.sa-end__r{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.sa-end__share{ display:flex; gap:8px; }
.sa-end__share a{
	width:40px; height:40px; display:grid; place-items:center; border-radius:2px;
	border:1px solid rgba(255,255,255,.24); font-size:12px; font-weight:700; color:var(--sa-on2);
	transition:border-color .2s,color .2s,background .2s;
}
.sa-end__share a:hover{ border-color:var(--sa-lav); color:var(--sa-lav); background:rgba(209,181,245,.08); }

/* ── 우측 SNS 레일 ──
   본문 폭(1180) 바깥에 설 자리가 있는 화면에서만 띄웁니다.
   1400px 미만에서는 본문 오른쪽 글자를 덮어서, 하단 공유 버튼에 맡기고 감춥니다. */
.sa-rail{ display:none; }
@media (min-width:1400px){
	.sa-rail{
		position:fixed; right:14px; top:44%; transform:translateY(-50%); z-index:35;
		display:flex; flex-direction:column; gap:7px;
	}
}
.sa-rail a{
	width:36px; height:36px; display:grid; place-items:center; border-radius:3px;
	font-size:12px; font-weight:800; color:#fff; box-shadow:0 2px 10px rgba(30,20,50,.22);
	transition:transform .18s;
}
.sa-rail a:hover{ transform:translateX(-3px); }
.sa-rail .k{ background:#3b1e1e; }
.sa-rail .n{ background:#03c75a; }
.sa-rail .f{ background:#1877f2; }
.sa-rail .x{ background:#111; }
.sa-rail .i{ background:linear-gradient(45deg,#f9ce34,#ee2a7b 50%,#6228d7); }
.sa-rail .y{ background:#ff0033; }

/* ── 등록 오버레이 ── */
.sa-ov{
	position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center;
	background:rgba(16,10,30,.62); backdrop-filter:blur(3px); padding:24px 16px; overflow-y:auto;
}
.sa-ov.is-on{ display:flex; }
.sa-sheet{
	width:100%; max-width:760px; background:var(--sa-paper); border-radius:3px; overflow:hidden;
	box-shadow:0 24px 70px rgba(14,8,30,.4); margin:auto;
}
.sa-sheet__h{
	padding:22px 28px; background:var(--sa-night); color:var(--sa-on);
	display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.sa-sheet__h h2{ font-size:19px; font-weight:800; letter-spacing:-.035em; color:var(--sa-on); }
.sa-sheet__h p{ margin-top:5px; font-size:12.5px; color:var(--sa-on2); }
.sa-sheet__x{
	width:36px; height:36px; display:grid; place-items:center; flex:none; cursor:pointer;
	border:1px solid rgba(255,255,255,.26); background:transparent; border-radius:2px;
	color:var(--sa-on); font-size:17px;
}
.sa-sheet__x:hover{ border-color:var(--sa-lav); color:var(--sa-lav); }
.sa-sheet__b{ padding:28px; display:grid; grid-template-columns:minmax(0,236px) minmax(0,1fr); gap:24px; align-items:start; }
.sa-drop{
	position:relative; border:1px dashed var(--sa-line); background:var(--sa-paper2);
	aspect-ratio:4/5; display:grid; place-items:center; text-align:center; padding:20px; cursor:pointer;
	transition:border-color .2s,background .2s;
}
.sa-drop:hover,.sa-drop:focus-within{ border-color:var(--sa-plum); }
.sa-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.sa-drop__i{ width:30px; height:30px; margin:0 auto 12px; color:var(--sa-plum); }
/* span 이라 그냥 두면 두 줄이 한 줄로 붙습니다. */
.sa-drop__in{ display:block; }
.sa-drop__t{ display:block; font-size:14px; font-weight:700; }
.sa-drop__s{ display:block; margin-top:6px; font-size:12px; color:var(--sa-faint); line-height:1.65; }
/* 위 .sa img 리셋(0,1,1)보다 특이도가 높아야 숨겨집니다. */
.sa .sa-drop__p{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.sa .sa-drop.is-has .sa-drop__p{ display:block; }
.sa-drop.is-has .sa-drop__in{ display:none; }
.sa-fld + .sa-fld{ margin-top:18px; }
.sa-fld label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:7px; letter-spacing:-.01em; }
.sa-fld label .sa-o{ color:var(--sa-faint); font-weight:400; margin-left:5px; }
.sa-fld input[type=text],.sa-fld textarea{
	width:100%; background:var(--sa-paper); border:1px solid var(--sa-line); border-radius:2px;
	padding:12px 14px; font-size:15px; font-family:inherit; transition:border-color .2s;
}
.sa-fld textarea{ font-size:17px; line-height:1.7; min-height:82px; resize:vertical; }
.sa-fld input:focus,.sa-fld textarea:focus{ border-color:var(--sa-plum); outline:none; }
.sa-fld .sa-h{ margin-top:6px; display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--sa-faint); }
.sa-fld .sa-cnt{ font-family:var(--sa-mono); letter-spacing:.03em; }
.sa-fld .sa-cnt.is-over{ color:#b3372c; font-weight:600; }
.sa-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sa-agr{ margin-top:20px; padding-top:16px; border-top:1px solid var(--sa-hair); display:grid; gap:10px; }
.sa-agr label{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--sa-ink2); line-height:1.65; cursor:pointer; }
.sa-agr input{ margin-top:4px; width:15px; height:15px; flex:none; accent-color:var(--sa-plum); }
.sa-agr .sa-rq{ color:var(--sa-plum); font-weight:700; font-family:var(--sa-mono); font-size:10.5px; }
.sa-sheet__f{ padding:0 28px 28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.sa-sheet__f .sa-n{ font-size:12px; color:var(--sa-faint); }
.sa-msg{
	margin:0 28px 28px; padding:13px 16px; border:1px solid var(--sa-plum);
	background:rgba(93,59,145,.07); font-size:13.5px; line-height:1.7; display:none;
}
.sa-msg.is-on{ display:block; }

/* ── 검토 메모 ── */
.sa-memo{ background:var(--sa-paper2); border-top:1px solid var(--sa-hair); font-size:13px; color:var(--sa-mute); }
.sa-memo__in{ max-width:var(--sa-wrap); margin:0 auto; padding:20px clamp(20px,4vw,48px) 26px; }
.sa-memo b{
	font-family:var(--sa-mono); font-size:10.5px; letter-spacing:.13em; color:var(--sa-plum);
	border:1px solid var(--sa-plum); padding:3px 8px; border-radius:2px;
}
.sa-memo summary{ cursor:pointer; margin-top:10px; font-weight:700; color:var(--sa-ink2); }
.sa-memo ol{ margin:12px 0 0; display:grid; gap:6px; line-height:1.75; }
.sa-memo ol li{ padding-left:16px; position:relative; }
.sa-memo ol li::before{ content:"·"; position:absolute; left:4px; color:var(--sa-plum); }

@media (max-width:860px){
	.sa-about__grid{ grid-template-columns:1fr; }
	.sa-about__it + .sa-about__it{ border-left:0; }
	.sa-mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
	.sa-t--a,.sa-t--b{ grid-column:1 / span 2; grid-row:auto; }
	.sa-t--c,.sa-t--d,.sa-t--e{ grid-column:auto; grid-row:auto; }
	.sa-t--a,.sa-t--d{ align-self:auto; aspect-ratio:265/257; }
	.sa-sheet__b{ grid-template-columns:1fr; }
	.sa-drop{ aspect-ratio:16/10; }
}
@media (prefers-reduced-motion:reduce){
	.sa *{ animation:none !important; transition:none !important; }
}