/* REAL DAILY — 전체 스타일 1파일
   값(색·크기·간격)은 design/확정.html 을 기준으로 한다. 웹폰트 로딩 없음, 시스템 폰트 스택만 사용.
   색은 색 이름이 아니라 역할 이름으로 부른다. */

:root{
  --field:#E8ECF2;      /* 지면 바깥 바탕 */
  --sheet:#FFFFFF;      /* 사실이 놓이는 흰 지면 */
  --ink:#14181F;        /* 본문 잉크이자 판단이 놓이는 검은 블록 */
  --ink-2:#3E4756;      /* 사실 본문 */
  --ink-3:#667284;      /* 라벨·출처 (밝기 하한, 대비 4.9:1) */
  --rule:#D2D8E2;       /* 헤어라인 */
  --signal:#FF6B5E;     /* 흰 지면 위: 룰·불릿·테두리만 / 검은 블록 위: 글자 가능 */
  --on-dark:#E8ECF2;
  --on-dark-2:rgba(232,236,242,.78);
  --quiet:rgba(62,71,86,.055);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  background:var(--field);
  color:var(--ink);
  font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}

.page{max-width:720px;margin:0 auto;background:var(--sheet);min-height:100vh;}
ul{list-style:none;}

/* ══════════ 상세 페이지 ══════════ */

/* 마스트헤드 — 모든 페이지 공용 머리. 워드마크는 홈으로, 오른쪽 두 링크로 최신·지난 브리핑을 오간다. */
.mast{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:18px 20px 14px;border-bottom:1px solid var(--rule);
}
.mast .bn{font-size:15px;font-weight:800;letter-spacing:.14em;}
/* 섹터 표시 「부동산 · 경제」 — 한 덩어리로 읽히도록 간격을 좁게 둔다 */
.mast-nav{display:flex;align-items:baseline;gap:8px;white-space:nowrap;}
.mast-nav a{
  position:relative;font-size:13px;font-weight:700;color:var(--ink-3);text-decoration:none;
}
/* 지금 보고 있는 섹터 — 링크가 아니라 표시다 */
.ms-on{font-size:13px;font-weight:800;color:var(--ink);}
.ms-sep{font-size:13px;font-weight:700;color:var(--rule);}
/* 링크 글자 높이가 낮다. 배치를 흔들지 않고 탭 타깃만 44px 로 넓힌다. */
.mast-nav a::after{
  content:"";position:absolute;left:-8px;right:-8px;top:50%;
  transform:translateY(-50%);height:44px;
}
/* 홈(어두운 랜딩) 위에 얹는 변형 — 첫 챕터 장면 위에 페이퍼색 활자로 뜬다 */
.mast--dark{
  position:absolute;top:0;left:0;right:0;z-index:2;
  border-bottom:1px solid rgba(232,236,242,.22);
  color:var(--on-dark);
}
.mast--dark .mast-nav a{color:var(--on-dark-2);}
.mast--dark .ms-on{color:var(--on-dark);}
.mast--dark .ms-sep{color:rgba(232,236,242,.4);}
.mast-link{position:relative;color:inherit;text-decoration:none;}
/* 워드마크는 글자 높이가 낮다. 배치를 흔들지 않고 탭 타깃만 44px 로 넓힌다. */
.mast-link::after{
  content:"";position:absolute;left:-10px;right:-10px;top:50%;
  transform:translateY(-50%);height:44px;
}

/* 머리 띠 — 아카이브와 같은 hero 장면 위에 발행일·「이번 판」·헤드라인을 페이퍼 활자로 얹는다.
   media 는 절대배치 배경이고 높이는 활자 내용이 정한다(헤드라인이 길어도 잘리지 않음).
   영상 src 는 페이지 하단 인라인 스크립트가 900px 이상·모션 허용일 때만 넣는다. */
.d-band{position:relative;background:var(--ink);overflow:hidden;color:var(--on-dark);}
.d-band .band-still,.d-band .band-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.d-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,31,.5),rgba(20,24,31,.84));
}
.d-band-in{
  position:relative;z-index:1;min-height:212px;
  padding:44px 20px 24px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
}
.d-date{font-size:12px;font-weight:600;color:var(--on-dark-2);font-variant-numeric:tabular-nums;}
.d-band-in .eyebrow{margin-top:12px;color:var(--on-dark-2);}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ink-3);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--signal);flex:0 0 auto;}
.d-band-in h1{
  margin-top:12px;font-size:29px;line-height:1.32;font-weight:800;
  letter-spacing:-.9px;word-break:keep-all;
}
/* 헤드라인의 *별표* 강조 — 어두운 띠 위라 코랄 밑줄 띠를 조금 더 진하게 깐다. */
.d-band-in h1 em{font-style:normal;box-shadow:inset 0 -.26em 0 rgba(255,107,94,.45);}

.toc-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:26px;padding:0 20px 10px;border-bottom:2px solid var(--ink);
}
.toc-h .t{font-size:11px;font-weight:800;letter-spacing:.18em;}
.toc-h .c{font-size:12px;font-weight:600;color:var(--ink-3);}

/* 목차 행 = 이슈 그 자체. 접힌 상태에서 오늘 전체가 첫 화면에 들어오는 것이 이 화면의 전제다. */
.row{border-bottom:1px solid var(--rule);}
.row>summary{
  list-style:none;display:flex;gap:14px;align-items:flex-start;
  padding:16px 20px;min-height:44px;cursor:pointer;
}
.row>summary::-webkit-details-marker{display:none;}
.row[open]>summary{box-shadow:inset 3px 0 0 var(--signal);padding-bottom:12px;}
.no{
  flex:0 0 auto;padding-top:3px;font-size:12px;font-weight:800;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.ct{flex:1;font-size:17px;line-height:1.5;font-weight:700;letter-spacing:-.35px;word-break:keep-all;}
.chev{
  flex:0 0 auto;width:9px;height:9px;margin-top:7px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);
}
.row[open] .chev{transform:rotate(-135deg);margin-top:10px;}

/* 펼침 안쪽 — 사실과 판단을 같은 지면에 두지 않는다.
   사실은 흰 지면에, 판단은 검은 블록에. 손님 앞에서 손가락으로 갈라 짚기 위한 구분이다. */
.row-body{padding:8px 20px 30px 44px;}
.tlabel{
  padding-bottom:8px;border-bottom:1px solid var(--rule);
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ink-3);
}
.track ul{margin-top:14px;}
.track li{
  position:relative;padding-left:16px;margin-bottom:12px;max-width:34em;
  font-size:16px;line-height:1.72;word-break:keep-all;
}
.track li:last-child{margin-bottom:0;}
.track li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:2px;background:var(--signal);}
.track-fact li{color:var(--ink-2);}
.track-view{margin-top:24px;background:var(--ink);color:var(--on-dark);padding:20px 18px 18px;}
.track-view .tlabel{color:var(--signal);border-bottom-color:rgba(232,236,242,.22);}
.track-view li{color:var(--on-dark-2);line-height:1.75;}

/* 원문 — 네 번째 조각. 버튼 한 줄로 줄이지 않고 기사 제목을 그대로 남긴다. */
.slink{
  display:block;margin-top:24px;padding:14px 16px;
  border:1px solid var(--ink);color:var(--ink);text-decoration:none;
}
.slink .t{display:block;font-size:14px;font-weight:700;line-height:1.55;word-break:keep-all;}
.slink .m{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--ink-3);}
.link-mark{display:inline-block;width:13px;height:13px;margin-left:5px;vertical-align:0;flex-shrink:0;}
.link-mark path{stroke:var(--ink-3);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ══════════ 푸터 (모든 페이지 공용) ══════════ */

footer{padding:26px 20px 44px;}
/* 회차 이동 — 왼쪽 이전(과거)·가운데 홈 버튼·오른쪽 다음(최신). 없는 쪽은 빈 자리로 균형을 지킨다. */
.ed-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:18px;
}
.ed-nav .en-side{
  position:relative;min-width:88px;
  font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.ed-nav .en-next{text-align:right;}
/* 글자 높이가 낮은 날짜 링크 — 배치를 흔들지 않고 탭 타깃만 44px 로 넓힌다 */
.ed-nav .en-side::after{
  content:"";position:absolute;left:-8px;right:-8px;top:50%;
  transform:translateY(-50%);height:44px;
}
/* 예전 아카이브 푸터의 홈 버튼과 같은 형태 — 가운데에서 남는 폭을 채운다 */
.all-link{
  display:block;flex:1;max-width:340px;text-align:center;padding:14px;
  border:1px solid var(--ink);
  font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;
}
.disclaimer{
  padding-top:16px;border-top:1px solid var(--rule);
  font-size:12px;line-height:1.7;color:var(--ink-3);word-break:keep-all;
}

/* ══════════ 인덱스(아카이브) 페이지 ══════════ */
/* 상세와 같은 마스트헤드 아래, 발행 대장. 한 줄 = 발행일 · 헤드라인 · 건수. */

.arch-head{padding:30px 20px 0;}
.arch-head h1{font-size:29px;font-weight:800;letter-spacing:-.9px;word-break:keep-all;}
.arch-sub{margin-top:10px;font-size:14px;line-height:1.7;color:var(--ink-2);word-break:keep-all;}

.arch-list{margin-top:24px;border-top:2px solid var(--ink);}
/* 달 단위 구분선 — 달이 바뀌는 행 앞에 「YYYY년 M월」 꼬리표 한 줄 */
.arch-month{
  padding:22px 20px 8px;border-bottom:1px solid var(--rule);
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.arch-row{
  display:flex;gap:14px;align-items:baseline;
  padding:16px 20px;min-height:44px;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
}
/* 최신 행 — 이 지면의 코랄 포인트는 이 룰 하나다. */
.arch-row.is-latest{box-shadow:inset 3px 0 0 var(--signal);}
.arch-row.is-latest .ar-d{color:var(--ink);font-weight:800;}
.ar-d{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.ar-h{flex:1;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.3px;word-break:keep-all;}
.ar-n{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* ══════════ 홈(랜딩) ══════════ */
/* 스크롤에 맞춰 장면이 넘어가는 챕터 5개. 챕터마다 배경 영상 한 장,
   그 위에 잉크 스크림과 페이퍼 활자. 코랄은 표지의 버튼 하나에만 쓴다. */

html:has(.land){scroll-snap-type:y proximity;}

.land{position:relative;background:var(--ink);color:var(--on-dark);}
.ch{
  position:relative;display:flex;overflow:hidden;
  min-height:100vh;min-height:100svh;
  scroll-snap-align:start;
}
.ch-bg{position:absolute;inset:0;}
.ch-bg img,.ch-bg video{display:block;width:100%;height:100%;object-fit:cover;}
.ch-bg video{position:absolute;inset:0;}
/* 활자가 설 수 있게 장면 위에 잉크 스크림 한 장 */
.ch-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,31,.74),rgba(20,24,31,.5) 45%,rgba(20,24,31,.82));
}
.ch-in{
  position:relative;width:100%;max-width:960px;margin:0 auto;
  padding:76px 20px 68px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.ch-folio{
  position:absolute;top:26px;right:20px;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--on-dark-2);
  font-variant-numeric:tabular-nums;
}

/* ① 표지 — 제호는 이미지가 아니라 활자로 조판한다. 폴리오는 위에 뜬 마스트헤드를 피해 내린다. */
.ch-1 .ch-in{align-items:center;text-align:center;}
.ch-1 .ch-folio{top:74px;}
.land-mast{display:flex;flex-direction:column;align-items:center;}
.lm-rule{width:min(340px,76vw);height:1px;background:rgba(232,236,242,.4);}
.lm-name{margin:20px 0;font-size:clamp(42px,10.5vw,92px);line-height:1.02;font-weight:800;letter-spacing:.05em;white-space:nowrap;}
.lm-sub{margin-top:24px;font-size:clamp(16px,4.4vw,21px);font-weight:700;letter-spacing:-.3px;word-break:keep-all;}
.lm-meta{margin-top:10px;font-size:13px;font-weight:600;color:var(--on-dark-2);font-variant-numeric:tabular-nums;}
.land-cta{
  display:inline-block;margin-top:36px;padding:16px 36px;
  background:var(--signal);color:var(--ink);
  font-size:16px;font-weight:800;text-decoration:none;
}
.land-hint{
  position:absolute;bottom:28px;left:50%;width:10px;height:10px;
  border-right:1.6px solid var(--on-dark-2);border-bottom:1.6px solid var(--on-dark-2);
  transform:translateX(-50%) rotate(45deg);
}

/* 챕터 공통 활자 — 상세의 꼬리표 체계를 어두운 지면용으로 옮긴 것 */
.ch-k{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--on-dark-2);
}
.ch-k::before{content:"";width:22px;height:2px;background:var(--on-dark-2);flex:0 0 auto;}
.ch-t{margin-top:14px;font-size:clamp(26px,6.6vw,40px);line-height:1.3;font-weight:800;letter-spacing:-.8px;word-break:keep-all;}
.ch-d{margin-top:14px;max-width:34em;font-size:15px;line-height:1.7;color:var(--on-dark-2);word-break:keep-all;}

/* ② 무엇을 드리나 */
.give{margin-top:34px;width:100%;max-width:560px;list-style:none;}
.give li{display:flex;gap:18px;padding:18px 0;border-top:1px solid rgba(232,236,242,.22);}
.give li:last-child{border-bottom:1px solid rgba(232,236,242,.22);}
.g-no{flex:0 0 auto;padding-top:4px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--on-dark-2);font-variant-numeric:tabular-nums;}
.give strong{display:block;font-size:18px;font-weight:800;letter-spacing:-.3px;}
.give p{margin-top:6px;font-size:14px;line-height:1.65;color:var(--on-dark-2);word-break:keep-all;}

/* ③ 축소 시안 — 실물 카드 대신 사실·판단·원문 세 부분의 구조만 라벨로 보여주는 정적 카드 */
.mock{
  margin-top:26px;width:100%;max-width:480px;
  background:var(--sheet);color:var(--ink);
  padding:22px 20px 20px;
  box-shadow:0 28px 70px rgba(0,0,0,.4);
}
/* 실제 화면이 아니라 구조를 보여주는 그림이라는 표시 */
.mock-cap{
  margin-bottom:16px;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ink-3);
}
.mock-label{
  padding-bottom:8px;border-bottom:1px solid var(--rule);
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ink-3);
}
/* 본문 자리 표시 — 글줄을 암시하는 회색 띠 두 줄 */
.mock-line{display:block;height:8px;margin-top:14px;background:rgba(62,71,86,.14);}
.mock-line.is-short{width:62%;}
.mock-view{margin-top:20px;background:var(--ink);color:var(--on-dark);padding:16px 16px 18px;}
.mock-view .mock-label{color:var(--signal);border-bottom-color:rgba(232,236,242,.22);}
.mock-view .mock-line{background:rgba(232,236,242,.16);}
.mock-link{margin-top:20px;padding:13px 14px;border:1px solid var(--ink);}
.mock-link .mock-label{padding-bottom:0;border-bottom:0;}

/* ④ 지난 브리핑 */
.past{margin-top:30px;width:100%;max-width:640px;border-top:2px solid var(--on-dark);}
.past-row{
  display:flex;gap:16px;align-items:baseline;
  padding:13px 2px;min-height:44px;
  border-bottom:1px solid rgba(232,236,242,.22);
  text-decoration:none;color:inherit;
}
.pr-d{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--on-dark-2);font-variant-numeric:tabular-nums;}
.pr-h{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.land-ghost{
  display:inline-block;margin-top:26px;padding:13px 24px;
  border:1px solid rgba(232,236,242,.5);color:var(--on-dark);
  font-size:14px;font-weight:700;text-decoration:none;
}

/* ⑤ 받아보기 */
.land-soon{
  margin-top:26px;padding:16px 18px;max-width:420px;
  border:1px dashed rgba(232,236,242,.4);
  font-size:14px;line-height:1.65;color:var(--on-dark-2);word-break:keep-all;
}
.land-links{margin-top:24px;display:flex;gap:12px;font-size:14px;font-weight:700;}
.land-links a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid rgba(232,236,242,.4);padding-bottom:2px;}
.land-links span{color:var(--on-dark-2);}
.land-legal{
  margin-top:44px;padding-top:16px;max-width:640px;
  border-top:1px solid rgba(232,236,242,.22);
  font-size:12px;line-height:1.7;color:var(--on-dark-2);word-break:keep-all;
}

/* 휴대폰·모션 축소 — 영상 대신 같은 장면의 정지 이미지 */
@media (max-width:899px){ .ch-bg video{display:none;} .band-motion{display:none;} }
@media (prefers-reduced-motion:reduce){ .ch-bg video{display:none;} .band-motion{display:none;} }

/* ══════════ 데스크톱 ══════════ */

@media (min-width:900px){
  .page{max-width:880px;margin:36px auto;min-height:0;}

  /* 머리 띠 — 넓어지면 여백과 최소 높이를 키운다 */
  .d-band-in{min-height:264px;padding:56px 32px 30px;}
  .d-band-in h1{font-size:34px;letter-spacing:-1.1px;max-width:24em;}
  .mast,.toc-h{padding-left:32px;padding-right:32px;}
  .row>summary{padding-left:32px;padding-right:32px;}
  .ct{font-size:18px;}

  /* 넓어지면 사실과 판단을 위아래가 아니라 좌우로 세운다. 둘을 한눈에 대조하기 위함. */
  .row-body{
    padding:8px 32px 34px 62px;
    display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start;
  }
  .track-fact{grid-column:1;}
  .track-view{grid-column:2;margin-top:0;padding:20px 22px 18px;}
  .slink{grid-column:1 / -1;margin-top:26px;}

  footer{padding:30px 32px 52px;}

  /* 아카이브 */
  .arch-head{padding:34px 32px 0;}
  .arch-row{padding-left:32px;padding-right:32px;}
  .arch-month{padding-left:32px;padding-right:32px;}

  /* 랜딩 — 여백을 넓힌다 */
  .ch-in{padding:96px 48px 84px;}
  .ch-folio{top:34px;right:48px;}
  .ch-1 .ch-folio{top:82px;}
  .mast--dark{padding-left:32px;padding-right:32px;}
  .mock{padding:26px 24px 24px;}
}