/* #149의 기록 페이지에만 적용되는 사진집 디자인. 학생 허브/Viewer를 덮지 않습니다. */
:root { color-scheme: light; --paper:#f8f7f2; --ink:#23362f; --muted:#58655d; --line:#d8ddd2; --green:#365849; --accent:#a35434; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif; line-height:1.8; word-break:keep-all; overflow-wrap:anywhere; }
a { color:inherit; text-underline-offset:.3em; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #a35434; outline-offset:4px; }
[hidden] { display:none !important; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2 { font-family:Georgia,"Batang","AppleMyungjo",serif; font-weight:500; letter-spacing:-.045em; line-height:1.3; }
h2 { font-size:clamp(1.85rem,3.7vw,3.35rem); }
h3 { font-size:1.15rem; line-height:1.5; }
button,summary { cursor:pointer; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:10; background:white; padding:12px 20px; }
.skip-link:focus { top:10px; }
.page-header,.page-footer { width:min(1400px,92%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.page-header { padding:23px 0; border-bottom:1px solid var(--line); }
.brand { font-size:1.55rem; font-weight:850; letter-spacing:-.08em; text-decoration:none; }
.brand span { color:var(--green); }
.header-label { color:var(--muted); font-size:.8rem; letter-spacing:.15em; }
.back-link { padding:8px 0; font-size:.82rem; text-decoration:none; }
.back-link span { margin-left:10px; }
.hero { width:min(1400px,92%); margin:64px auto 0; display:grid; grid-template-columns:.85fr 1.15fr; gap:6%; align-items:center; }
.eyebrow { color:var(--accent); font-size:.73rem; letter-spacing:.15em; font-weight:700; margin-bottom:21px; }
h1 { font-size:clamp(2.3rem,4.1vw,4rem); }
h1>span { font-family:inherit; font-size:.7em; color:var(--green); }
.mobile-break { display:none; }
.subtitle { color:var(--muted); margin-top:28px; max-width:24em; font-size:1rem; }
.hero-names { font-size:.87rem; margin:26px 0; }
.hero-names span { color:var(--muted); margin:0 6px; }
.anchor-nav { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.8rem; }
.anchor-nav a { min-height:44px; display:flex; align-items:center; gap:15px; text-decoration:none; border-bottom:1px solid var(--line); }
.landscape { min-width:0; }
.hero .landscape img { width:100%; aspect-ratio:1.15/1; object-fit:cover; object-position:35% center; border-radius:2px; }
figcaption { color:var(--muted); font-size:.72rem; margin-top:12px; line-height:1.6; }
figcaption span { display:block; opacity:.85; }
.section-wrap { width:min(1020px,88%); margin:110px auto; }
.introduction { max-width:780px; text-align:center; margin-top:120px; }
.lead { font-size:1.1rem; line-height:2; }
.introduction .lead { max-width:34em; margin:28px auto; }
.period { font-size:.85rem; letter-spacing:.12em; color:var(--green); margin-top:44px; }
.numbers { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; margin:24px 0; }
.numbers div+div { border-left:1px solid var(--line); }
.numbers dt { font-size:.8rem; color:var(--muted); }
.numbers dd { font-family:Georgia,serif; font-size:clamp(1.7rem,4vw,3.2rem); margin:0; line-height:1.5; }
.numbers dd span { font-family:sans-serif; font-size:.8rem; margin-left:6px; }
.note { font-size:.82rem; color:var(--muted); margin-top:22px; line-height:1.85; }
.section-heading { margin-bottom:35px; }
.section-heading>p:not(.eyebrow) { color:var(--muted); margin-top:20px; max-width:46em; }
.moment-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; column-gap:52px; }
.moment-list li { display:flex; gap:24px; border-top:1px solid var(--line); padding:28px 0; }
.moment-date { font-family:Georgia,serif; color:var(--accent); font-size:1.35rem; flex-shrink:0; }
.moment-list p { color:var(--muted); font-size:.9rem; margin-top:10px; }
.photo-interlude { width:min(1400px,92%); margin:90px auto; }
.photo-interlude img { width:100%; aspect-ratio:2.5/1; object-fit:cover; }
.record-controls { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end; padding:20px; background:#eaece3; border-radius:3px; margin-bottom:16px; }
.record-controls label { font-size:.78rem; display:flex; flex-direction:column; gap:6px; min-width:0; }
.record-controls input,.record-controls select { width:100%; min-width:0; height:46px; border:1px solid #bac5b5; background:#fffef9; color:var(--ink); border-radius:2px; padding:0 10px; font-size:.87rem; }
.record-controls button,#print-button { min-height:46px; border:1px solid var(--green); padding:8px 16px; color:var(--ink); background:transparent; border-radius:2px; }
.filter-status { font-size:.84rem; color:var(--muted); margin:15px 0; }
.month-chapter { border-top:1px solid var(--line); }
.month-chapter:last-of-type { border-bottom:1px solid var(--line); }
.month-chapter>summary { display:flex; gap:25px; align-items:center; padding:25px 6px; list-style:none; font-size:1.25rem; font-weight:600; }
.month-chapter>summary::-webkit-details-marker { display:none; }
.chapter-number { color:var(--accent); min-width:62px; font-size:1.5rem; font-family:Georgia,"Batang",serif; }
.month-chapter small { display:block; font-weight:400; font-size:.77rem; color:var(--muted); margin-top:3px; }
.expand-icon { margin-left:auto; font-size:1.7rem; font-weight:400; }
.month-chapter[open] .expand-icon { transform:rotate(45deg); }
.chapter-days { padding:0 6px 20px; }
.day-card { display:grid; grid-template-columns:110px 1fr; padding:18px 0; border-top:1px dashed var(--line); gap:18px; }
.day-card>h3 { color:var(--green); font-size:.95rem; padding-top:8px; }
.day-card ul { list-style:none; padding:0; margin:0; min-width:0; }
.record-row { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:9px 0 20px; }
.record-row>div { min-width:0; }
.record-row h4 { font-size:1rem; line-height:1.6; }
.record-meta { font-size:.79rem; color:var(--muted); margin-top:3px; }
.current-link { flex-shrink:0; font-size:.78rem; min-height:44px; display:flex; align-items:center; gap:12px; }
.record-detail { font-size:.76rem; margin-top:8px; color:var(--muted); }
.record-detail summary { width:fit-content; padding:6px 3px; min-height:32px; }
.record-detail p { padding:10px 0; }
.process-list { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.process-list li { border-top:2px solid var(--green); padding:22px 0; }
.step { color:var(--accent); font-family:Georgia,serif; font-size:1.5rem; }
.process-list h3 { margin:12px 0; }
.process-list p { font-size:.9rem; color:var(--muted); }
.camera-story { max-width:740px; padding:48px; background:#eceee5; }
.camera-story .lead { margin-top:24px; }
.equipment-details { border-block:1px solid var(--line); }
.equipment-details>summary { padding:23px 6px; font-size:1rem; }
.setting-groups { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:16px 8px; }
.settings { margin:18px 0; }
.setting { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.85rem; }
.setting dd { margin:0; color:var(--green); text-align:right; }
.equipment-details>.note { margin:0 8px 25px; }
.credit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px 50px; }
.credit { padding:30px 0; border-top:1px solid var(--line); }
.credit-role { color:var(--accent); font-size:.85rem; }
.credit h3 { font-size:1.8rem; font-family:"Batang",serif; font-weight:500; margin:8px 0 20px; }
.credit>p:last-child { font-size:.95rem; color:var(--muted); }
.ending { width:min(1400px,92%); margin:100px auto; }
.ending img { width:100%; aspect-ratio:2.5/1; object-fit:cover; }
.ending-copy { text-align:center; padding:60px 0 0; }
.ending-copy>p:not(.eyebrow) { margin:25px 0; font-size:.9rem; }
.primary-link { display:inline-block; padding:14px 30px; background:var(--green); color:white; text-decoration:none; margin-top:10px; }
.primary-link span { margin-left:24px; }
.archive { border-top:1px solid var(--line); padding-top:45px; }
.archive h2 { font-size:1.65rem; margin-bottom:18px; }
.archive>p:not(.eyebrow) { font-size:.86rem; color:var(--muted); }
.archive-links { padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0; }
.archive-links a { display:block; font-size:.85rem; padding:12px 0; }
.source-details { font-size:.82rem; color:var(--muted); margin-top:24px; }
.source-details summary { padding:12px 0; }
.source-details p { margin:12px 0; }
.page-footer { border-top:1px solid var(--line); padding:28px 0 45px; font-size:.8rem; }
.page-footer p { margin-right:auto; }
.page-footer p span { font-size:.7rem; color:var(--muted); }
@media(max-width:800px) {
  .hero { grid-template-columns:1fr; margin-top:42px; gap:35px; }
  .hero-copy { max-width:38em; }
  .hero .landscape img { aspect-ratio:4/3; }
  h1 { font-size:clamp(2.5rem,6vw,3.8rem); }
  .section-wrap { margin-block:75px; }
  .record-controls { grid-template-columns:1fr 1fr; }
  .record-controls label:first-child { grid-column:1/-1; }
  .record-controls button { grid-column:1/-1; }
  .process-list { grid-template-columns:1fr 1fr; }
  .moment-list { column-gap:28px; }
  .moment-list li { gap:16px; }
}
@media(max-width:520px) {
  .page-header { gap:10px; padding:16px 0; flex-wrap:wrap; }
  .header-label { font-size:.65rem; letter-spacing:0; }
  .back-link { font-size:.72rem; margin-left:auto; }
  .brand { font-size:1.3rem; }
  .hero { margin-top:35px; }
  .hero-names { font-size:.78rem; }
  .hero-names span { margin:0 3px; }
  .subtitle { font-size:.92rem; }
  .mobile-break { display:block; }
  .anchor-nav { gap:10px 16px; }
  .anchor-nav a { gap:8px; font-size:.76rem; }
  .numbers dt { font-size:.66rem; }
  .numbers dd { font-size:1.85rem; }
  .numbers dd span { font-size:.65rem; margin-left:2px; }
  .moment-list { grid-template-columns:1fr; }
  .moment-list li { gap:23px; }
  .photo-interlude { margin-block:65px; }
  .photo-interlude img,.ending img { aspect-ratio:4/3; }
  .record-controls { padding:16px; }
  .month-chapter>summary { gap:16px; font-size:1.05rem; }
  .chapter-number { min-width:45px; font-size:1.3rem; }
  .day-card { grid-template-columns:1fr; gap:12px; }
  .day-card>h3 { font-size:.85rem; }
  .record-row { gap:8px; }
  .record-row h4 { font-size:.92rem; }
  .current-link { gap:6px; font-size:.72rem; }
  .process-list,.credit-grid,.setting-groups { grid-template-columns:1fr; gap:12px; }
  .camera-story { padding:28px 24px; }
  .lead { font-size:1rem; }
  .archive-links { grid-template-columns:1fr; gap:0; }
  .page-footer { flex-wrap:wrap; }
  .page-footer>p { width:65%; }
  .ending-copy { padding-top:42px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
@media print {
  :root { --paper:#fff; --ink:#000; --muted:#333; --line:#bbb; }
  html { scroll-behavior:auto; }
  body { font-size:10pt; }
  .page-header,.skip-link,.anchor-nav,.record-controls,#filter-status,#print-button,.primary-link,.page-footer>a:last-child { display:none !important; }
  .section-wrap,.hero,.ending,.photo-interlude { width:100%; margin:24pt 0; }
  .hero { display:block; }
  .hero .landscape img,.ending img,.photo-interlude img { max-height:180pt; object-fit:cover; }
  .hero-copy { margin-bottom:20pt; }
  h1 { font-size:30pt; } h2 { font-size:22pt; }
  .month-chapter[hidden],.day-card[hidden],.record-row[hidden] { display:revert !important; }
  /* JS가 꺼져 있어도 접힌 기록을 인쇄하는 브라우저의 표시 영역을 엽니다. */
  details::details-content { display:block !important; content-visibility:visible !important; }
  details>*:not(summary) { display:block !important; }
  details .record-row { display:flex !important; }
  .month-chapter,.day-card,.credit,.moment-list li,.setting { break-inside:avoid; }
  .month-chapter { break-inside:auto; }
  .record-detail p { padding:0; }
  .credit-grid,.setting-groups { display:block; }
  .camera-story { background:none; padding:0; }
  .current-link { font-size:8pt; }
  .expand-icon { display:none; }
  a { color:#000; }
}