/* 공개용 뉴스레터의 기사 썸네일과 독립적인 지면 구성. */
.story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px; }
.story-grid img { aspect-ratio:1.45; object-fit:cover; }
.story-grid h3 { margin:15px 0 9px; font-size:22px; line-height:1.4; letter-spacing:-.035em; }
.story-grid p { font-size:16px; line-height:1.8; }
.story-grid .kicker { margin-top:17px; font-size:14px; }
.story-wide { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:26px; }
.story-wide img { aspect-ratio:.92; object-fit:cover; }
.story-wide h3 { font-size:27px; line-height:1.35; letter-spacing:-.04em; margin:12px 0; }
.story-wide p { font-size:16px; line-height:1.8; }
.story-wide--reverse { grid-template-columns:1fr 1.1fr; }
.story-wide--reverse img { order:2; }
.thumb-list { display:grid; gap:0; }
.thumb-row { display:grid; grid-template-columns:130px minmax(0,1fr); gap:22px; padding:24px 0; border-top:1px solid #d5dbd5; align-items:center; }
.thumb-row:first-child { padding-top:0; border-top:0; }
.thumb-row:last-child { padding-bottom:0; }
.thumb-row img { aspect-ratio:1; object-fit:cover; }
.thumb-row h3 { font-size:21px; letter-spacing:-.035em; line-height:1.4; margin:8px 0; }
.thumb-row p { font-size:16px; line-height:1.8; }
.thumb-row .kicker { font-size:14px; }
.photo-pair { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; align-items:end; }
.photo-pair img:first-child { aspect-ratio:.88; object-fit:cover; }
.photo-pair img:nth-of-type(2) { aspect-ratio:.67; object-fit:cover; }
.photo-pair figcaption { grid-column:1/-1; font-size:14px; line-height:1.7; opacity:.75; }
.culture .photo-pair { margin-bottom:28px; }
.work .thumb-row { border-color:#dce2ee; }
.work .thumb-row .kicker { color:#1e43e5; }

/* 04 여백: 책 표지를 닮은 자주색·크림색과 비대칭 사진. */
.reading { color:#452a3c; background:#e9e1df; }
.reading .sheet { background:#fbf7ef; }
.reading .edition { border-color:#d6c9cd; }
.reading .masthead { padding:36px 38px 30px; }
.reading .masthead .brand { font-size:76px; letter-spacing:-.1em; }
.reading .masthead p:not(.brand) { max-width:185px; text-align:left; }
.reading .reading-cover { display:grid; grid-template-columns:.9fr 1.1fr; padding:0 0 0 38px; gap:25px; align-items:center; }
.reading .reading-cover h1 { font-size:45px; line-height:1.23; letter-spacing:-.06em; margin:22px 0; }
.reading .reading-cover img { height:425px; object-fit:cover; object-position:58% center; }
.reading .reading-cover .cover-note { font-size:15px; line-height:1.8; }
.reading .intro { border-bottom:0; }
.reading .section { border-color:#d6c9cd; }
.reading .section-label { color:#7c4b6c; }
.reading .book-note { margin:0 38px 36px; padding:30px; background:#e8dde4; border-left:4px solid #77516e; }
.reading .book-note h2 { margin:12px 0; font-size:27px; letter-spacing:-.04em; }
.reading .book-note p { font-size:16px; line-height:1.85; }
.reading .reading-band { background:#593b50; color:#fbf7ef; padding:34px 38px; display:grid; grid-template-columns:55px 1fr; gap:20px; }
.reading .reading-band span { font-size:66px; line-height:1; color:#c9b2c1; }
.reading .reading-band p { font-size:23px; line-height:1.65; letter-spacing:-.03em; }
.reading .closing { background:#452a3c; }
.reading .closing p { color:#e5d7df; }
.reading .footer { color:#786470; }
.reading .footer b { color:#452a3c; }

/* 05 FORM & FIELD: 건축 도면의 선과 넓은 사진, 압축된 정보 위계. */
.architecture { color:#252d29; background:#dedfd7; }
.architecture .sheet { background:#f5f5ee; }
.architecture .edition { border-color:#aab1a5; }
.architecture .masthead { padding:30px 38px; align-items:center; }
.architecture .masthead .brand { font-size:47px; letter-spacing:-.065em; line-height:.95; }
.architecture .masthead p:not(.brand) { font-size:14px; text-align:right; }
.architecture .arch-cover { margin:0 20px; position:relative; }
.architecture .arch-cover img { aspect-ratio:1.14; object-fit:cover; }
.architecture .arch-title { background:#d9e2b7; margin:-64px 20px 0 38px; position:relative; padding:28px 30px; max-width:530px; }
.architecture .arch-title h1 { font-size:43px; line-height:1.22; letter-spacing:-.06em; margin:18px 0 0; }
.architecture .section { border-color:#aab1a5; }
.architecture .section-label { color:#535c42; }
.architecture .arch-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:26px; border-block:1px solid #aab1a5; }
.architecture .arch-index div { padding:20px 14px; border-right:1px solid #aab1a5; }
.architecture .arch-index div:first-child { padding-left:0; }
.architecture .arch-index div:last-child { border:0; }
.architecture .arch-index b { display:block; margin-bottom:8px; font-size:26px; font-weight:500; }
.architecture .arch-index span { font-size:14px; }
.architecture .detail-band { background:#e4e7dc; }
.architecture .detail-band img { aspect-ratio:2.1; object-fit:cover; object-position:40% 40%; margin-bottom:24px; }
.architecture .closing { background:#30392e; }
.architecture .closing p { color:#dbe1d3; }
.architecture .footer { color:#697160; }
.architecture .footer b { color:#252d29; }

/* 06 초록의 기록: 짙은 바탕의 사진 표지와 밝은 정보 카드. */
.green { color:#193e32; background:#dce8dd; }
.green .sheet { background:#f4f8ef; }
.green .edition { border:0; background:#123e2f; color:#dbefcf; }
.green .masthead { background:#123e2f; color:#f4f8ef; padding:30px 38px; }
.green .masthead .brand { font-size:44px; letter-spacing:-.06em; line-height:1.12; }
.green .masthead p:not(.brand) { color:#c2d9ba; }
.green .green-cover { position:relative; min-height:510px; display:flex; align-items:end; background:#123e2f; color:#fff; overflow:hidden; }
.green .green-cover img { position:absolute; inset:0; height:100%; object-fit:cover; }
.green .green-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#07261ee8 0%,#07261e20 65%); }
.green .green-cover-copy { position:relative; z-index:1; padding:38px; }
.green .green-cover h1 { font-size:51px; line-height:1.18; letter-spacing:-.06em; margin:20px 0 14px; }
.green .green-cover-copy>p:last-child { font-size:17px; color:#e0eada; line-height:1.8; }
.green .section { border-color:#c9d8c5; }
.green .green-tip { display:grid; grid-template-columns:60px 1fr; gap:20px; margin-bottom:14px; background:#e0ebd9; padding:25px; }
.green .green-tip:last-child { margin-bottom:0; }
.green .green-tip .num { font-size:37px; color:#3e6d43; }
.green .green-tip h3 { font-size:23px; line-height:1.35; letter-spacing:-.04em; margin:4px 0 12px; }
.green .green-tip p { font-size:16px; line-height:1.8; }
.green .closing { background:#123e2f; }
.green .closing p { color:#c2d9ba; }
.green .footer { color:#5e7659; }
.green .footer b { color:#193e32; }

@media(max-width:500px) {
    .story-grid { gap:24px 16px; }
    .story-grid h3 { font-size:20px; }
    .story-grid img { aspect-ratio:1.1; }
    .story-wide,.story-wide--reverse { grid-template-columns:1fr; gap:24px; }
    .story-wide img { aspect-ratio:1.4; }
    .story-wide--reverse img { order:0; }
    .thumb-row { grid-template-columns:94px minmax(0,1fr); gap:16px; align-items:start; }
    .thumb-row h3 { font-size:20px; }
    .thumb-row img { aspect-ratio:.8; }
    .photo-pair { gap:12px; }
    .reading .masthead { padding:28px 24px; }
    .reading .masthead .brand { font-size:64px; }
    .reading .masthead p:not(.brand) { max-width:155px; }
    .reading .reading-cover { padding-left:24px; grid-template-columns:.9fr 1fr; gap:16px; }
    .reading .reading-cover h1 { font-size:32px; margin:16px 0; }
    .reading .reading-cover img { height:350px; }
    .reading .reading-cover .cover-note { font-size:14px; }
    .reading .book-note { margin:0 24px 28px; padding:24px; }
    .reading .reading-band { padding:28px 24px; grid-template-columns:32px 1fr; gap:14px; }
    .reading .reading-band p { font-size:21px; }
    .architecture .masthead { padding:28px 24px; }
    .architecture .masthead .brand { font-size:38px; }
    .architecture .masthead p:not(.brand) { max-width:130px; }
    .architecture .arch-cover { margin:0 12px; }
    .architecture .arch-title { margin:-36px 12px 0 24px; padding:24px; }
    .architecture .arch-title h1 { font-size:33px; }
    .architecture .arch-index div { padding-inline:10px; }
    .green .masthead { padding:28px 24px; }
    .green .masthead .brand { font-size:34px; }
    .green .masthead p:not(.brand) { max-width:115px; font-size:14px; }
    .green .green-cover { min-height:465px; }
    .green .green-cover-copy { padding:28px 24px; }
    .green .green-cover h1 { font-size:40px; }
    .green .green-tip { padding:22px 20px; grid-template-columns:40px 1fr; gap:14px; }
}
@media(max-width:360px) { .story-grid { grid-template-columns:1fr; } .story-grid img { aspect-ratio:1.45; } }