@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;500;600&display=swap');
:root { --ink:#35312c; --paper:#f2efe6; --line:#b8b0a2; --night:#172230; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#e7e1d6; font-family:"Noto Serif JP",serif; line-height:1.75; }
.character-sheet { max-width:1450px; min-height:100vh; margin:auto; padding:18px 38px 24px; display:grid; grid-template-columns:minmax(380px,1fr) minmax(520px,1.08fr); gap:18px 36px; background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(235,230,218,.6)),var(--paper); box-shadow:0 0 32px rgba(48,39,29,.13); }
.sheet-header { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; min-height:35px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#746d62; font:14px/1.3 "DM Mono",monospace; letter-spacing:.12em; }
.sheet-header a { color:inherit; text-decoration:none; font-family:"Noto Serif JP",serif; font-size:18px; letter-spacing:.1em; }.sheet-header p { margin:0; color:#aa9c8b; }
.main-column,.side-column { min-width:0; display:flex; flex-direction:column; gap:16px; }
.hero-portrait { position:relative; min-height:660px; overflow:hidden; background:var(--night); }.hero-portrait::after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,rgba(6,13,20,.92)); pointer-events:none; }.hero-portrait img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; }.portrait-copy { position:absolute; z-index:1; left:28px; right:28px; bottom:28px; color:#fff; text-shadow:0 1px 12px #000; }
h1,h2,p { margin-top:0; }h1 { margin-bottom:2px; font-size:clamp(38px,4vw,58px); font-weight:500; letter-spacing:.12em; }.roman { margin-bottom:20px; font:18px "DM Mono",monospace; letter-spacing:.08em; }.hero-quote { margin:0; font-size:17px; line-height:1.85; }
.dark-card { padding:16px 22px; color:#eee9de; background:linear-gradient(135deg,rgba(17,29,41,.98),rgba(26,38,48,.91)); }.dark-card h2,.panel h2,.memo h2 { margin-bottom:9px; font-size:18px; font-weight:500; }.basic-info dl { margin:0; }.basic-info dl div { display:grid; grid-template-columns:5em 1fr; gap:16px; }.basic-info dt,.basic-info dd { margin:0; }
.panel,.memo { padding:18px 22px; border:1px solid var(--line); background:rgba(255,255,255,.26); }.panel h2,.memo h2 { padding-bottom:8px; border-bottom:1px solid #cbc3b5; }.overview p { margin-bottom:7px; }.overview p:last-child { margin:0; }.traits ul { margin:0; padding-left:1.25em; }
.visual-notes { padding-bottom:24px; }.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.gallery img { width:100%; aspect-ratio:2/3; object-fit:cover; background:#27313b; }.memo { position:relative; min-height:155px; border-width:0 0 1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); }.memo p { margin:0 0 4px; }.current { display:grid; grid-template-columns:1fr 210px; gap:22px; align-items:center; }.current img { width:100%; aspect-ratio:1.5; object-fit:cover; background:#5d5244; }
.related { padding-bottom:8px; }.related a { display:flex; gap:12px; padding:7px 2px; color:inherit; border-bottom:1px solid #d0c8bb; text-decoration:none; }.related a:last-child { border-bottom:0; }.related a:hover { color:#806347; }.related b { margin-left:auto; font-weight:400; }.final-quote { margin:0; min-height:130px; padding:30px 26px; display:flex; align-items:center; border:1px solid var(--line); font-size:20px; background:rgba(255,255,255,.32); }footer { grid-column:1/-1; color:#897e6e; font:12px "DM Mono",monospace; letter-spacing:.06em; }
@media (max-width:900px) { .character-sheet { display:block; padding:12px 16px 20px; }.sheet-header { margin-bottom:16px; }.main-column,.side-column { gap:14px; }.side-column { margin-top:14px; }.hero-portrait { min-height:570px; } }@media (max-width:500px) { .character-sheet { padding:8px; }.sheet-header { padding:6px 0; }.sheet-header p { display:none; }.hero-portrait { min-height:510px; }.portrait-copy { left:20px; right:20px; bottom:20px; }.current { grid-template-columns:1fr; }.current img { max-width:250px; }.panel,.memo { padding:15px; } }

/* 今日の観測記録 */
.record-sheet { max-width:1180px; min-height:100vh; margin:auto; padding:18px 38px 24px; background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(235,230,218,.6)),var(--paper); box-shadow:0 0 32px rgba(48,39,29,.13); }
.record-sheet .sheet-header { margin-bottom:52px; }
.observation-log { max-width:980px; margin:auto; }
.record-title { margin-bottom:34px; }
.record-number { margin:0 0 10px; color:#8b765e; font:12px "DM Mono",monospace; letter-spacing:.12em; }
.record-title h1 { font-size:clamp(40px,6vw,72px); color:#252d31; }
.record-title > p:last-child { margin:0; color:#6a6259; }
.sky-card { min-height:350px; padding:38px; display:grid; grid-template-columns:1fr 1fr; gap:28px; overflow:hidden; color:#eee9de; background:linear-gradient(125deg,#101c2a,#294157); }
.sky-card h2 { margin:0 0 16px; font-size:clamp(24px,3vw,37px); font-weight:500; line-height:1.55; }.sky-card-copy > p:last-child { max-width:31em; margin:0; }
.moon-map { position:relative; min-height:250px; overflow:hidden; background:radial-gradient(circle at 75% 24%,rgba(255,255,255,.16) 0 1px,transparent 2px),radial-gradient(circle at 14% 63%,rgba(255,255,255,.16) 0 1px,transparent 2px),radial-gradient(circle at 50% 49%,rgba(255,255,255,.16) 0 1px,transparent 2px); }
.moon { position:absolute; display:block; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fffef5,#dedbcf 53%,#96958d); box-shadow:0 0 28px rgba(255,250,213,.5); }.large-moon { width:112px; height:112px; top:25px; right:70px; }.small-moon { width:48px; height:48px; top:132px; right:4px; }.horizon { position:absolute; right:-10%; bottom:10px; width:125%; height:90px; border-radius:50% 50% 0 0; background:#162332; transform:rotate(-5deg); }
.record-details { display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; margin:18px 0; }.conditions dl { margin:0; }.conditions dl div { display:grid; grid-template-columns:5em 1fr; gap:12px; padding:5px 0; border-bottom:1px solid #d0c8bb; }.conditions dl div:last-child { border:0; }.conditions dt,.conditions dd { margin:0; }.observer-note p:last-child { margin-bottom:0; }.record-quote { margin:18px 0; padding:30px; border-left:3px solid #a68464; background:rgba(255,255,255,.3); font-size:21px; }.record-nav { display:flex; justify-content:space-between; gap:16px; padding-top:18px; border-top:1px solid var(--line); }.record-nav a { color:#5f4c3b; text-decoration:none; }.record-nav a:hover { text-decoration:underline; }.record-sheet footer { margin-top:45px; }
@media (max-width:700px) { .record-sheet { padding:12px 16px 20px; }.record-sheet .sheet-header { margin-bottom:30px; }.sky-card,.record-details { grid-template-columns:1fr; }.sky-card { padding:24px; }.moon-map { min-height:190px; }.record-nav { flex-direction:column; }.record-quote { padding:22px; } }