/* Hallmark pre-emit: P4 H5 E4 S5 R5 V5. Direction A: printed title page / brand paper. */
.masthead { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; padding-block: var(--s5); border-bottom: 3px double var(--rule); }
.masthead .brand { font-family: var(--font-serif); font-size: 22px; }
.masthead > a:last-child { justify-self: end; }
.masthead > p { font-size: 13px; color: var(--muted); }
.title-page { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,.75fr); gap: var(--s8); align-items: center; padding-block: 84px 76px; }
.title-page .label { color: var(--red); margin-bottom: var(--s5); }
.title-page h1 { line-height: 1.5; }
.title-page .lead { max-width: 28em; margin: var(--s6) 0 var(--s5); }
.bookplate { justify-self: end; width: 300px; padding: 24px 26px; background: var(--paper); border: 1px solid var(--rule); }
.bookplate img { width: 246px; }
.bookplate figcaption { text-align: center; margin-top: 20px; font-family: var(--font-serif); font-size: 15px; color: var(--ink); letter-spacing: .15em; }
.connection { border-block: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--s7); padding-block: var(--s6); align-items: center; }
.connection p { max-width: 23em; font-size: 16px; }
.wordline { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.wordline strong { font-size: 27px; font-family: var(--font-serif); font-weight: 400; }
.wordline strong:lang(zh-CN) { font-family: var(--font-sc); }
.wordline small { display: block; color: var(--muted); font-size: 13px; }
.wordline .arrow { font-size: 22px; color: var(--red); }
.contents { padding-block: var(--s8); }
.contents-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s6); margin-bottom: var(--s6); }
.contents-head p { max-width: 23em; color: var(--muted); }
.contents dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 var(--s8); }
.contents dl>div { border-top: 1px solid var(--rule); padding-block: var(--s5); }
.contents dt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.contents dt strong { font-family: var(--font-serif); font-size: 35px; font-weight: 400; white-space: nowrap; }
.contents dt span { font-size: 16px; }
.contents dd { color: var(--muted); font-size: 15px; margin-top: var(--s2); }
.reading { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: var(--s7); padding-block: var(--s7); border-block: 1px solid var(--rule); align-items: center; }
.reading img { border: 1px solid var(--rule); }
.reading h2 { font-size: 31px; margin-bottom: var(--s5); }
.reading p+p { margin-top: var(--s4); }
.margin-note { margin-top: var(--s5); border-left: 2px solid var(--red); padding-left: var(--s4); font-size: 15px; }
.launch { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--s7); align-items: center; }
.launch .stores { margin-top: 0; flex-direction: column; }
.launch .store { display: flex; align-items: center; justify-content: space-between; }
.colophon { border-top: 3px double var(--rule); padding-block: var(--s6); }
.colophon .source-note { max-width: 64em; }
.colophon .source-note+p { margin-top: var(--s3); }
.colophon .footer-links { margin-top: var(--s3); }
@media(max-width:900px) { .title-page { gap: 32px; } .bookplate { width: 240px; padding: 20px; } .connection { gap: 24px; } .wordline strong { font-size: 22px; } }
@media(max-width:760px) {
 .masthead { grid-template-columns: minmax(0,1fr) auto; padding-block: 20px; } .masthead>p { display: none; } .masthead .brand { font-size: 19px; }
 .masthead .text-link { font-size: 13px; gap: 12px; }
 .title-page { grid-template-columns: minmax(0,1fr); padding-block: 44px 36px; gap: 36px; }
 .title-page h1 { font-size: 37px; } .title-page .lead { margin-block: 24px 16px; }
 .bookplate { width: 100%; display: flex; align-items: center; gap: 32px; padding: 24px; }
 .bookplate img { width: 120px; } .bookplate figcaption { margin: 0; text-align: left; font-size: 17px; line-height: 2; letter-spacing: .1em; }
 .connection { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .wordline strong { font-size: 22px; } .wordline small { font-size: 12px; } .wordline { gap: 10px; }
 .contents { padding-block: 48px; } .contents-head { display: block; } .contents-head p { margin-top: 16px; }
 .contents dl { grid-template-columns: minmax(0,1fr); } .contents dt strong { font-size: 32px; }
 .reading,.launch { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .reading figure { order: 2; } .reading h2 { font-size: 28px; }
}

/* 온고컴퍼니의 다른 앱 */
.siblings { margin-bottom: var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.siblings h2 { font-family: inherit; font-size: var(--small); font-weight: 600; color: var(--muted); letter-spacing: .02em; margin-bottom: var(--s3); }
.siblings ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
.siblings a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; text-decoration: none; }
.siblings b { font-weight: 600; }
.siblings span { font-size: var(--small); color: var(--muted); line-height: 1.6; }
.siblings a:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .siblings ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }