/* 2026-10-22: refined romantic editorial system shared by all public pages. */
/* Font families are provided by kokoro-typography.css. */

body.rose-site {
  --rose-bg: #f8f4ee;
  --rose-surface: #fffdf9;
  --rose-ink: #2f292c;
  --rose-muted: #766b6f;
  --rose-line: #d9cfca;
  --rose-accent: #963b55;
  --rose-pink: #d9aeb9;
  --rose-tint: #f1e5e7;
  --rose-soft: #eee9e2;
  --editorial-gold: #b49362;
  --font-editorial: 'Gowun Batang', 'Noto Serif KR', Batang, serif;
  --font-ui: 'Noto Sans KR', Pretendard, SUIT, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-hand: OwnglyphParkDahyeon, 'Nanum Pen Script', cursive;
  --font-primary: var(--font-ui);
  background: var(--rose-bg);
  font: 400 16px/1.72 var(--font-ui);
  letter-spacing: -.012em;
}

html[data-rose-theme='dark'] body.rose-site,
body.rose-site.theme-dark {
  --rose-bg: #241f25;
  --rose-surface: #2e282f;
  --rose-ink: #f5eee9;
  --rose-muted: #bfb3b8;
  --rose-line: #4c4349;
  --rose-accent: #e3a0b4;
  --rose-pink: #9b6677;
  --rose-tint: #392c33;
  --rose-soft: #2a252b;
  --editorial-gold: #c2a77c;
}

body.rose-site::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

html[data-rose-theme='dark'] body.rose-site::after,
body.rose-site.theme-dark::after { mix-blend-mode: screen; opacity: .045; }

body.rose-site :where(h1, h2, h3, .rose-brand, .month-title, .anniversary-event-number) {
  font-family: var(--font-editorial);
  text-wrap: balance;
}

body.rose-site :where(.diary-text, .rose-profile-photo figcaption, .anniversary-postit-button p) {
  font-family: var(--font-hand);
}

body.rose-site :where(button, input, textarea, select) { font-family: var(--font-ui); }

/* Header: quiet magazine masthead instead of a large handwritten navigation bar. */
body.rose-site .rose-header {
  position: sticky;
  top: 0;
  z-index: 4000;
  width: 100%;
  height: 84px;
  margin: 0;
  padding-inline: max(28px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid color-mix(in srgb, var(--rose-line) 82%, transparent);
  background: color-mix(in srgb, var(--rose-bg) 93%, transparent);
  box-shadow: none;
  backdrop-filter: blur(15px) saturate(.9);
}

body.rose-site .rose-brand { font: 700 25px/1 var(--font-editorial); letter-spacing: -.045em; }
body.rose-site .rose-brand > span { font-family: var(--font-editorial); font-size: 14px; color: var(--editorial-gold); }
body.rose-site .rose-brand small { margin-top: 8px; font: 500 9px/1 var(--font-ui); letter-spacing: .18em; color: var(--rose-muted); }
body.rose-site .rose-nav { gap: 24px; font: 500 14px/1.4 var(--font-ui); letter-spacing: .02em; }
body.rose-site .rose-nav a { padding-block: 14px; }
body.rose-site .rose-nav a::after { bottom: 8px; height: 1px; }
body.rose-site .rose-link-nav { font-size: 14px; font-weight: 500; }
body.rose-site .rose-header-actions { gap: 17px; }
body.rose-site .rose-theme-toggle { font-family: var(--font-ui); font-size: 12px; }
body.rose-site .rose-theme-icon { font-size: 17px; }

/* Shared editorial rhythm. */
body.rose-site .rose-shell { width: min(1240px, calc(100% - 112px)); }
body.rose-site .rose-section { padding-block: 96px; }
body.rose-site .rose-section-head { margin-bottom: 34px; padding-bottom: 18px; border-bottom: 1px solid var(--rose-line); }
body.rose-site .rose-section-head h2 { margin-top: 7px; font-size: clamp(36px, 4.1vw, 54px); line-height: 1.18; letter-spacing: -.045em; }
body.rose-site .rose-eyebrow {
  font: 600 11px/1.5 var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-accent);
}
body.rose-site .rose-section-description { font-size: 16px; }
body.rose-site .rose-text-link { gap: 12px; font-size: 14px; font-weight: 500; }
body.rose-site .rose-button,
body.rose-site :is(.primary-btn, .secondary-btn) { border-radius: 8px; font-family: var(--font-ui); }
body.rose-site .rose-button { min-height: 50px; padding: 11px 20px; font-size: 15px; font-weight: 500; }
body.rose-site .rose-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(91, 42, 57, .12); }
body.rose-site .rose-schedule-band { background: color-mix(in srgb, var(--rose-soft) 72%, var(--rose-bg)); }
body.rose-site .rose-video-band { background: color-mix(in srgb, var(--rose-tint) 56%, var(--rose-bg)); }

/* Home cover: portrait-led editorial opener. */
body.rose-site .rose-cover {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: clamp(56px, 8vw, 118px);
  min-height: 700px;
  padding-top: 56px;
  padding-bottom: 78px;
}
body.rose-site .rose-cover-copy { position: relative; z-index: 1; }
body.rose-site .rose-cover h1 {
  margin: 21px 0 25px;
  font-family: var(--font-editorial);
  font-size: clamp(62px, 7.4vw, 104px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.065em;
}
body.rose-site .rose-cover h1 em { font-family: inherit; font-weight: 400; }
body.rose-site .rose-cover h1 > span { color: var(--editorial-gold); font-family: var(--font-editorial); }
body.rose-site .rose-cover-description { max-width: 610px; margin-bottom: 30px; font-size: 18px; line-height: 1.85; }
body.rose-site .rose-profile-cta { margin-top: 35px; font-size: 14px; }
body.rose-site .rose-portrait-area { position: relative; max-width: 470px; }
body.rose-site .rose-portrait-area::before {
  content: '01';
  position: absolute;
  right: calc(100% - 34px);
  bottom: 2px;
  z-index: -1;
  color: color-mix(in srgb, var(--rose-accent) 12%, transparent);
  font: 700 clamp(130px, 16vw, 230px)/.72 var(--font-editorial);
  letter-spacing: -.1em;
}
body.rose-site .rose-portrait {
  aspect-ratio: 4 / 4.35;
  border: 1px solid color-mix(in srgb, var(--rose-line) 80%, var(--rose-surface));
  border-radius: 48% 48% 12px 12px;
  box-shadow: 0 26px 70px rgba(65, 43, 50, .13);
}
body.rose-site .rose-photo-sheen { display: none; }
body.rose-site .rose-photo-bottom { padding-top: 14px; font: 500 10px/1.5 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
body.rose-site .rose-today { padding: 16px 0 17px 20px; border: 0; border-left: 2px solid var(--rose-accent); background: linear-gradient(90deg, var(--rose-tint), transparent 82%); }
body.rose-site .rose-today h2 { font-size: 13px; font-weight: 600; }
body.rose-site .rose-today h2 i { animation: none; }
body.rose-site .rose-today > strong { font: 700 20px/1.5 var(--font-editorial); }
body.rose-site .rose-today-bottom, body.rose-site .rose-today-top > span { font-size: 13px; }

/* Cards use one restrained radius, one hairline, and almost no glass/shadow. */
body.rose-site :is(.kokoro-guide-card, .kokoro-info-card, .kokoro-stat, .kokoro-timeline article,
  .kokoro-list-date, .kokoro-setlist li, .kokoro-search-card) {
  border-color: var(--rose-line);
  border-radius: 12px;
  background: var(--rose-surface);
  box-shadow: none;
}
body.rose-site .kokoro-guide-grid { gap: 12px; }
body.rose-site .kokoro-guide-card { min-height: 178px; padding: 23px; position: relative; overflow: hidden; }
body.rose-site .kokoro-guide-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--rose-accent); opacity: .72; }
body.rose-site .kokoro-guide-card span { font-size: 10px; letter-spacing: .14em; }
body.rose-site .kokoro-guide-card b { font: 700 21px/1.35 var(--font-editorial); }
body.rose-site .kokoro-guide-card p { font-size: 13px; line-height: 1.65; }
body.rose-site .kokoro-info-card h3 { font: 700 23px/1.4 var(--font-editorial); }
body.rose-site .kokoro-chip-button { border-color: var(--rose-line); background: var(--rose-surface); font: 500 12px/1 var(--font-ui); }
body.rose-site .kokoro-chip-button[aria-pressed='true'],
body.rose-site .kokoro-chip-button.is-active { border-color: var(--rose-accent); background: var(--rose-accent); }
body.rose-site .kokoro-status-strip { min-height: 34px; background: #5b293b; font-size: 11px; letter-spacing: .04em; }
body.rose-site .kokoro-updated, body.rose-site .kokoro-stat span { font-size: 11px; }

body.rose-site .diary-card {
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--rose-surface) 78%, var(--rose-tint)) !important;
  padding: clamp(28px, 4vw, 48px) !important;
}
body.rose-site .diary-title { font-family: var(--font-editorial) !important; font-weight: 700 !important; }
body.rose-site .diary-reader { border-radius: 10px; background: var(--rose-surface); }
body.rose-site .diary-text { font-size: 23px !important; line-height: 1.9 !important; }
body.rose-site .diary-picture { border-radius: 9px !important; box-shadow: 0 16px 36px rgba(69, 42, 51, .1); }
body.rose-site .heart-btn, body.rose-site .comment-open-btn { font-family: var(--font-ui); font-size: 13px; }
body.rose-site .game-archive-tools :where(input, select) { border-radius: 8px; font-size: 15px; }
body.rose-site .game-archive-tools label > span { font: 500 12px/1.5 var(--font-ui); letter-spacing: .08em; }
body.rose-site .game-archive-card h3, body.rose-site .link-hub-text b { font-family: var(--font-editorial); font-weight: 700; }
body.rose-site .game-archive-card h3 { font-size: 22px; }
body.rose-site .game-card-meta dd, body.rose-site .game-rating > span { font-size: 15px; }
body.rose-site .game-card-meta dt, body.rose-site .game-status, body.rose-site .game-rating small { font-family: var(--font-ui); font-size: 11px; }
body.rose-site .player { border-radius: 10px; }
body.rose-site .video-item { padding: 18px 15px; font: 700 18px/1.5 var(--font-editorial); }
body.rose-site .video-item span { font: 400 13px/1.5 var(--font-ui); }
body.rose-site .rose-links .link-hub-card { min-height: 116px; border-radius: 10px !important; padding: 21px !important; }
body.rose-site .rose-links .link-hub-text b { font-size: 21px; }
body.rose-site .rose-links .link-hub-text small { font-size: 13px; }
body.rose-site .rose-footer-heart { color: var(--editorial-gold); }

/* Profile. */
body.rose-profile-page .rose-profile-main { padding-top: 58px; }
body.rose-profile-page .rose-profile-heading h1 { font-size: clamp(52px, 6vw, 82px); font-weight: 700; letter-spacing: -.06em; }
body.rose-profile-page .rose-profile-layout { gap: clamp(44px, 7vw, 92px); }
body.rose-profile-page .rose-profile-photo { max-width: 420px; }
body.rose-profile-page .rose-profile-photo .rose-portrait { border-radius: 46% 46% 10px 10px; }
body.rose-profile-page .rose-profile-photo figcaption { font-size: 22px; color: var(--rose-accent); }
body.rose-profile-page .rose-profile-facts .profile-item { border-color: var(--rose-line); }
body.rose-profile-page .rose-profile-facts .profile-item b { font: 500 11px/1.5 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
body.rose-profile-page .rose-profile-facts .profile-item span { font-family: var(--font-editorial); font-weight: 700; }
body.rose-profile-page .rose-world .story-list article { border-radius: 10px; box-shadow: none; }

/* Calendar: print-calendar clarity with a wine selection state. */
body.rose-calendar-page .rose-calendar-main { padding-top: 70px; }
body.rose-calendar-page .rose-calendar-intro { gap: 74px; margin-bottom: 52px; }
body.rose-calendar-page .rose-calendar-intro h1 { font-size: clamp(48px, 5vw, 68px); font-weight: 700; line-height: 1.1; letter-spacing: -.055em; }
body.rose-calendar-page .rose-calendar-intro header > p { max-width: 610px; font-size: 17px; }
body.rose-calendar-page .rose-month-panel { border-radius: 12px; padding: 30px; }
body.rose-calendar-page .month-title { font-family: var(--font-editorial); font-size: 39px; font-weight: 700; }
body.rose-calendar-page .head-btn { border-radius: 8px; font: 500 13px/1.5 var(--font-ui); }
body.rose-calendar-page .dow { font: 500 12px/1.5 var(--font-ui); letter-spacing: .08em; }
body.rose-calendar-page .day-cell { border-radius: 8px; }
body.rose-calendar-page .day-cell.today { animation: none; box-shadow: inset 0 0 0 1px var(--rose-accent); }
body.rose-calendar-page .day-num { font-family: var(--font-editorial); font-size: 21px; font-weight: 700; }
body.rose-calendar-page .day-snippet { font-size: 12px; }
body.rose-calendar-page .rose-calendar-detail .side-title,
body.rose-calendar-page .entry-title { font-family: var(--font-editorial); font-weight: 700; }
body.rose-calendar-page .entry-card { border-radius: 10px; }
body.rose-calendar-page .entry-text { font-size: 16px; }
body.rose-calendar-page .category-badge, body.rose-calendar-page .small-btn { font-family: var(--font-ui); font-size: 12px; }

/* Notice: remove floating glass decoration and read like a compact house style guide. */
body.notice-journal {
  --notice-ink: var(--rose-ink);
  --notice-copy: var(--rose-muted);
  --notice-muted: var(--rose-muted);
  --notice-pink: var(--rose-accent);
  --notice-pink-deep: var(--rose-accent);
  --notice-paper: var(--rose-surface);
  --notice-line: var(--rose-line);
  --notice-line-strong: color-mix(in srgb, var(--rose-accent) 40%, var(--rose-line));
  --notice-gold: var(--editorial-gold);
  background: var(--rose-bg) !important;
}
body.notice-journal .notice-backdrop { opacity: .28; }
body.notice-journal .notice-orb, body.notice-journal .notice-paper-star { display: none; }
body.notice-journal .notice-journal-shell { width: min(1240px, calc(100% - 112px)); padding: 62px 0 96px; }
body.notice-journal .notice-pinned { margin-bottom: 28px; padding: 22px 30px; border-radius: 12px; background: var(--rose-tint); box-shadow: none; }
body.notice-journal .notice-pinned::after { color: color-mix(in srgb, var(--rose-accent) 12%, transparent); }
body.notice-journal .notice-pinned .pinned-title { font: 700 26px/1.35 var(--font-editorial); }
body.notice-journal .notice-pinned .pinned-body { font-size: 15px; }
body.notice-journal .notice-hero { gap: 22px; padding: 0 0 46px; }
body.notice-journal .card { border-radius: 14px !important; background: var(--rose-surface) !important; box-shadow: none !important; backdrop-filter: none !important; }
body.notice-journal .notice-cover-card { padding: clamp(36px, 5vw, 62px) !important; }
body.notice-journal .notice-cover-card::after { width: 2px; height: auto; inset: 30px auto 30px 0; border-radius: 0; background: var(--rose-accent); }
body.notice-journal .notice-cover-card h1 { font-family: var(--font-editorial); font-size: clamp(48px, 6vw, 78px); font-weight: 700; line-height: 1.05; letter-spacing: -.06em; }
body.notice-journal .hero-copy { margin-top: 25px; font-size: 16px; line-height: 1.9; }
body.notice-journal .notice-cover-number, body.notice-journal .notice-section-index { font-family: var(--font-editorial); color: color-mix(in srgb, var(--rose-accent) 8%, transparent); }
body.notice-journal .notice-summary-panel { padding: 22px !important; }
body.notice-journal .notice-summary-list { gap: 10px; }
body.notice-journal .notice-summary-card { padding: 20px 20px 20px 27px; border-radius: 10px; background: var(--rose-bg) !important; }
body.notice-journal .notice-summary-card::before { top: 14px; bottom: 14px; width: 2px; background: var(--rose-accent); }
body.notice-journal .notice-summary-card b { font: 700 18px/1.45 var(--font-editorial); }
body.notice-journal .notice-summary-card p { font-size: 14px; }
body.notice-journal .notice-rule-columns { gap: 22px !important; }
body.notice-journal .notice-rule-section { padding: clamp(28px, 4vw, 42px) !important; }
body.notice-journal .notice-rule-section > .section-title { font-family: var(--font-editorial); font-weight: 700; letter-spacing: -.045em; }
body.notice-journal .notice-rule-section > .section-title::after { height: 1px; background: var(--rose-accent); }
body.notice-journal .pretty-rule { padding: 22px; border-radius: 10px; background: var(--rose-bg) !important; }
body.notice-journal .pretty-rule h3 { font-family: var(--font-editorial); font-weight: 700; }
body.notice-journal .pretty-rule > p { font-size: 15px; }
body.notice-journal .rule-heart { background: var(--rose-tint); box-shadow: none; }
body.notice-journal .note-card { border-radius: 12px; background: var(--rose-tint) !important; }
body.notice-journal [data-notice-reveal] { transition-duration: .38s; }

/* Songbook: compact album-library treatment. */
body.rose-songbook .sb-page { padding-top: 68px; }
body.rose-songbook .card { border-radius: 12px !important; }
body.rose-songbook .sb-title { font-family: var(--font-editorial); font-size: clamp(48px, 6vw, 76px); font-weight: 700 !important; letter-spacing: -.055em; }
body.rose-songbook .sb-lead { font-size: 17px; }
body.rose-songbook .section-head h2 { font-family: var(--font-editorial); font-weight: 700 !important; }
body.rose-songbook .sb-card { border-radius: 10px; animation: none; }
body.rose-songbook .sb-card:hover { transform: translateY(-3px); box-shadow: 0 15px 34px rgba(70, 42, 51, .08); }
body.rose-songbook .sb-song-title { font-family: var(--font-editorial); font-size: 21px; font-weight: 700; }
body.rose-songbook .sb-artist { font-size: 14px; }
body.rose-songbook :is(.sb-ready-tag, .sb-karaoke, .sb-last-sung, .sb-chip) { border-radius: 999px; font: 500 11px/1.4 var(--font-ui); }
body.rose-songbook :is(.secondary-btn, .sb-category, .sb-select) { border-radius: 999px; font: 500 13px/1.5 var(--font-ui); }
body.rose-songbook :is(.sb-request, .primary-btn) { border-radius: 8px; font: 500 14px/1.5 var(--font-ui); }
body.rose-songbook input, body.rose-songbook textarea, body.rose-songbook select { border-radius: 8px; font-family: var(--font-ui); }
body.rose-songbook .sb-search input { font-size: 16px; }
body.rose-songbook .sb-modal-card { border-radius: 12px; }

/* Playlist request: a calm single-form editorial spread. */
body.rose-site.music-request-page .music-request-page-main { padding-top: 70px; padding-bottom: 96px; }
body.rose-site.music-request-page .music-request-shell { gap: 64px; padding: clamp(32px, 5vw, 64px); border-radius: 14px; }
body.rose-site.music-request-page .music-request-intro h1 { font-family: var(--font-editorial); font-size: clamp(48px, 6vw, 76px); font-weight: 700; letter-spacing: -.06em; }
body.rose-site.music-request-page .music-request-intro > p { font-size: 17px; }
body.rose-site.music-request-page .music-request-gate-note { padding: 19px 21px; border-left-width: 2px; }
body.rose-site.music-request-page .music-request-gate-note strong { font: 600 12px/1.5 var(--font-ui); letter-spacing: .08em; }
body.rose-site.music-request-page .music-request-gate-note span { font: 700 21px/1.55 var(--font-editorial); }
body.rose-site.music-request-page .music-request-form { padding: 30px; border-radius: 12px; }
body.rose-site.music-request-page .music-request-field label { font: 600 13px/1.5 var(--font-ui); }
body.rose-site.music-request-page .music-request-field input,
body.rose-site.music-request-page .music-request-field textarea { border-radius: 8px; font-size: 15px; }
body.rose-site.music-request-page .music-request-submit { border-radius: 8px; font: 500 15px/1.5 var(--font-ui); }
body.rose-site.music-request-page .music-request-page-links a { border-radius: 999px; font: 500 13px/1.5 var(--font-ui); }

/* Anniversary: elegant archive outside, intimate paper notes inside. */
body.anniversary-archive-page .anniversary-hero { min-height: 590px; gap: 80px; padding-block: 74px 86px; }
body.anniversary-archive-page .anniversary-hero-copy h1 { font-family: var(--font-editorial); font-size: clamp(58px, 7.5vw, 100px); font-weight: 700; letter-spacing: -.07em; }
body.anniversary-archive-page .anniversary-hero-copy > p { font-size: 18px; }
body.anniversary-archive-page .anniversary-hero-mark { width: min(100%, 320px); border-color: var(--rose-line); background: transparent; box-shadow: none; }
body.anniversary-archive-page .anniversary-hero-mark::before,
body.anniversary-archive-page .anniversary-hero-mark::after { color: var(--editorial-gold); }
body.anniversary-archive-page .anniversary-hero-mark span,
body.anniversary-archive-page .anniversary-hero-mark b { font-family: var(--font-editorial); font-weight: 700; }
body.anniversary-archive-page .anniversary-event-grid { column-gap: 50px; }
body.anniversary-archive-page .anniversary-event-card { gap: 20px; padding: 30px 7px; }
body.anniversary-archive-page .anniversary-event-number { border-radius: 10px; background: color-mix(in srgb, var(--anniv-card) 55%, var(--rose-surface)); }
body.anniversary-archive-page .anniversary-event-copy h3,
body.anniversary-archive-page .anniversary-detail-heading h2,
body.anniversary-archive-page .anniversary-note-head h3 { font-family: var(--font-editorial); font-weight: 700; letter-spacing: -.04em; }
body.anniversary-archive-page .anniversary-detail-summary { font-family: var(--font-editorial); }
body.anniversary-archive-page .anniversary-detail-body { border-radius: 12px; background: color-mix(in srgb, var(--rose-surface) 55%, var(--rose-tint)); font-size: 17px; }
body.anniversary-archive-page .anniversary-note-board { gap: 28px 22px; }
body.anniversary-archive-page .anniversary-postit { --note-tilt: -.35deg; filter: drop-shadow(0 10px 13px rgba(88, 62, 70, .12)); }
body.anniversary-archive-page .anniversary-postit:nth-child(4n+2) { --note-bg: #eedde2; --note-tilt: .45deg; }
body.anniversary-archive-page .anniversary-postit:nth-child(4n+3) { --note-bg: #e6dfec; --note-tilt: -.25deg; }
body.anniversary-archive-page .anniversary-postit:nth-child(4n) { --note-bg: #dde8df; --note-tilt: .35deg; }
body.anniversary-archive-page .anniversary-postit-button { min-height: 230px; background: linear-gradient(145deg, rgba(255,255,255,.32), transparent 45%), var(--note-bg); }

/* Dark mode keeps the plum paper feeling and avoids light-theme gradients. */
html[data-rose-theme='dark'] body.notice-journal .notice-summary-card,
html[data-rose-theme='dark'] body.notice-journal .pretty-rule,
body.theme-dark.notice-journal .notice-summary-card,
body.theme-dark.notice-journal .pretty-rule { background: var(--rose-soft) !important; }

@media (max-width: 1080px) {
  body.rose-site .rose-header { padding-inline: 34px; }
  body.rose-site .rose-nav { gap: 15px; font-size: 12px; }
  body.rose-site .rose-cover { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 50px; }
  body.rose-site .rose-portrait-area::before { right: calc(100% - 18px); }
  body.notice-journal .notice-journal-shell { width: calc(100% - 68px); }
}

@media (max-width: 900px) {
  body.rose-site .rose-shell { width: min(780px, calc(100% - 56px)); }
  body.rose-site .rose-header { padding-inline: 28px; }
  body.rose-site .rose-cover { grid-template-columns: 1fr; min-height: 0; }
  body.rose-site .rose-portrait-area { justify-self: center; }
  body.rose-site .rose-portrait-area::before { right: auto; left: -70px; }
  body.rose-calendar-page .rose-calendar-intro { gap: 36px; }
  body.notice-journal .notice-journal-shell { width: min(720px, calc(100% - 56px)) !important; padding-top: 52px; }
  body.anniversary-archive-page .anniversary-hero { min-height: 0; gap: 45px; }
}

@media (max-width: 700px) {
  body.rose-site { font-size: 15px; }
  body.rose-site .rose-header { position: relative; min-height: 105px; padding: 16px 20px 8px; background: var(--rose-bg); }
  body.rose-site .rose-shell { width: calc(100% - 40px); }
  body.rose-site .rose-nav { gap: 23px; font-size: 13px; }
  body.rose-site .rose-section { padding-block: 64px; }
  body.rose-site .rose-section-head { margin-bottom: 25px; padding-bottom: 14px; }
  body.rose-site .rose-section-head h2 { font-size: 36px; }
  body.rose-site .rose-cover { gap: 42px; padding-top: 44px; padding-bottom: 58px; }
  body.rose-site .rose-cover h1 { font-size: clamp(54px, 15vw, 72px); }
  body.rose-site .rose-cover-description { font-size: 16px; }
  body.rose-site .rose-portrait-area { width: min(100%, 430px); }
  body.rose-site .rose-portrait-area::before { left: -18px; bottom: -4px; font-size: 125px; }
  body.rose-site .rose-portrait { border-radius: 48% 48% 10px 10px; }
  body.rose-site .kokoro-guide-card { min-height: 138px; }
  body.rose-site .diary-text { font-size: 21px !important; }
  body.rose-site .rose-links .link-hub-card { min-height: 96px; }
  body.rose-profile-page .rose-profile-main { padding-top: 38px; }
  body.rose-calendar-page .rose-calendar-main { padding-top: 42px; }
  body.rose-calendar-page .rose-calendar-intro { gap: 24px; margin-bottom: 36px; }
  body.rose-calendar-page .rose-month-panel { padding: 18px 14px; }
  body.rose-calendar-page .month-title { font-size: 31px; }
  body.rose-calendar-page .day-cell { border-radius: 6px; }
  body.rose-calendar-page .day-num { font-size: 18px; }
  body.notice-journal .notice-journal-shell { width: calc(100% - 40px) !important; padding: 38px 0 72px; }
  body.notice-journal .notice-cover-card h1 { font-size: 44px; }
  body.notice-journal .notice-pinned { padding: 20px; }
  body.notice-journal .notice-rule-section { padding: 25px 20px !important; }
  body.notice-journal .pretty-rule { padding: 20px 17px; }
  body.rose-songbook .sb-page { padding-top: 42px; }
  body.rose-songbook .sb-title { font-size: 46px; }
  body.rose-site.music-request-page .music-request-page-main { padding-top: 42px; }
  body.rose-site.music-request-page .music-request-shell { padding: 28px 21px; }
  body.rose-site.music-request-page .music-request-form { padding: 23px 19px; }
  body.anniversary-archive-page .anniversary-hero { padding-block: 48px 62px; }
  body.anniversary-archive-page .anniversary-hero-copy h1 { font-size: clamp(52px, 15vw, 70px); }
  body.anniversary-archive-page .anniversary-postit { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.rose-site *, body.rose-site *::before, body.rose-site *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}