/* 글꼴은 index.html 의 로 먼저 받는다 — 여기서 @import 하면 늦게 와서 글자가 한 번 튄다 (2026-10-18) */
:root {
--ivory: #F4F1EA; --ivory2: #F7F4ED; --dark-green: #0F4A35; --green2: #1C7A52;
--leaf: #19B46B; --leaf-deep: #0D7A47; --mint: #DDF2E3; --gold: #E3B04B;
--black: #141414; --gray: #4a4a4a; --line: rgba(15,74,53,0.2);
}
html { font-size: 17px; }
html.big { font-size: 20px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ivory); color: var(--black); font-family: 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1, h2, h3, .serif { font-family: 'Nanum Myeongjo', serif; font-weight: 700; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: var(--dark-green); text-underline-offset: 4px; }
[hidden] { display: none !important; }
/* ── 레이아웃 ── */
.layout { display: flex; min-height: 100vh; }
.hero { width: 45%; position: sticky; top: 0; height: 100vh; background: var(--dark-green) url('../img/hero.jpg?v=2') 50% center/cover; display: flex; flex-direction: column; justify-content: space-between; padding: 60px; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,74,53,0.9) 0%, rgba(15,74,53,0.3) 55%, rgba(0,0,0,0.35) 100%); }
.hero > * { position: relative; z-index: 1; color: var(--ivory); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wx-pill { font-size: 1rem; letter-spacing: 0.04em; font-weight: 300; white-space: pre; }
.ghost { background: none; border: 1px solid rgba(244,241,234,0.55); color: var(--ivory); padding: 8px 16px; font-size: 0.9rem; border-radius: 30px; }
.ghost:hover { background: rgba(244,241,234,0.12); }
.logo-wrap { position: relative; width: 100%; max-width: 270px; margin: 0 0 26px -10px; }
.logo-wrap img { width: 100%; display: block; }
.logo-kr { position: absolute; left: 54%; top: 71%; transform: translateX(-50%); font-family: 'Nanum Myeongjo', serif; font-size: 1.05rem; letter-spacing: 0.45em; margin-right: -0.45em; white-space: nowrap; }
.brand { font-family: 'Nanum Myeongjo', serif; font-size: 1.7rem; line-height: 1.5; margin: 6px 0 20px; font-weight: 400; color: #fff; }
.spot { display: inline-block; position: relative; font-size: 1.45em; font-weight: 700; margin: 0 0.02em; }
.spot::before { content: "●"; position: absolute; top: -0.45em; left: 50%; transform: translateX(-50%); color: var(--leaf); font-size: 10px; }
.hero-desc { font-size: 1.1rem; font-weight: 300; opacity: 0.92; line-height: 1.7; border-top: 1px dashed rgba(255,255,255,0.3); padding-top: 20px; margin: 0; }
/* 처음 온 사람이 '여기가 어디지' 하지 않게, 무엇인지부터 한 줄로 (운영자 2026-10-20) */
.hero-lede { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.32rem; font-weight: 700; line-height: 1.45; margin: 0 0 10px; color: #fff; opacity: 1; }
.hero-foot { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; font-size: 0.95rem; }
.when { opacity: 0.9; font-weight: 300; }
.btn { border: 0; border-radius: 30px; padding: 11px 22px; font-size: 0.95rem; font-weight: 500; background: var(--gold); color: var(--black); }
.btn.green { background: var(--leaf-deep); color: #fff; }
.btn.ivory { background: var(--ivory); color: var(--dark-green); }
.btn.line { background: none; border: 1px solid var(--line); color: var(--dark-green); }
.btn:disabled { opacity: 0.55; cursor: default; }
.streak { font-size: 0.95rem; opacity: 0.9; margin-left: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-actions .ghost { font-size: 0.95rem; padding: 9px 16px; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.user-chip b { font-weight: 500; }
.content { width: 55%; padding: 70px 80px 120px; background: var(--ivory2); }
.notice { background: var(--dark-green); color: var(--ivory); padding: 14px 20px; border-radius: 12px; margin-bottom: 40px; font-size: 1rem; display: flex; gap: 12px; align-items: baseline; }
.notice b { color: var(--gold); white-space: nowrap; font-weight: 500; }
.group { margin: 70px 0 0; display: flex; align-items: baseline; gap: 14px; }
.group:first-child { margin-top: 0; }
.group span { font-family: 'Nanum Myeongjo', serif; font-size: 1.05rem; color: var(--leaf-deep); letter-spacing: 0.2em; }
.group i { flex: 1; height: 1px; background: var(--line); }
.group small { color: #777; font-size: 0.9rem; }
.label { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; color: var(--dark-green); border-bottom: 2px solid var(--dark-green); padding-bottom: 14px; margin: 50px 0 28px; }
.label img { height: 30px; width: auto; }
.label .read { margin-left: auto; }
.read { background: none; border: 1px solid var(--line); color: var(--dark-green); padding: 6px 14px; border-radius: 30px; font-size: 0.9rem; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; }
.read[aria-pressed="true"] { background: var(--dark-green); color: var(--ivory); }
.note { font-size: 1.05rem; color: var(--gray); line-height: 1.7; margin: 12px 0 0; }
.lead { font-size: 1.15rem; line-height: 1.9; color: #333; margin: 0 0 16px; }
.lede { font-family: 'Nanum Myeongjo', serif; font-size: 1.5rem; margin: 0 0 24px; }
.say { font-family: 'Nanum Myeongjo', serif; font-size: 1.5rem; line-height: 1.7; color: var(--dark-green); margin: 30px 0 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--dark-green); text-decoration: underline; text-underline-offset: 4px; font-size: 1rem; }
/* 날씨 */
.wx-card { position: relative; border-radius: 12px; overflow: hidden; min-height: 220px; background: var(--dark-green) center/cover; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.wx-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,74,53,0.9) 0%, rgba(15,74,53,0.55) 55%, rgba(15,74,53,0.1) 100%); }
.wx-in { position: relative; z-index: 1; padding: 30px 34px; color: var(--ivory); }
.wx-temp { font-family: 'Nanum Myeongjo', serif; font-size: 3.8rem; line-height: 1; }
.wx-temp:empty { display: none; }
.wx-desc { font-size: 1.25rem; margin-left: 14px; }
.wx-sub { opacity: 0.9; font-size: 1rem; margin-top: 4px; }
.wx-say { font-family: 'Nanum Myeongjo', serif; font-size: 1.3rem; line-height: 1.7; margin: 18px 0 0; }
.wx-in .linkbtn { color: var(--ivory); margin-top: 12px; display: inline-block; }
/* 인사 카드 */
.cards { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.gcard { position: relative; flex: none; width: 220px; height: 290px; border: 0; border-radius: 12px; text-align: left; padding: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.gcard.t0 { background: var(--dark-green); } .gcard.t1 { background: var(--leaf-deep); } .gcard.t2 { background: var(--gold); }
.gcard q { position: absolute; top: 26px; left: 22px; right: 22px; quotes: none; color: var(--ivory); font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; line-height: 1.8; font-weight: 700; }
.gcard.t2 q { color: var(--black); }
.gcard img { position: absolute; right: 16px; bottom: 16px; width: 86px; }
.gcard .send { position: absolute; left: 22px; bottom: 20px; font-size: 0.9rem; color: var(--ivory); opacity: 0.9; }
.gcard.t2 .send { color: var(--black); }
/* 배너 */
.banner { display: block; width: 100%; border: 0; border-radius: 12px; overflow: hidden; position: relative; text-align: left; padding: 0; background: var(--dark-green); box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform .3s, box-shadow .3s; }
.banner:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.banner.photo { background-size: cover; background-position: center; height: 250px; }
.banner.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,74,53,0.92), rgba(15,74,53,0.05) 70%); }
.banner.solid { background: linear-gradient(135deg, var(--dark-green), var(--green2)); min-height: 150px; }
.banner.soon { background: #e9e5db; box-shadow: none; }
.banner.soon:hover { transform: none; }
.b-text { position: absolute; left: 30px; right: 30px; bottom: 26px; z-index: 1; color: var(--ivory); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.banner.solid .b-text, .banner.soon .b-text { position: static; padding: 30px; }
.banner.soon .b-text { color: #777; }
.b-text h3 { font-size: 1.8rem; margin: 0 0 6px; }
.banner.solid .b-text h3 { color: var(--gold); }
.b-text p { margin: 0; font-weight: 300; opacity: 0.95; }
.b-text span { font-family: 'Nanum Myeongjo', serif; white-space: nowrap; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.banner.soon .b-text span { color: #999; border-color: #bbb; }
.panel { display: none; padding: 30px 0 0; }
.banner.open + .panel { display: block; }
/* 선택 탭 */
.picks { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--line); }
.picks button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; margin-bottom: -1px; font-family: 'Nanum Myeongjo', serif; font-size: 1.1rem; color: #555; font-weight: 700; }
.picks button[aria-pressed="true"] { color: var(--dark-green); border-color: var(--gold); }
/* 퀴즈 */
.quiz-q { font-family: 'Nanum Myeongjo', serif; font-size: 1.35rem; line-height: 1.8; color: var(--dark-green); margin: 0 0 22px; }
.opts { display: grid; gap: 10px; }
.opts button { background: #fff; border: 1px solid rgba(20,20,20,0.15); border-radius: 10px; padding: 14px 18px; text-align: left; font-size: 1.1rem; }
.opts button[aria-pressed="true"] { border: 2px solid var(--dark-green); }
.opts button.ok { background: var(--leaf-deep); color: #fff; border-color: var(--leaf-deep); }
.opts button.no { opacity: 0.45; }
.quiz-foot { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quiz-exp { background: #fff; border-radius: 10px; padding: 18px 20px; margin-top: 18px; line-height: 1.8; }
/* 투표·댓글 */
.poll { display: grid; gap: 10px; }
.poll button { position: relative; background: #fff; border: 1px solid rgba(20,20,20,0.1); border-radius: 10px; padding: 16px 20px; text-align: left; overflow: hidden; font-size: 1.05rem; }
.poll button i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(25,180,107,0.22); }
.poll button > span { position: relative; display: flex; justify-content: space-between; }
.poll button[aria-pressed="true"] { border: 2px solid var(--leaf); }
.cmt-form { display: flex; gap: 10px; margin-top: 24px; }
.cmt-form input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(20,20,20,0.2); border-radius: 10px; background: #fff; }
.cmts { margin-top: 16px; display: grid; gap: 10px; }
.cmt { background: #fff; border-radius: 10px; padding: 12px 16px; display: flex; gap: 12px; align-items: baseline; }
.cmt b { color: var(--dark-green); font-weight: 500; white-space: nowrap; }
.cmt p { margin: 0; flex: 1; }
.cmt button { background: none; border: 0; color: #999; font-size: 0.85rem; }
/* 안쪽 화면 */
#detail { display: none; min-height: 100vh; background: var(--ivory); }
body.in-detail #detail { display: block; } body.in-detail #main { display: none; }
.top-nav { position: fixed; top: 0; left: 0; right: 0; padding: 20px 36px; display: flex; justify-content: space-between; align-items: center; z-index: 20; background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); }
.back { background: none; border: 0; color: #fff; font-size: 1.15rem; padding: 6px 0; }
.top-nav img { height: 54px; }
.d-hero { height: 52vh; position: relative; background-size: cover; background-position: center; }
.d-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 45%, var(--ivory) 100%); }
.d-title { position: absolute; bottom: 30px; left: 20px; right: 20px; text-align: center; z-index: 1; }
.tag { display: inline-block; font-family: 'Nanum Myeongjo', serif; font-size: 0.95rem; padding: 6px 18px; border: 1px solid var(--dark-green); color: var(--dark-green); border-radius: 20px; margin-bottom: 14px; background: rgba(244,241,234,0.85); }
.d-title h1 { font-size: 2.8rem; margin: 0; line-height: 1.3; }
.d-body { max-width: 760px; margin: 0 auto; padding: 40px 24px 120px; }
.dsec { display: none; } .dsec.on { display: block; }
.rows { margin-top: 24px; border-top: 1px solid var(--line); }
.row { display: flex; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(15,74,53,0.12); align-items: baseline; }
.row b { flex: none; width: 5.5em; font-family: 'Nanum Myeongjo', serif; color: var(--dark-green); }
.row p { margin: 0; line-height: 1.7; color: #333; flex: 1; }
.row span { color: #666; margin-left: 10px; font-size: 0.95rem; }
.row a { white-space: nowrap; }
.subhead { font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; color: var(--dark-green); margin: 40px 0 0; }
.memo { display: flex; gap: 12px; margin-top: 16px; }
.memo input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(20,20,20,0.2); background: #fff; border-radius: 10px; }
.mine { font-family: 'Nanum Myeongjo', serif; font-size: 1.2rem; margin: 16px 0 0; }
.ing { list-style: none; padding: 18px 0; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--dark-green); font-size: 1.05rem; }
.steps { padding-left: 1.3em; line-height: 2.1; font-size: 1.05rem; color: #333; }
.d-body .read { margin-bottom: 20px; }
/* 모달 */
.modal { position: fixed; inset: 0; background: rgba(20,20,20,0.55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--ivory); border-radius: 16px; width: 100%; max-width: 440px; max-height: 92vh; overflow: auto; padding: 28px 26px 26px; position: relative; }
.modal-box h2 { font-size: 1.5rem; margin: 0 0 10px; color: var(--dark-green); }
.modal-box .x { position: absolute; right: 14px; top: 10px; background: none; border: 0; font-size: 1.6rem; color: #777; }
.modal-box p { margin: 0 0 14px; line-height: 1.7; }
.field { margin: 14px 0; }
.field label { display: block; font-size: 0.95rem; color: var(--dark-green); margin-bottom: 6px; font-weight: 500; }
.field .in { display: flex; gap: 8px; }
.field .in .btn { white-space: nowrap; flex: none; }
.field input, .field select { width: 100%; padding: 12px 14px; border: 1px solid rgba(20,20,20,0.25); border-radius: 10px; background: #fff; font-size: 1.05rem; }
.field input:focus { outline: 2px solid var(--leaf); border-color: transparent; }
.field .hint { font-size: 0.9rem; color: #666; margin-top: 4px; }
.field .msg { font-size: 0.95rem; margin-top: 4px; }
.msg.ok { color: var(--leaf-deep); } .msg.err { color: #c0392b; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; margin: 12px 0; }
.chk input { width: 20px; height: 20px; margin-top: 3px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.modal-actions .btn { width: 100%; padding: 14px; font-size: 1.05rem; }
.divider { border-top: 1px solid var(--line); margin: 20px 0 14px; }
.err-box { background: #fdecea; color: #a93226; padding: 10px 14px; border-radius: 8px; font-size: 0.95rem; margin-top: 10px; }
.steps-ios { background: #fff; border-radius: 10px; padding: 14px 16px; line-height: 2; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.cal div { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.9rem; background: #fff; color: #999; }
.cal div.on { background: var(--leaf-deep); color: #fff; font-weight: 500; }
.cal div.h { background: none; color: var(--dark-green); font-weight: 500; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: var(--black); color: #fff; padding: 12px 22px; font-size: 0.95rem; z-index: 60; border-radius: 30px; max-width: 90vw; text-align: center; }
.foot { margin-top: 90px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.9rem; color: #777; line-height: 1.8; }
.foot a { margin-right: 14px; }
@media (max-width: 768px) {
.layout { flex-direction: column; }
.hero { width: 100%; height: auto; min-height: 78vh; position: relative; padding: 36px 22px; gap: 36px; }
.logo-wrap { max-width: 220px; } .brand { font-size: 1.4rem; } .hero-desc { font-size: 1rem; }
.content { width: 100%; padding: 40px 18px 100px; }
.label { font-size: 1.3rem; margin-top: 44px; }
.banner.photo { height: 200px; } .b-text { left: 20px; right: 20px; bottom: 20px; } .b-text h3 { font-size: 1.45rem; }
.top-nav { padding: 16px 18px; } .d-hero { height: 42vh; } .d-title h1 { font-size: 2.1rem; }
.row { gap: 14px; flex-wrap: wrap; }
.wx-temp { font-size: 3rem; }
}
/* ── 왼쪽 화면 시인성 (휴대폰 사진 위 글씨) ── */
.hero::after { background: linear-gradient(to top, rgba(10,45,32,0.96) 0%, rgba(10,45,32,0.72) 45%, rgba(10,45,32,0.35) 75%, rgba(0,0,0,0.45) 100%); }
.hero > * { text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.wx-pill { font-weight: 500; font-size: 1.1rem; }
.ghost { background: var(--ivory); color: var(--dark-green); border: 0; font-weight: 500; font-size: 1rem; padding: 10px 18px; text-shadow: none; }
.ghost:hover { background: #fff; }
.hero-desc { font-weight: 400; opacity: 1; font-size: 1.15rem; line-height: 1.75; border: 0; padding: 16px 18px; background: rgba(10,45,32,0.55); border-radius: 12px; border-left: 3px solid var(--gold); }
.hero-foot { font-size: 1.05rem; }
.when { opacity: 1; font-weight: 500; }
.streak { font-size: 1.05rem; opacity: 1; font-weight: 500; }
.btn { font-size: 1.05rem; padding: 13px 24px; text-shadow: none; }
.hero-actions { gap: 12px; margin-top: 22px; }
.hero-actions .ghost { font-size: 1.05rem; padding: 12px 20px; }
.user-chip b { font-size: 1.1rem; }
@media (max-width: 768px) {
.hero-desc { font-size: 1.1rem; }
.hero-foot > span:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; }
}
/* ── 시니어 가독성 개편: 고딕 통일, 묶음 띠, 묶음별 색 ── */
html { font-size: 18px; } html.big { font-size: 21px; }
h2, h3, .label, .b-text h3, .lede, .say, .wx-say, .gcard q, .subhead, .picks button, .tag, .quiz-q, .d-title h1, .modal-box h2, .mine, .wx-temp { font-family: 'Noto Sans KR', sans-serif; }
.group { display: block; margin: 64px 0 0; padding: 22px 26px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.group:first-child { margin-top: 0; }
.group span { display: block; font-family: 'Noto Sans KR', sans-serif; font-size: 1.9rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.group small { display: block; font-size: 1.05rem; margin-top: 6px; font-weight: 400; opacity: 0.95; }
.group i { display: none; }
.group.g1 { background: linear-gradient(135deg, #E3B04B, #F2CB6E); color: var(--black); }
.group.g1 small { color: #4a3a10; }
.group.g2 { background: linear-gradient(135deg, var(--dark-green), var(--green2)); color: var(--ivory); }
.group.g2 small { color: var(--ivory); }
.group.g3 { background: linear-gradient(135deg, #0D7A47, #19B46B); color: #fff; }
.group.g3 small { color: #fff; }
.label { font-size: 1.3rem; border-bottom-width: 1px; margin: 38px 0 18px; font-weight: 700; }
.label img { height: 26px; }
.b-text h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.35; }
.b-text p { font-size: 1rem; font-weight: 400; }
.b-text span { font-family: 'Noto Sans KR', sans-serif; font-weight: 500; }
.banner.soon .b-text h3 { font-size: 1.3rem; color: #555; }
.banner.soon .b-text { gap: 12px; }
/* 즐기기 묶음: 따뜻한 색 */
.banner.solid { background: linear-gradient(135deg, #B8862F, #E3B04B); }
.banner.solid .b-text h3 { color: #fff; } .banner.solid .b-text p { color: #fff; } .banner.solid .b-text span { color: #fff; border-color: #fff; }
.gcard.t1 { background: #B8862F; }
.hero-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-foot > span:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.streak { margin-left: 0; }
.hero-desc br { display: none; }
@media (max-width: 768px) {
.hero { background-position: 62% center; min-height: 0; }
.group { padding: 18px 20px; margin-top: 50px; }
.group span { font-size: 1.6rem; }
.label { font-size: 1.2rem; }
.b-text h3 { font-size: 1.35rem; }
.banner.photo { height: 190px; }
}
/* 묶음 띠 글자색, 사진 배너 글 흐름 */
.group span, .group small { color: inherit !important; }
.b-text h3 b { font-weight: inherit; }
.banner.photo { height: auto; min-height: 200px; }
.banner.photo .b-text { position: relative; padding: 120px 24px 24px; left: auto; right: auto; bottom: auto; flex-wrap: wrap; }
.banner.photo .b-text > div { flex: 1 1 200px; }
.banner.photo .b-text > span { flex: none; margin-left: auto; }
.banner.photo::after { background: linear-gradient(to top, rgba(10,45,32,0.95) 0%, rgba(10,45,32,0.75) 45%, rgba(10,45,32,0.05) 100%); }
.gcard { width: 250px; height: 300px; }
.gcard q { font-size: 1.1rem; line-height: 1.7; }
@media (max-width: 768px) { .banner.photo .b-text { padding: 100px 20px 20px; } .banner.photo { min-height: 190px; } }
body { word-break: keep-all; overflow-wrap: anywhere; }
.banner.soon .b-text { flex-wrap: wrap; }
/* ── 색 정리: 띠 세 개만 색, 나머지는 흰 바탕 ── */
.group.g1 { background: #D9542B; color: #fff; }
.group.g1 small { color: #fff; }
.group.g2 { background: #1F3A5F; color: #fff; }
.group.g2 small { color: #fff; }
.group.g3 { background: #0D7A47; color: #fff; }
.group.g3 small { color: #fff; }
.group span, .group small { color: #fff !important; }
.banner.solid { background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.banner.solid .b-text h3, .banner.solid .b-text p { color: var(--dark-green); }
.banner.solid .b-text span { color: var(--dark-green); border-color: var(--dark-green); }
.gcard.t0, .gcard.t1, .gcard.t2 { background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.gcard q, .gcard.t2 q { color: var(--dark-green); }
.gcard .send, .gcard.t2 .send { color: #666; }
.stamp, .btn { background: var(--ivory); color: var(--dark-green); }
.btn.green { background: var(--dark-green); color: var(--ivory); }
.b-text span { color: var(--ivory); border-color: var(--ivory); }
.banner.photo .b-text span { color: #fff; border-color: #fff; }
.cat-text span { color: var(--ivory); }
.wx-card::after { background: linear-gradient(to right, rgba(31,58,95,0.0) 0%, rgba(0,0,0,0.0) 100%), linear-gradient(to right, rgba(15,74,53,0.9) 0%, rgba(15,74,53,0.55) 55%, rgba(15,74,53,0.1) 100%); }
/* ── 세 묶음 탭 ── */
.tabs3 { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--ivory2); padding: 10px 0 14px; margin: 0 0 10px; }
.tabs3 button { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; line-height: 1.25; color: var(--dark-green); }
.tabs3 button b { display: block; font-size: 1.15rem; font-weight: 700; }
.tabs3 button small { display: block; font-size: 0.8rem; margin-top: 4px; color: #666; }
.tabs3 button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: var(--ivory); box-shadow: 0 4px 14px rgba(15,74,53,0.3); }
.tabs3 button[aria-pressed="true"] small { color: var(--ivory); opacity: 0.9; }
.tabsec { display: none; } .tabsec.on { display: block; }
.tabsec .label:first-child { margin-top: 14px; }
.content { padding-top: 24px; }
.group { display: none; }
@media (max-width: 768px) { .tabs3 { gap: 6px; } .tabs3 button { padding: 10px 4px; border-radius: 12px; } .tabs3 button b { font-size: 1rem; } .tabs3 button small { display: none; } }
@media (min-width: 769px) { .content { max-width: 900px; } .layout { justify-content: flex-start; } .hero { flex: none; } .content { flex: 1; } }
/* ── 왼쪽 화면: 초록 덮개 제거, 사진 밝게 ── */
.hero { background-color: #3a3a3a; }
.hero::after { background: linear-gradient(to top, rgba(20,20,20,0.78) 0%, rgba(20,20,20,0.45) 45%, rgba(20,20,20,0.10) 75%, rgba(20,20,20,0.25) 100%); }
.hero-desc { background: rgba(20,20,20,0.45); border-left-color: var(--leaf); }
.hero > * { text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.spot::before { color: var(--leaf); }
.ghost { background: rgba(255,255,255,0.92); }
#stamp { background: var(--leaf); color: #fff; } #stamp:disabled { background: rgba(255,255,255,0.9); color: var(--dark-green); opacity: 1; }
@media (max-width: 768px) { .hero::after { background: linear-gradient(to top, rgba(20,20,20,0.82) 0%, rgba(20,20,20,0.5) 50%, rgba(20,20,20,0.15) 80%, rgba(20,20,20,0.3) 100%); } }
/* ── 탭 세 개 각자 색 ── */
.tabs3 button[data-tab="g1"][aria-pressed="true"] { background: #D99A2B; border-color: #D99A2B; color: #fff; box-shadow: 0 4px 14px rgba(217,154,43,0.35); }
.tabs3 button[data-tab="g2"][aria-pressed="true"] { background: #1F3A5F; border-color: #1F3A5F; color: #fff; box-shadow: 0 4px 14px rgba(31,58,95,0.35); }
.tabs3 button[data-tab="g3"][aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; box-shadow: 0 4px 14px rgba(25,180,107,0.35); }
.tabs3 button[aria-pressed="true"] small { color: #fff; }
.tabsec[data-g="g1"] .label { border-bottom-color: #D99A2B; }
.tabsec[data-g="g2"] .label { border-bottom-color: #1F3A5F; }
.tabsec[data-g="g3"] .label { border-bottom-color: var(--leaf); }
/* ── 글자 크기 위계: 탭 > 코너 제목 > 배너 제목 > 설명 ── */
.label { font-size: 1.6rem; font-weight: 800; border-bottom-width: 3px; padding-bottom: 10px; margin: 40px 0 16px; }
.label img { display: none; }
.b-text h3, .banner.solid .b-text h3 { font-size: 1.2rem; font-weight: 700; }
.b-text p, .banner.solid .b-text p { font-size: 0.95rem; }
.b-text span { font-size: 0.95rem; }
.banner.soon .b-text h3 { font-size: 1.1rem; }
.gcard q { font-size: 1.05rem; }
.wx-temp { font-size: 3rem; } .wx-desc { font-size: 1.1rem; } .wx-say { font-size: 1.1rem; } .wx-sub { font-size: 0.95rem; }
.note { font-size: 0.95rem; }
@media (max-width: 768px) { .label { font-size: 1.4rem; } .b-text h3 { font-size: 1.15rem; } }
/* ── 시안: 탭을 간판처럼 크게, 코너 제목은 명조로 ── */
.tabs3 { gap: 10px; padding: 12px 0 18px; }
.tabs3 button { padding: 18px 8px; border-radius: 18px; border-width: 2px; }
.tabs3 button b { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; }
.tabs3 button small { display: block; font-size: 0.9rem; margin-top: 6px; }
.label { font-family: 'Nanum Myeongjo', serif; font-size: 1.35rem; font-weight: 700; border-bottom-width: 2px; }
.b-text h3, .banner.solid .b-text h3 { font-size: 1.1rem; }
@media (max-width: 768px) {
.tabs3 { gap: 6px; }
.tabs3 button { padding: 14px 4px; border-radius: 14px; }
.tabs3 button b { font-size: 1.25rem; }
.tabs3 button small { display: block; font-size: 0.75rem; margin-top: 4px; }
.label { font-size: 1.25rem; }
.b-text h3 { font-size: 1.05rem; }
}
/* ── 인사 카드: 사진 배경 ── */
.gcard.photo { background-size: cover; background-position: center; border: 0; }
.gcard.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,45,32,0.88), rgba(10,45,32,0.15) 60%); display: block; }
.gcard.photo q { top: auto; bottom: 58px; color: #fff; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.5); font-size: 1.1rem; }
.gcard.photo .send { color: #fff; opacity: 0.95; z-index: 1; bottom: 18px; }
.gcard.photo img { z-index: 1; width: 64px; opacity: 0.9; }
.hero-desc br { display: inline !important; }
.hero-desc { font-size: 1.15rem; line-height: 1.8; }
.gcard.photo img { top: 16px; right: 16px; bottom: auto; }
.when { display: block; line-height: 1.5; }
#lunar { display: block; font-size: 0.95em; opacity: 0.9; }
/* ── 탭: 연둣빛 초록 하나로 ── */
.tabs3 button[aria-pressed="true"], .tabs3 button[data-tab="g1"][aria-pressed="true"], .tabs3 button[data-tab="g2"][aria-pressed="true"], .tabs3 button[data-tab="g3"][aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; box-shadow: 0 6px 16px rgba(25,180,107,0.35); }
.tabsec .label, .tabsec[data-g="g1"] .label, .tabsec[data-g="g2"] .label, .tabsec[data-g="g3"] .label { border-bottom-color: var(--leaf); }
/* ── 배너 사진 밝게: 글씨 뒤만 살짝 어둡게 ── */
.banner.photo::after { background: linear-gradient(to top, rgba(20,20,20,0.75) 0%, rgba(20,20,20,0.35) 40%, rgba(20,20,20,0) 70%); }
.banner.photo .b-text { text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.banner.photo .b-text h3 { font-size: 1.25rem; }
.wx-card::after { background: linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.3) 55%, rgba(20,20,20,0) 100%); }
.wx-in { text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.gcard.photo::after { background: linear-gradient(to top, rgba(20,20,20,0.7), rgba(20,20,20,0) 60%); }
.d-hero::after { background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 45%, var(--ivory) 100%); }
.banner.photo::after { background: linear-gradient(to top, rgba(20,20,20,0.85) 0%, rgba(20,20,20,0.55) 35%, rgba(20,20,20,0.1) 65%, rgba(20,20,20,0) 100%); }
#fortune-banner { min-height: 300px; }
#fortune-banner .b-text { padding-top: 190px; }
@media (max-width: 768px) { #fortune-banner { min-height: 280px; } #fortune-banner .b-text { padding-top: 170px; } }
/* ── 코너 제목: 검정 + 잎사귀 ── */
.label { color: var(--black); border-bottom: 2px solid var(--black) !important; }
.label img { display: inline-block; height: 34px; width: auto; }
.read { color: var(--black); border-color: rgba(20,20,20,0.3); }
/* ── 인사 카드 손글씨체 ── */
.gcard.photo q { font-family: 'Gaegu', 'Noto Sans KR', sans-serif; font-size: 1.5rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.01em; }
/* ── 설치·알리기 버튼 강조 ── */
.ghost.go { background: var(--leaf); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(25,180,107,0.35); }
.ghost.go:hover { background: #15a060; }
/* ── 시안: 사각 버튼 ── */
.ghost, .btn, #stamp, .read, .picks button, .solid, .opts button, .poll button, .modal-actions .btn, .cmt-form input, .memo input, .field input, .field select { border-radius: 6px !important; }
.hero-actions { gap: 10px; }
.hero-actions .ghost { padding: 13px 20px; font-size: 1.05rem; }
.ghost.go { box-shadow: none; }
.tabs3 button { border-radius: 10px; }
.banner, .wx-card, .gcard, .banner.photo { border-radius: 10px; }
.gcard.photo q { font-size: 1.25rem; line-height: 1.5; bottom: 60px; top: auto; }
.gcard { width: 240px; height: 300px; }
/* ── 인사 카드: 흰 상자 + 짙은 초록 손글씨 ── */
.gcard.photo::after { background: linear-gradient(to top, rgba(20,20,20,0.35), rgba(20,20,20,0) 50%); }
.gcard.photo q { top: auto; bottom: 56px; left: 14px; right: 14px; background: rgba(255,255,255,0.88); color: var(--dark-green); padding: 14px 14px; border-radius: 6px; text-shadow: none; font-size: 1.2rem; line-height: 1.45; }
.gcard.photo .send { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.gcard { width: 250px; height: 320px; }
.gcard.photo q { font-size: 1.15rem; line-height: 1.5; padding: 12px 14px; }
/* ── 인사 카드: 상자 없이, 흰 굵은 글씨 + 그림자 ── */
.gcard.photo::after { background: linear-gradient(to top, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.25) 45%, rgba(20,20,20,0) 75%); }
.gcard.photo q { background: none; padding: 0; left: 20px; right: 20px; bottom: 58px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.55; text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.5); border-radius: 0; }
.gcard.photo::after { background: linear-gradient(to top, rgba(20,20,20,0.3) 0%, rgba(20,20,20,0) 45%); }
.gcard.photo q { text-shadow: 0 0 2px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.8), 0 2px 12px rgba(0,0,0,0.6); }
.gcard.photo .send { display: none; }
.gcard.photo q { bottom: 22px; }
.note.tip { display: inline-block; background: #FFF3C4; color: var(--black); padding: 10px 14px; border-radius: 6px; font-weight: 500; margin-top: 4px; }
/* ── 탭: 사진 배경 ── */
.tabs3 button { position: relative; overflow: hidden; background-size: cover; background-position: center; color: #fff; border: 0; min-height: 150px; padding: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 2px 10px rgba(0,0,0,0.5); }
.tabs3 button[data-tab="g1"] { background-image: url('../img/tab-today.jpg?v=2'); }
.tabs3 button[data-tab="g2"] { background-image: url('../img/tab-past.jpg'); }
.tabs3 button[data-tab="g3"] { background-image: url('../img/tab-future2.jpg'); }
.tabs3 button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,0.75) 0%, rgba(20,20,20,0.45) 55%, rgba(20,20,20,0.35) 100%); transition: background .2s; }
.tabs3 button b, .tabs3 button small { position: relative; z-index: 1; }
.tabs3 button b { font-size: 1.3rem; }
.tabs3 button small { color: #fff; opacity: 0.95; }
.tabs3 button[aria-pressed="true"], .tabs3 button[data-tab="g1"][aria-pressed="true"], .tabs3 button[data-tab="g2"][aria-pressed="true"], .tabs3 button[data-tab="g3"][aria-pressed="true"] { background-color: transparent; box-shadow: 0 0 0 4px var(--leaf), 0 6px 18px rgba(0,0,0,0.25); }
.tabs3 button[aria-pressed="true"]::before { background: linear-gradient(to top, rgba(20,20,20,0.7) 0%, rgba(20,20,20,0.15) 60%, rgba(20,20,20,0.05) 100%); }
.tabs3 button[aria-pressed="false"] { filter: saturate(0.6) brightness(0.85); }
.tabs3 button b { display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 0 6px 44px; }
.tabs3 button small { position: absolute; left: 0; right: 0; bottom: 14px; }
@media (max-width: 768px) { .tabs3 button { min-height: 130px; } .tabs3 button b { font-size: 1.1rem; padding-bottom: 38px; } .tabs3 button small { font-size: 0.72rem; bottom: 12px; } }
.tabs3 button[data-tab="g1"][aria-pressed="true"] { background-image: url('../img/tab-today.jpg?v=2') !important; }
.tabs3 button[data-tab="g2"][aria-pressed="true"] { background-image: url('../img/tab-past.jpg') !important; }
.tabs3 button[data-tab="g3"][aria-pressed="true"] { background-image: url('../img/tab-future2.jpg') !important; }
.tabs3 button[aria-pressed="true"] { background-color: #333 !important; }
.tabs3 button[aria-pressed="true"] { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
/* ── 탭: 테두리 없이, 선택되면 살짝 커지고 나머지는 살짝 작아짐 ── */
.tabs3 { align-items: center; padding: 14px 0 18px; }
.tabs3 button { transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; transform: scale(0.94); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.tabs3 button[aria-pressed="true"], .tabs3 button[data-tab="g1"][aria-pressed="true"], .tabs3 button[data-tab="g2"][aria-pressed="true"], .tabs3 button[data-tab="g3"][aria-pressed="true"] { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,0.28); z-index: 1; }
.tabs3 button[aria-pressed="false"] { filter: saturate(0.7) brightness(0.8); }
.tabs3 { padding: 18px 0 22px; }
.tabs3 button { transform: scale(0.9); }
.tabs3 button[aria-pressed="true"], .tabs3 button[data-tab="g1"][aria-pressed="true"], .tabs3 button[data-tab="g2"][aria-pressed="true"], .tabs3 button[data-tab="g3"][aria-pressed="true"] { transform: scale(1.14); }
.tabs3 button[aria-pressed="true"]::before { background: linear-gradient(to top, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.1) 55%, rgba(20,20,20,0) 100%); }
.tabs3 { padding: 18px 8px 22px; }
/* ── 휴대폰용 세로 메인 사진 ── */
@media (max-width: 768px) {
.hero { background-image: url('../img/hero-mobile.jpg?v=2'); background-position: center top; min-height: 100vh; justify-content: flex-end; }
.hero::after { background: linear-gradient(to top, rgba(20,20,20,0.85) 0%, rgba(20,20,20,0.55) 40%, rgba(20,20,20,0.15) 65%, rgba(20,20,20,0.3) 100%); }
}
@media (max-width: 768px) {
.hero { min-height: 118vh; padding: 28px 20px 28px; gap: 0; background-size: cover; background-position: center 30%; }
.hero::after { background: linear-gradient(to top, rgba(20,20,20,0.8) 0%, rgba(20,20,20,0.35) 30%, rgba(20,20,20,0.05) 55%, rgba(20,20,20,0.25) 100%); }
.logo-wrap { max-width: 190px; margin-bottom: 14px; }
.brand { font-size: 1.3rem; margin: 0 0 12px; }
.hero-desc { font-size: 1rem; line-height: 1.6; padding: 10px 14px; background: rgba(20,20,20,0.35); }
.hero-foot { margin-top: 14px; font-size: 0.95rem; }
.hero-actions { margin-top: 12px; gap: 8px; }
.hero-actions .ghost { padding: 11px 16px; font-size: 1rem; }
}
@media (max-width: 768px) {
.hero { justify-content: space-between; min-height: 112vh; background-position: center 20%; }
.hero > div:last-child { margin-top: auto; }
.logo-wrap { max-width: 200px; }
.hero::after { background: linear-gradient(to top, rgba(20,20,20,0.85) 0%, rgba(20,20,20,0.5) 28%, rgba(20,20,20,0.1) 50%, rgba(20,20,20,0.2) 100%); }
}
/* 휴대폰 첫 화면: 글은 위 책장에, 단추는 왼쪽 아래 — 두 사람 다 보이게 */
@media (max-width: 768px) {
.hero { min-height: 128vh; justify-content: flex-start; background-position: center 40%; padding-top: 18px; }
.hero > div:last-child { display: flex; flex-direction: column; flex: 1; margin-top: 0; }
.hero-top { margin-bottom: 10px; }
.logo-wrap { max-width: 170px; margin-bottom: 4px; }
.brand { font-size: 1.25rem; }
.hero-desc { font-size: 0.98rem; background: none; padding: 0; border: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.hero-foot { margin-top: auto; }
.hero-actions { width: 58%; }
.hero-actions .ghost { width: 100%; padding: 12px 10px; font-size: 1rem; }
.hero::after { background: linear-gradient(to bottom, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.35) 30%, rgba(20,20,20,0.05) 50%, rgba(20,20,20,0.05) 75%, rgba(20,20,20,0.45) 100%); }
}
/* 로그인 뒤 첫 화면: 이름은 서명처럼, 메뉴는 글자로 */
.user-chip { display: block; width: 100%; margin-bottom: 4px; }
.user-chip b { display: block; font-family: 'Nanum Myeongjo', serif; font-weight: 700; font-size: 1.35rem; line-height: 1.3; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.7); letter-spacing: 0.01em; margin-bottom: 6px; }
.chip-links { display: flex; gap: 10px; align-items: center; font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.chip-links button, .chip-links a { background: none; border: 0; padding: 0; color: rgba(255,255,255,0.9); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,0.5); text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.chip-links a[hidden] { display: none; }
.chip-links a:not([hidden])::before { content: '·'; margin-right: 10px; text-decoration: none; display: inline-block; }
#login-btn { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(4px); }
#login-btn:hover { background: rgba(255,255,255,0.25); }
.ghost.go.kakao { background: #F9E9A8; color: #3A2E00; }
.ghost.go.kakao:hover { background: #F5DF86; }
.hero { padding-top: max(18px, env(safe-area-inset-top)); }
@media (max-width: 768px) {
.hero { padding-top: max(22px, env(safe-area-inset-top)); }
.user-chip { width: 100%; }
.hero-actions { width: 60%; }
}
.chip-links { white-space: nowrap; }
.chip-links button, .chip-links a { white-space: nowrap; }
@media (max-width: 768px) {
.hero-actions { width: 100%; }
.hero-actions .ghost { width: 60%; }
.user-chip b { font-size: 1.3rem; }
}
@media (max-width: 768px) { .hero > div:last-child { padding-top: 7vh; } .hero::after { background: linear-gradient(to bottom, rgba(20,20,20,0.45) 0%, rgba(20,20,20,0.45) 22%, rgba(20,20,20,0.35) 42%, rgba(20,20,20,0.05) 55%, rgba(20,20,20,0.05) 75%, rgba(20,20,20,0.45) 100%); } }
/* 날씨 줄: 메인 카피와 같은 명조, 날씨 그림 */
.hero-top { justify-content: flex-start; }
.wx-pill { display: inline-flex; align-items: center; gap: 10px; font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.6); white-space: pre; }
.wx-pill .wx-ic { flex: 0 0 auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }
/* 첫 화면 날씨 줄 제거, 로고 묶음 한 칸 위로 */
.hero-top { display: none; }
@media (max-width: 768px) { .hero > div:last-child { padding-top: calc(7vh + 18px); } .brand { margin-bottom: 30px; } }
/* 휴대폰 주소창이 숨을 때 첫 화면이 늘었다 줄었다 하는 것 방지: 큰 화면 기준으로 고정 */
@media (max-width: 768px) {
@supports (height: 100lvh) {
.hero { min-height: 128lvh; }
.hero > div:last-child { padding-top: calc(7lvh + 18px); }
}
}
/* 위로 당겨서 새로고침 끄기 (실수 방지) */
html, body { overscroll-behavior-y: none; }
/* 스크롤 부드럽게: 흐림 효과·색 필터 제거 (휴대폰에서 무거움) */
#login-btn { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.18); }
.tabs3 button[aria-pressed="false"] { filter: none; opacity: 0.72; }
.tabs3 button { will-change: transform; backface-visibility: hidden; }
/* 세 묶음 탭 → 네 칸(2×2), 크게 */
.tabs3 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0 14px; }
.tabs3 button { aspect-ratio: 1.45 / 1; height: auto; min-height: 0; transform: none !important; }
.tabs3 button[aria-pressed="true"] { transform: none !important; opacity: 1; outline: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.tabs3 button[aria-pressed="false"] { opacity: 0.72; }
.tabs3 button[data-tab="g4"] { background-image: url('../img/tab-note.jpg') !important; background-size: cover !important; background-position: center 60% !important; }
.tabs3 button b { font-size: 1.5rem; }
.tabs3 button small { font-size: 1rem; }
@media (max-width: 768px) {
.tabs3 { gap: 10px; }
.tabs3 button b { font-size: 1.35rem; }
.tabs3 button small { font-size: 0.95rem; }
}
/* 내려가면 네 칸이 한 줄로 작아져서 따라온다 */
.tabs3.compact { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 0 10px; }
.tabs3.compact button { aspect-ratio: auto; height: 54px; min-height: 54px; box-shadow: none; }
.tabs3.compact button small { display: none; }
.tabs3.compact button b { font-size: 0.98rem; line-height: 1.2; }
.tabs3.compact button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px #fff; }
.tabs3 button[aria-pressed="true"] { opacity: 1; }
.tabs3 button[aria-pressed="true"] b { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.tabs3.compact button { min-height: 54px !important; height: 54px; }
.tabs3.compact button b { padding: 0 4px; align-items: center; height: 100%; white-space: nowrap; font-size: 0.95rem; text-decoration: none; }
.tabs3.compact button[aria-pressed="true"] b { text-decoration: underline; text-underline-offset: 5px; }
.tabs3.compact button::before { background: rgba(20,20,20,0.55); }
.tabs3 button b { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 6px 34px; text-align: center; line-height: 1.25; }
.tabs3 button[data-tab="g4"][aria-pressed="true"] { background-image: url('../img/tab-note.jpg') !important; }
@media (max-width: 768px) { .tabs3:not(.compact) button { min-height: 0; } .tabs3:not(.compact) button b { padding-bottom: 36px; } .tabs3:not(.compact) button small { font-size: 0.95rem; bottom: 12px; } .tabs3.compact button b { font-size: 0.92rem; } }
.tabs3.compact button b { white-space: normal; font-size: 0.88rem; line-height: 1.15; padding: 0 2px; }
.tabs3.compact button { height: 58px; min-height: 58px !important; }
@media (max-width: 768px) { .tabs3.compact button b { font-size: 0.84rem; } }
/* 네 칸 위 잡지식 제목: 오늘의 목차 */
.toc { display: flex; align-items: flex-end; justify-content: space-between; margin: 26px 0 0; padding: 0 2px 10px; border-bottom: 1px solid rgba(20,20,20,0.75); }
.toc-l { display: inline-flex; align-items: center; gap: 10px; font-family: 'Nanum Myeongjo', serif; font-weight: 700; font-size: 1.35rem; color: #141414; }
.toc-l img { width: 34px; }
.toc-r { font-family: 'Nanum Myeongjo', serif; font-size: 1rem; color: #555; letter-spacing: 0.02em; padding-bottom: 3px; }
.tabs3:not(.compact) { padding-top: 16px; }
/* 고른 칸은 살짝 커지고 나머지는 살짝 작아짐 */
.tabs3:not(.compact) button { transform: scale(0.96) !important; transition: transform .25s ease, opacity .25s ease; }
.tabs3:not(.compact) button[aria-pressed="true"] { transform: scale(1.05) !important; z-index: 1; box-shadow: 0 8px 22px rgba(0,0,0,0.28); }
.tabs3:not(.compact) { gap: 14px; }
.tabs3:not(.compact) button[aria-pressed="true"] b { text-decoration: none; }
@media (max-width: 768px) { .toc { margin-top: 18px; } .toc-l { font-size: 1.25rem; } .toc-r { font-size: 0.95rem; } }
.toc-l em { font-style: normal; font-family: 'Nanum Myeongjo', Georgia, serif; font-weight: 700; font-size: 1.45rem; letter-spacing: 0.22em; color: #141414; }
/* 목차 제목 다듬기 */
.toc-l em { letter-spacing: 0.06em; font-size: 1.4rem; }
.toc-r { font-size: 0.85rem; color: #777; font-family: 'Noto Sans KR', sans-serif; }
.toc { border-bottom: 1px solid rgba(20,20,20,0.22); padding-bottom: 8px; }
/* 네 칸과 아래 코너 사이 구분선 */
.tabs3 { margin-bottom: 0; padding-bottom: 18px; }
.tabsec { border-top: 1px solid rgba(20,20,20,0.22); padding-top: 6px; }
/* 네 칸 글자 크기 통일: 고른 칸도 글자는 같은 크기, 테두리 빛으로만 강조 */
.tabs3:not(.compact) button { transform: none !important; }
.tabs3:not(.compact) button[aria-pressed="true"] { transform: none !important; box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(0,0,0,0.28); }
.tabs3 button b, .tabs3 button[aria-pressed="true"] b { font-size: 1.35rem !important; font-weight: 700; }
.tabs3 button small, .tabs3 button[aria-pressed="true"] small { font-size: 0.95rem !important; }
.tabs3.compact button b { font-size: 0.84rem !important; }
/* 큰 네 칸은 제자리에, 따라오는 메뉴는 별도의 띠 */
.tabs3 { position: static; }
.tabs3.compact { display: grid; grid-template-columns: 1fr 1fr; }
.tabs-mini { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 12px; background: rgba(244,241,234,0.97); border-bottom: 1px solid rgba(20,20,20,0.15); transform: translateY(-110%); transition: transform .2s ease; padding-top: max(8px, env(safe-area-inset-top)); }
.tabs-mini.show { transform: translateY(0); }
.tabs-mini button { background: #fff; border: 1px solid rgba(20,20,20,0.15); border-radius: 6px; padding: 10px 2px; font-size: 0.92rem; font-weight: 700; color: #333; line-height: 1.2; }
.tabs-mini button[aria-pressed="true"] { background: var(--dark-green); color: #fff; border-color: var(--dark-green); }
@media (min-width: 769px) { .tabs-mini { left: 45%; } }
/* 따라오는 띠: 네 칸의 사진 미니판 */
.tabs-mini { gap: 8px; padding: 8px 12px 8px; background: var(--ivory2); border-bottom: 1px solid rgba(20,20,20,0.12); }
.tabs-mini button { position: relative; overflow: hidden; height: 56px; border: 0; border-radius: 8px; color: #fff; font-weight: 700; font-size: 0.86rem; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,0.7); background-size: cover; background-position: center; opacity: 0.72; padding: 0 2px; }
.tabs-mini button::before { content: ''; position: absolute; inset: 0; background: rgba(20,20,20,0.45); }
.tabs-mini button span { position: relative; z-index: 1; }
.tabs-mini button[data-tab="g1"] { background-image: url('../img/tab-today.jpg?v=2'); }
.tabs-mini button[data-tab="g2"] { background-image: url('../img/tab-past.jpg'); }
.tabs-mini button[data-tab="g3"] { background-image: url('../img/tab-future2.jpg'); }
.tabs-mini button[data-tab="g4"] { background-image: url('../img/tab-note.jpg'); background-position: center 60%; }
.tabs-mini button[aria-pressed="true"] { opacity: 1; background-color: transparent; box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0,0,0,0.25); }
.tabs-mini button[aria-pressed="true"]::before { background: rgba(20,20,20,0.3); }
.tabs-mini button[aria-pressed="true"] span { text-decoration: underline; text-underline-offset: 4px; }
/* 크기 균형: 네 칸 ↑, 날씨·인사 카드 ↓ */
@media (max-width: 768px) {
.tabs3:not(.compact) button { aspect-ratio: 1.2 / 1; }
.tabs3:not(.compact) { gap: 12px; }
.wx-card { min-height: 0; }
.wx-in { padding: 18px 20px 16px; }
.wx-temp { font-size: 2.4rem; }
.wx-desc { font-size: 1rem; }
.wx-sub { font-size: 0.9rem; margin-top: 2px; }
.wx-say { font-size: 1rem; line-height: 1.6; margin: 8px 0 0; }
.wx-in .linkbtn { margin-top: 8px; font-size: 0.95rem; }
.gcard { width: 200px; height: 240px; }
.gcard.photo q { font-size: 1.05rem; line-height: 1.5; bottom: 16px; left: 14px; right: 14px; }
.note.tip { font-size: 0.95rem; padding: 10px 14px; }
}
@media (max-width: 768px) {
.wx-in { padding: 14px 18px 14px; }
.wx-temp { font-size: 2.2rem; }
.wx-sub { display: inline; margin-left: 8px; }
.wx-say { font-size: 0.98rem; margin-top: 6px; }
.wx-in .linkbtn { margin-top: 4px; }
.gcard { width: 184px; height: 220px; }
.gcard.photo q { font-size: 1.02rem; }
}
@media (max-width: 768px) {
.wx-sub { display: block; margin-left: 0; }
.gcard { width: 200px; height: 236px; }
.gcard.photo q { font-size: 1.05rem; }
}
/* Contents는 코너 제목보다 크게, 날짜는 바로 옆에 작게 */
.toc { justify-content: flex-start; align-items: baseline; gap: 14px; }
.toc-l em { font-size: 1.75rem; letter-spacing: 0.05em; }
.toc-l img { width: 40px; align-self: center; }
.toc-r { font-size: 0.9rem; color: #8a8a8a; letter-spacing: 0.06em; padding-bottom: 0; }
@media (max-width: 768px) { .toc-l em { font-size: 1.65rem; } .toc-r { font-size: 0.88rem; } }
.toc { justify-content: space-between; align-items: baseline; }
.toc-r { font-size: 0.85rem; color: #8a8a8a; letter-spacing: 0.02em; }
/* 고른 칸: 3% 앞으로 나오고 사진이 살짝 당겨진다 */
.tabs3:not(.compact) button { transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease; }
.tabs3:not(.compact) button[aria-pressed="true"] { transform: scale(1.03) !important; z-index: 1; }
.tabs3:not(.compact) button[aria-pressed="true"] { background-size: 108% auto !important; }
.tabs3:not(.compact) button[aria-pressed="true"] { transform: scale(1.06) !important; }
/* 오늘의 시세 */
.mk-card { background: #fff; border-radius: 10px; padding: 6px 18px 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.mk-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.mk-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(20,20,20,0.08); }
.mk-item:nth-last-child(-n+2) { border-bottom: 0; }
.mk-l { font-size: 0.95rem; color: #555; grid-column: 1 / -1; }
.mk-v { font-family: 'Nanum Myeongjo', serif; font-size: 1.3rem; font-weight: 700; color: #141414; letter-spacing: -0.01em; }
.mk-c { font-size: 0.85rem; color: #777; justify-self: end; }
.mk-c.up { color: #B5533C; } .mk-c.down { color: #2F6B9A; }
.mk-foot { margin: 8px 0 0; font-size: 0.82rem; color: #888; }
@media (max-width: 768px) { .mk-grid { column-gap: 16px; } .mk-v { font-size: 1.2rem; } .mk-item { padding: 10px 0; } }
/* 시세: 한 줄에 하나씩 (큰 숫자가 안 깨지게) */
.mk-grid { grid-template-columns: 1fr; column-gap: 0; }
.mk-item { grid-template-columns: 1fr auto auto; column-gap: 12px; align-items: baseline; padding: 10px 0; }
.mk-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(20,20,20,0.08); }
.mk-item:last-child { border-bottom: 0; }
.mk-l { grid-column: auto; font-size: 1rem; color: #444; }
.mk-v { font-size: 1.25rem; justify-self: end; white-space: nowrap; }
.mk-c { min-width: 68px; text-align: right; font-size: 0.85rem; }
.mk-item:not(:has(.mk-c)) .mk-v { grid-column: 2 / 4; }
/* 오늘의 이슈 — 분야·출처를 눈썹줄로 올리고 한 문장은 통째로 한 줄 차지(큰 글씨에서도 안 눌린다) */
.is-card { background: #fff; border-radius: 10px; padding: 4px 18px 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.is-list { list-style: none; margin: 0; padding: 0; }
.is-item { border-bottom: 1px solid rgba(20,20,20,0.08); }
.is-item:last-child { border-bottom: 0; }
.is-item a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 13px 0; text-decoration: none; color: inherit; }
.is-cat { order: 1; font-family: 'Nanum Myeongjo', serif; font-size: 0.85rem; letter-spacing: 0.08em; color: #A8873A; white-space: nowrap; }
.is-src { order: 2; font-size: 0.8rem; color: #9a9a9a; min-width: 0; }
.is-src:not(:empty)::before { content: '·'; margin-right: 8px; color: #C9A24A; }
.is-line { order: 3; flex: 1 0 100%; min-width: 0; margin-top: 4px; font-family: 'Nanum Myeongjo', serif; font-size: 1.12rem; line-height: 1.55; color: #141414; }
.is-item a:active .is-line { opacity: 0.55; }
.is-foot { margin: 10px 0 0; font-size: 0.82rem; color: #888; line-height: 1.6; }
/* 나의 수첩 */
.nb-gate { background: #fff; border-radius: 10px; padding: 26px 22px; text-align: center; margin-top: 16px; }
.nb-gate p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; color: #333; }
.nb-card { background: #fff; border-radius: 10px; padding: 16px 16px 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.nb-actions { display: flex; gap: 10px; align-items: stretch; }
.nb-mic { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--dark-green); color: #fff; border: 0; border-radius: 8px; padding: 16px 14px; font-size: 1.15rem; font-weight: 700; }
.nb-hand { flex: 0 0 auto; background: #fff; border: 1px solid rgba(20,20,20,0.25); border-radius: 8px; padding: 0 16px; font-size: 1rem; color: #333; }
.mic { display: inline-block; width: 18px; height: 18px; border-radius: 9px 9px 7px 7px; background: #fff; position: relative; }
.mic::after { content: ''; position: absolute; left: -5px; right: -5px; bottom: -8px; height: 10px; border: 2px solid #fff; border-top: 0; border-radius: 0 0 12px 12px; }
.mic.big { width: 44px; height: 54px; background: var(--dark-green); border-radius: 22px 22px 18px 18px; animation: nbpulse 1.2s ease-in-out infinite; }
.mic.big::after { left: -12px; right: -12px; bottom: -16px; height: 22px; border-color: var(--dark-green); border-width: 4px; }
.nb-listen { display: flex; justify-content: center; padding: 26px 0 36px; }
@keyframes nbpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.75; } }
.nb-hint { margin: 10px 2px 0; font-size: 0.92rem; color: #777; }
.nb-list { margin-top: 10px; }
.nb-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid rgba(20,20,20,0.08); padding: 12px 4px; cursor: pointer; }
.nb-item .nb-when { display: block; font-size: 0.88rem; color: #2f6b4f; margin-bottom: 3px; }
.nb-item .nb-txt { display: block; font-size: 1.08rem; color: #141414; line-height: 1.5; white-space: pre-wrap; }
.nb-item.today .nb-when { color: #B5533C; font-weight: 700; }
.nb-item.past { opacity: 0.55; }
.nb-sub { margin: 14px 4px 0; font-size: 0.88rem; color: #888; }
.nb-empty { margin: 14px 4px 8px; color: #888; font-size: 0.98rem; }
.nb-row { display: flex; gap: 12px; } .nb-row .field { flex: 1; }
.nb-check { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 4px 0 8px; }
.nb-check input { width: 22px; height: 22px; }
.modal-box textarea { width: 100%; font-size: 1.1rem; padding: 12px; border: 1px solid rgba(20,20,20,0.25); border-radius: 6px; font-family: inherit; line-height: 1.5; }
.btn.danger { color: #8a2a22; border-color: #c99; }
.today-line { display: block; font-size: 1rem; color: #fff; background: rgba(20,20,20,0.35); border-left: 3px solid #F9E9A8; padding: 6px 10px; margin: 2px 0 8px; border-radius: 0 6px 6px 0; }
.mic, .mic::after { display: none; }
.mic-ic { flex: 0 0 auto; }
.mic-big { display: inline-flex; width: 96px; height: 96px; border-radius: 50%; background: var(--dark-green); color: #fff; align-items: center; justify-content: center; animation: nbpulse 1.2s ease-in-out infinite; }
.today-line { margin: 4px 0 10px; }
/* 따라하기 */
.fl-list { display: grid; gap: 22px; margin-top: 26px; }
.fl-item { background: #fff; border-radius: 10px; padding: 16px 16px 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.fl-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fl-head b { font-family: 'Nanum Myeongjo', serif; font-size: 1.3rem; color: #141414; }
.fl-head span { color: #555; font-size: 1rem; }
.fl-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.fl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fl-cap { font-size: 0.9rem; color: #777; margin: 8px 0 10px; }
.fl-go { display: block; text-align: center; text-decoration: none; margin-top: 8px; }
/* 회화 */
.ph-card { background: #fff; border-radius: 10px; padding: 18px 18px 16px; margin-top: 18px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.ph-lang { font-size: 0.9rem; color: #2f6b4f; font-weight: 700; letter-spacing: 0.04em; }
.ph-text { font-family: 'Nanum Myeongjo', Georgia, serif; font-size: 1.5rem; line-height: 1.5; color: #141414; margin: 8px 0 4px; font-weight: 700; }
.ph-read { font-size: 1.1rem; color: #444; margin: 0 0 6px; }
.ph-mean { font-size: 1.05rem; color: #333; margin: 0; }
.ph-tip { font-size: 0.95rem; color: #777; margin: 8px 0 0; }
.ph-actions { display: flex; gap: 10px; margin-top: 14px; }
.ph-actions .btn { flex: 1; }
/* 나들이 */
.ot-row { position: relative; }
.ot-kind { display: inline-block; font-size: 0.82rem; color: #2f6b4f; border: 1px solid rgba(47,107,79,0.4); border-radius: 4px; padding: 1px 8px; margin-bottom: 6px; }
/* 나들이 소제목도 같은 결로 — 한 장 안에서 여행·나들이·무엇을 볼까가 따로 놀지 않게 (2026-10-20) */
.ot-row b { display: inline; font-family: 'Nanum Myeongjo', serif; font-size: 1.25rem; line-height: 1.6; color: #1D1B16;
background: linear-gradient(transparent 62%, #F6E6A8 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ot-meta { color: #666; font-size: 0.95rem; margin: 2px 0 6px; }
#outing-tabs { margin-top: 20px; gap: 0 18px; }
#outing-tabs button { font-size: 1rem; padding: 8px 0; }
body.in-detail .tabs-mini { display: none; }
.ot-row { display: block; }
.ot-row p { margin: 0 0 4px; }
.ot-row .linkbtn { display: inline-block; margin-top: 6px; }
/* 시세 카드: 신문 사진 띠 */
.mk-card { background: #fff url('../img/market.jpg') center 30% / cover no-repeat; position: relative; overflow: hidden; }
.mk-card::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.86); }
.mk-card > * { position: relative; }
/* ── 큰 글자 설정 휴대폰 대응: 칸이 글자를 따라 늘어나게 ── */
.banner.photo { height: auto; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.banner.photo .b-text { position: static; padding: 150px 22px 22px; margin: 0; flex-wrap: wrap; row-gap: 10px; }
#fortune-banner .b-text { padding-top: 170px; }
.b-text > div { min-width: 0; flex: 1 1 200px; }
.b-text h3, .b-text p { overflow-wrap: anywhere; }
.tabs3:not(.compact) button { aspect-ratio: auto; min-height: 150px; height: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 14px 8px 12px; }
.tabs3:not(.compact) button b { position: static; height: auto; padding: 0 0 8px; display: block; text-align: center; }
.tabs3:not(.compact) button small { position: static; display: block; text-align: center; }
.tabs-mini button { height: auto; min-height: 56px; padding: 8px 2px; }
.label { flex-wrap: wrap; row-gap: 6px; }
.gcard { height: auto; min-height: 236px; }
.gcard.photo q { position: static; display: block; padding: 150px 14px 16px; }
/* ── 시세: 두 칸으로 촘촘하게 ── */
.mk-card { padding: 4px 14px 8px; }
.mk-grid { grid-template-columns: 1fr 1fr; column-gap: 14px; }
.mk-item { grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(20,20,20,0.08); }
.mk-item:last-child, .mk-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(20,20,20,0.08); }
.mk-item:nth-last-child(-n+2):not(:nth-child(-n+2)) { border-bottom: 0; }
.mk-l { grid-column: 1 / -1; font-size: 0.82rem; color: #666; margin-bottom: 1px; }
.mk-v { font-size: 1.05rem; justify-self: start; }
.mk-c { min-width: 0; font-size: 0.78rem; justify-self: end; }
.mk-item:not(:has(.mk-c)) .mk-v { grid-column: 1 / -1; }
.mk-foot { font-size: 0.78rem; margin-top: 6px; }
.toc-l em { white-space: nowrap; font-size: clamp(1.2rem, 7vw, 1.65rem); }
.toc-r { white-space: nowrap; }
.mk-item { display: block; }
.mk-item .mk-v { display: inline; margin-right: 6px; }
.mk-item .mk-c { display: inline; white-space: nowrap; }
.mk-item .mk-l { display: block; }
.toc { flex-wrap: wrap; row-gap: 2px; }
.toc-r { flex: 1 0 auto; text-align: right; }
.mk-item .mk-v { font-size: 1rem; }
.mk-item .mk-c { font-size: 0.74rem; }
/* 오늘의 경제: 한 줄에 이름·숫자·등락, 두 칸 → 높이 절반 */
.mk-card { padding: 2px 14px 6px; }
.mk-grid { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.mk-item { display: grid !important; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 7px 0; }
.mk-item .mk-l { display: block; grid-column: 1; font-size: 0.86rem; color: #555; margin: 0; white-space: nowrap; }
.mk-item .mk-v { display: block; grid-column: 2; justify-self: end; font-size: 0.98rem; margin: 0; white-space: nowrap; }
.mk-item .mk-c { display: block; grid-column: 1 / -1; justify-self: end; font-size: 0.72rem; line-height: 1; margin-top: -2px; }
.mk-item:not(:has(.mk-c)) .mk-v { grid-column: 2; }
@media (max-width: 400px) { .mk-grid { grid-template-columns: 1fr; } .mk-item { grid-template-columns: auto 1fr auto; } .mk-item .mk-c { grid-column: 3; margin-top: 0; } }
.mk-grid { grid-template-columns: 1fr !important; }
.mk-item { grid-template-columns: 1fr auto auto !important; column-gap: 10px; padding: 6px 0; }
.mk-item .mk-l { font-size: 0.92rem; }
.mk-item .mk-v { font-size: 1rem; grid-column: 2 !important; }
.mk-item .mk-c { grid-column: 3 !important; margin-top: 0; font-size: 0.78rem; min-width: 64px; text-align: right; line-height: inherit; }
.mk-item:not(:has(.mk-c)) .mk-v { grid-column: 2 / 4 !important; }
.mk-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(20,20,20,0.08); }
.mk-item:last-child { border-bottom: 0 !important; }
.mk-card { overflow: hidden; }
/* 노래 목록·재생기 */
.song-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 2px; cursor: pointer; }
.song-row p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.song-row strong { font-size: 1.12rem; color: #141414; }
.song-row p span { font-size: 0.95rem; color: #666; }
.song-no { font-family: 'Nanum Myeongjo', serif; font-weight: 700; font-size: 1.1rem; color: #2f6b4f; text-align: center; }
.song-play { width: 40px; height: 40px; border-radius: 50%; background: var(--dark-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; padding-left: 3px; }
.pl-head { margin-bottom: 12px; }
.pl-head h2 { margin: 4px 0 2px; }
.pl-head p { margin: 0; color: #666; }
.pl-no { font-size: 0.85rem; color: #2f6b4f; font-weight: 700; }
.pl-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.pl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pl-nav { display: flex; gap: 10px; margin-top: 14px; }
.pl-nav .btn { flex: 1; padding: 14px; font-size: 1.05rem; }
.pl-nav .btn[disabled] { opacity: 0.35; }
/* 위계: Contents(목차) > 코너 소제목 */
.toc-l img { width: 72px; height: auto; }
.toc-l em { font-size: 1.9rem !important; letter-spacing: 0.04em; }
.label { font-size: 1.12rem !important; gap: 10px; padding-bottom: 8px; border-bottom-width: 1.5px !important; }
.label .lb-ic { width: 30px; height: 30px; flex: 0 0 30px; }
@media (max-width: 768px) { .toc-l em { font-size: 1.8rem !important; } .label { font-size: 1.08rem !important; } }
/* 오늘의 경제: 3분의 2 높이 */
.mk-card { padding: 0 12px 4px; }
.mk-item { padding: 3px 0 !important; }
.mk-item .mk-l { font-size: 0.84rem; }
.mk-item .mk-v { font-size: 0.9rem !important; }
.mk-item .mk-c { font-size: 0.7rem !important; min-width: 56px; }
.mk-foot { font-size: 0.72rem; margin: 2px 0 0; }
.toc { flex-wrap: nowrap; align-items: center; }
.toc-r { font-size: 0.8rem; flex: 0 1 auto; }
.toc-l { gap: 8px; }
.toc-l img { width: 60px; }
@media (max-width: 768px) { .toc-l em { font-size: 1.65rem !important; } }
/* 가요 / 팝송 */
.genre { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 20px 0 0; border: 1px solid rgba(20,20,20,0.2); border-radius: 8px; overflow: hidden; }
.genre button { background: #fff; border: 0; padding: 12px 0; font-size: 1.08rem; font-weight: 700; color: #555; }
.genre button + button { border-left: 1px solid rgba(20,20,20,0.2); }
.genre button[aria-pressed="true"] { background: var(--dark-green); color: #fff; }
.wx-in .linkbtn { position: relative; z-index: 2; padding: 6px 0; cursor: pointer; }
.wx-in .linkbtn[disabled] { opacity: 0.7; }
.mk-item .mk-l { color: #1a1a1a !important; font-weight: 600; }
.mk-item .mk-v { color: #000; font-weight: 800; }
/* 오늘의 문화 */
.cu-block { padding: 26px 0 22px; border-bottom: 1px solid var(--line); }
.cu-block:last-child { border-bottom: 0; }
.cu-kind { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; color: #2f6b4f; margin: 0 0 6px; }
.cu-title { font-family: 'Nanum Myeongjo', serif; font-size: 1.55rem; margin: 0 0 4px; color: #141414; }
.cu-by { color: #666; font-size: 0.95rem; margin: 0 0 16px; }
.cu-poem { font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; line-height: 2; white-space: pre-wrap; color: #1a1a1a; background: #fff; padding: 22px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.cu-note { font-size: 1.02rem; line-height: 1.8; color: #333; margin: 16px 0 0; }
.cu-fig { margin: 4px 0 14px; background: #1a1a1a; border-radius: 8px; overflow: hidden; }
.cu-fig img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; margin: 0 auto; }
.cu-quote blockquote { font-family: 'Nanum Myeongjo', serif; font-size: 1.35rem; line-height: 1.7; margin: 6px 0 10px; padding: 0 0 0 16px; border-left: 3px solid #C9A24A; color: #141414; }
/* 시사 상식 카드 */
.is-card { background: #fff; border-radius: 10px; padding: 22px 20px 20px; margin-top: 26px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.is-term { font-family: 'Nanum Myeongjo', serif; font-size: 1.8rem; margin: 2px 0 6px; color: #141414; }
.is-mean { font-size: 1.12rem; font-weight: 700; color: #1F5A43; margin: 0 0 14px; }
.is-exp { font-size: 1.05rem; line-height: 1.8; color: #222; margin: 0; }
.is-sub { font-size: 0.85rem; font-weight: 700; color: #8a7a4a; margin: 18px 0 4px; letter-spacing: 0.04em; }
.is-ex { font-family: 'Nanum Myeongjo', serif; font-size: 1.1rem; color: #333; margin: 0; padding-left: 12px; border-left: 3px solid #C9A24A; }
/* 문화 갈래 단추 */
.cu-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 22px 0 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cu-tabs::-webkit-scrollbar { display: none; }
.cu-tabs button { flex: 0 0 auto; background: #fff; border: 1px solid rgba(20,20,20,0.18); border-radius: 999px; padding: 9px 16px; font-size: 1rem; font-weight: 700; color: #444; }
.cu-tabs button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: #fff; }
.cu-words { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 4px 0 0; font-size: 1rem; }
.cu-words dt { font-family: 'Nanum Myeongjo', serif; font-weight: 700; color: #1F5A43; }
.cu-words dd { margin: 0; color: #333; }
.cu-points { margin: 4px 0 0; padding-left: 1.3em; font-size: 1.02rem; line-height: 1.8; color: #222; }
.cu-essay p { font-family: 'Nanum Myeongjo', serif; font-size: 1.1rem; line-height: 2; color: #1a1a1a; margin: 0 0 14px; text-indent: 0.6em; }
.mu-genre button { font-size: 0.92rem; padding: 10px 0; }
.cbox .cmt-form { display: flex; gap: 8px; margin: 6px 0 10px; }
.cbox .cmt-form input { flex: 1; min-width: 0; padding: 12px; font-size: 1rem; border: 1px solid rgba(20,20,20,0.25); border-radius: 6px; }
/* 가입 안내 창: 따뜻한 연노랑 */
.gate-modal .modal-box { background: #FFF8E3; }
.gate-modal .modal-box h2 { color: #3A2E00; }
.gate-modal .modal-box p { color: #4a3f1c; }
.btn.warm { background: #F9E9A8; color: #3A2E00; border: 1px solid #E8D58A; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn.warm .free { background: #3A2E00; color: #FFF8E3; font-size: 0.8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.gate-modal .btn.line { background: #fff; color: #3A2E00; border-color: #E8D58A; }
.gate-modal .modal-box hr, .gate-modal .modal-box .sep { border-color: #EADFB8; }
.gate-modal .linkbtn, .gate-modal a { color: #6b5410; }
.gate-modal .modal-box button:not(.btn):not(.x) { background: transparent; color: #6b5410; }
.gate-modal .modal-box h2 { font-size: 1.5rem; }
/* ── 맨 아래: 매거진 판권면 ── */
.foot.colophon { margin-top: 90px; padding: 38px 0 50px; border-top: 0; text-align: center; color: #6b665c; position: relative; }
.colophon .co-orn { display: block; height: 1px; background: linear-gradient(90deg, transparent, #C9A24A 30%, #C9A24A 70%, transparent); margin: 0 auto 34px; width: 100%; }
.colophon .co-orn::after { content: "✦"; position: absolute; left: 50%; top: 38px; transform: translate(-50%, -52%); background: var(--ivory); color: #C9A24A; font-size: 0.8rem; padding: 0 12px; }
.colophon .co-logo { display: block; width: 190px; max-width: 60%; margin: 0 auto 18px; }
.colophon .co-en { font-family: 'Cormorant Garamond', 'Nanum Myeongjo', serif; font-style: italic; font-size: 1.05rem; letter-spacing: 0.04em; color: #8a6d2c; margin: 0 0 6px; }
.colophon .co-kr { font-family: 'Nanum Myeongjo', serif; font-size: 0.98rem; color: #555; margin: 0 0 26px; }
.colophon .co-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: 0.92rem; }
.colophon .co-links a { margin: 0; color: var(--dark-green); text-decoration: none; border-bottom: 1px solid rgba(30,70,50,0.25); }
.colophon .co-links span { color: #bbb; }
.colophon .co-copy { margin: 22px 0 0; font-size: 0.72rem; letter-spacing: 0.25em; color: #a29d92; }
.colophon .co-orn { display: flex; align-items: center; gap: 14px; height: auto; background: none; margin: 0 0 34px; }
.colophon .co-orn::after { content: none; }
.colophon .co-orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #C9A24A); }
.colophon .co-orn i:last-child { background: linear-gradient(90deg, #C9A24A, transparent); }
.colophon .co-orn b { color: #C9A24A; font-size: 0.8rem; font-weight: 400; }
.colophon .co-en { line-height: 1.45; }
.colophon .co-kr { line-height: 1.7; word-break: keep-all; }
.foot.colophon { margin-top: 60px; padding: 26px 0 34px; }
.colophon .co-orn { margin-bottom: 22px; }
.colophon .co-logo { width: 150px; margin-bottom: 12px; }
.colophon .co-kr { font-size: 0.92rem; margin-bottom: 16px; }
.colophon .co-copy { margin-top: 14px; }
/* ── 단추 색 통일: 따뜻한 연노랑 (카카오톡에 익숙한 느낌) ── */
:root { --warm: #F9E9A8; --warm-line: #E8D58A; --warm-ink: #3A2E00; --warm-hover: #F5DF86; }
.btn.green, .modal-actions .btn.green, .cmt-form .btn.green, .memo .btn.green { background: var(--warm) !important; color: var(--warm-ink) !important; border: 1px solid var(--warm-line) !important; font-weight: 800; }
.btn.green:hover { background: var(--warm-hover) !important; }
.btn.green[disabled] { opacity: 0.5; }
.song-play { background: var(--warm); color: var(--warm-ink); border: 1px solid var(--warm-line); }
.nb-mic { background: var(--warm); color: var(--warm-ink); border: 1px solid var(--warm-line); }
.nb-mic .mic-ic { color: var(--warm-ink); }
.mic-big { background: var(--warm); color: var(--warm-ink); }
.genre button[aria-pressed="true"], .cu-tabs button[aria-pressed="true"] { background: var(--warm); color: var(--warm-ink); border-color: var(--warm-line); }
.opts button[aria-pressed="true"] { border-color: #C9A24A; background: #FFF8E3; }
.ph-actions .btn.green { background: var(--warm) !important; }
.pl-nav .btn.green { background: var(--warm) !important; color: var(--warm-ink) !important; }
.cbox .btn, .cbox button[type=submit] { background: var(--warm) !important; color: var(--warm-ink) !important; border: 1px solid var(--warm-line) !important; }
/* Contents 옆 날짜: 두 줄로 (큰 글씨 폰에서도 안 잘리게) */
.toc-r { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; white-space: nowrap; line-height: 1.3; text-align: right; }
.toc-r b { font-weight: 600; color: #6b665c; }
.toc-r span { font-size: 0.92em; }
.toc-l { min-width: 0; }
/* Contents만 크게 */
.toc { justify-content: flex-start; }
.toc-l em { font-size: 2.3rem !important; }
.toc-l img { width: 76px; }
@media (max-width: 768px) { .toc-l em { font-size: 2.15rem !important; } }
/* ── 인사 카드: 계절 사진 2장 ── */
.cards { gap: 14px; scroll-snap-type: x mandatory; }
.gcard.pic { flex: none; width: min(74vw, 300px); height: auto; aspect-ratio: 4 / 5; min-height: 0; background-size: cover; background-position: center; background-color: #E9DFC9; border-radius: 12px; scroll-snap-align: start; box-shadow: 0 8px 22px rgba(60,40,10,0.18); }
.gcard.pic::after { background: linear-gradient(to bottom, rgba(20,16,10,0) 35%, rgba(20,16,10,0.45) 65%, rgba(20,16,10,0.78)); }
.gcard.pic q { position: absolute; top: auto; left: 20px; right: 20px; bottom: 54px; padding: 0; background: none; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1.22rem; line-height: 1.55; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.45); z-index: 1; }
.gcard.pic .g-logo { position: absolute; top: 12px; right: 12px; left: auto; bottom: auto; width: 64px; opacity: 0.95; z-index: 1; }
.gcard.pic .g-send { position: absolute; left: 20px; bottom: 18px; z-index: 1; font-size: 0.85rem; color: rgba(255,255,255,0.92); padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.7); }
@media (min-width: 769px) { .gcard.pic { width: 300px; } }
/* ── 운세: 길어진 글 ── */
#fortune .fo-total { display: block; font-size: 1.22rem; line-height: 1.85; color: #1f1f1f; margin-bottom: 18px; }
#fortune .fo-row { display: block; font-family: 'Noto Sans KR', sans-serif; font-size: 1.05rem; line-height: 1.7; color: #333; padding: 12px 0; border-top: 1px solid var(--line); }
#fortune .fo-row b { display: block; font-size: 0.88rem; color: #8a6d2c; letter-spacing: 0.05em; margin-bottom: 2px; }
#fortune .fo-lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; font-family: 'Noto Sans KR', sans-serif; }
#fortune .fo-lucky span { background: #FFF8E3; border: 1px solid var(--warm-line, #E8D58A); border-radius: 10px; padding: 10px 12px; font-size: 1rem; color: #3A2E00; font-weight: 700; }
#fortune .fo-lucky em { display: block; font-style: normal; font-weight: 500; font-size: 0.82rem; color: #8a6d2c; }
/* ── 오늘의 유머 ── */
.cu-humor .hu-text { font-size: 1.2rem; line-height: 1.9; color: #1f1f1f; margin: 10px 0 22px; }
.cu-humor .hu-open { width: 100%; font-size: 1.1rem; padding: 14px; }
.cu-humor .hu-punch { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1.45rem; line-height: 1.6; color: #3A2E00; background: #FFF8E3; border: 1px solid #E8D58A; border-radius: 12px; padding: 18px 20px; margin: 0; text-align: center; }
/* Contents 앞 잎 로고를 글자보다 크게 */
.toc-l { gap: 10px; align-items: center; }
.toc-l img { width: 124px; flex: none; }
@media (max-width: 380px) { .toc-l img { width: 104px; } }
/* 오늘의 문화 칸: 두 줄로 한눈에 */
.cu-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow: visible; margin: 0; }
.cu-tabs button { padding: 10px 4px; font-size: 1rem; white-space: nowrap; text-align: center; min-width: 0; }
/* 그림 크게 보기 */
.cu-fig[data-zoom] { position: relative; cursor: zoom-in; }
.cu-zoom { position: absolute; right: 10px; bottom: 10px; background: rgba(20,16,10,0.62); color: #fff; font-size: 0.85rem; padding: 5px 10px; border-radius: 999px; pointer-events: none; }
#modal.lightbox { background: rgba(10,8,6,0.97) !important; align-items: center; }
#modal.lightbox .modal-box { background: transparent; box-shadow: none; padding: 48px 0 20px; max-width: 100%; width: 100%; max-height: 100vh; overflow: auto; }
#modal.lightbox .modal-box .x { color: #fff; background: rgba(255,255,255,0.18); border-radius: 50%; width: 44px; height: 44px; top: 4px; right: 12px; z-index: 2; }
.lb-wrap { touch-action: pinch-zoom; overflow: auto; }
.lb-wrap img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.lb-cap { color: #f4efe4; text-align: center; margin: 16px 18px 4px; font-size: 1.05rem; line-height: 1.6; }
.lb-cap b { font-family: 'Nanum Myeongjo', serif; }
.lb-tip { color: rgba(255,255,255,0.6); text-align: center; font-size: 0.85rem; margin: 0; }
/* ── 말모이 ── */
.mm { margin-top: 18px; }
.mm-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.mm-head b { font-family: 'Nanum Myeongjo', serif; font-size: 1.5rem; color: var(--dark-green); }
.mm-head span { font-size: 0.9rem; color: #8a6d2c; letter-spacing: 0.08em; }
.mm-how { margin: 4px 0 18px; font-size: 0.98rem; color: #444; }
.mm-how summary { cursor: pointer; color: var(--dark-green); font-weight: 700; padding: 6px 0; }
.mm-how p { margin: 8px 0; line-height: 1.75; }
.mm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.9rem; }
.mm-legend .t { width: 28px; height: 28px; font-size: 0.95rem; border-radius: 6px; }
.mm-board { display: grid; gap: 7px; }
.mm-row { display: grid; grid-template-columns: repeat(6, 1fr) 3.4em; gap: 7px; align-items: center; }
.mm-row em { font-style: normal; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1.05rem; color: #6b665c; text-align: center; }
.mm .t { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; border: 1.5px solid #D8D1C2; background: #fff; font-size: 1.45rem; font-weight: 700; color: #1f1f1f; }
.mm .t.typed { border-color: #6b665c; }
.mm .t.hit { background: #3E8A63; border-color: #3E8A63; color: #fff; }
.mm .t.near { background: #F2D675; border-color: #E0BF4F; color: #3A2E00; }
.mm .t.miss { background: #B9B3A7; border-color: #B9B3A7; color: #fff; }
.mm-row.live .t:empty { border-style: dashed; }
.mm-row.shake { animation: mmshake 0.4s; }
@keyframes mmshake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.mm-keys { margin-top: 20px; display: grid; gap: 7px; }
.mm-krow { display: flex; gap: 5px; justify-content: center; }
.mm-keys .k { flex: 1 1 0; max-width: 46px; height: 52px; border: 0; border-radius: 8px; background: #E9E3D6; font-size: 1.25rem; font-weight: 700; color: #1f1f1f; padding: 0; }
.mm-keys .k.wide { max-width: 78px; flex: 1.6 1 0; font-size: 0.88rem; white-space: nowrap; }
.mm-keys .k.go { background: var(--warm); color: var(--warm-ink); border: 1px solid var(--warm-line); }
.mm-keys .k.hit { background: #3E8A63; color: #fff; } .mm-keys .k.near { background: #F2D675; color: #3A2E00; } .mm-keys .k.miss { background: #B9B3A7; color: #fff; }
.mm-end { margin-top: 24px; padding: 22px 18px; background: #FFFDF6; border: 1px solid #EADFC2; border-radius: 14px; text-align: center; }
.mm-verdict { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1.25rem; color: var(--dark-green); margin: 0 0 12px; }
.mm-answer b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 2.4rem; letter-spacing: 0.2em; margin-right: -0.2em; color: #1f1f1f; }
.mm-answer span { display: block; font-size: 1.02rem; color: #555; margin-top: 4px; line-height: 1.6; }
.mm-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0; border-top: 1px solid #EADFC2; border-bottom: 1px solid #EADFC2; padding: 12px 0; }
.mm-stats span { font-size: 0.82rem; color: #777; }
.mm-stats b { display: block; font-size: 1.35rem; color: #1f1f1f; }
.mm-share { width: 100%; font-size: 1.1rem; padding: 14px; }
/* 아침 알림 받기 */
.push-cta { display: flex; align-items: center; gap: 14px; width: 100%; margin: 6px 0 10px; padding: 14px 16px; background: #fff; border: 1px solid #EADFC2; border-radius: 12px; text-align: left; cursor: pointer; }
.push-cta .pc-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--warm); color: #B8862F; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.push-cta b { display: block; font-size: 1.05rem; color: #1f1f1f; }
.push-cta small { display: block; font-size: 0.88rem; color: #777; margin-top: 2px; }
.pc-hours { display: grid; gap: 10px; margin-top: 18px; }
.pc-hours .btn { width: 100%; font-size: 1.15rem; padding: 14px; }
.pc-stop { display: block; margin: 18px auto 0; background: none; border: 0; color: #888; text-decoration: underline; font-size: 0.95rem; }
/* ── 오늘 PLAY ── */
body.game-mode .d-hero { display: none; }
body.game-mode .top-nav { position: sticky; background: var(--ivory); padding: 10px 16px; box-shadow: 0 1px 0 var(--line); }
body.game-mode .top-nav .back { color: #1f1f1f; }
body.game-mode .top-nav img { height: 40px; filter: none; }
body.game-mode #detail main, body.game-mode .d-body { padding-top: 0; }
.dsec.game { padding-top: 6px; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pl-name b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.45rem; color: var(--dark-green); line-height: 1.2; }
.pl-clock { font-variant-numeric: tabular-nums; font-size: 1.05rem; color: #8a6d2c; font-weight: 700; }
.pl-btns { display: flex; gap: 6px; }
.pl-b { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 12px; border: 1px solid #E3DAC6; background: #fff; font-size: 1.15rem; line-height: 1; color: #1f1f1f; padding: 0; }
.pl-b small { font-size: 0.7rem; margin-top: 4px; color: #666; }
.pl-b[aria-pressed="false"] { opacity: 0.45; }
.pl-b.rank { background: var(--warm); border-color: var(--warm-line); }
.pl-done { margin-top: 18px; padding: 18px; text-align: center; background: #FFFDF6; border: 1px solid #EADFC2; border-radius: 14px; }
.pl-done-t { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1.4rem; color: var(--dark-green); margin: 0 0 6px; }
.pl-done-s { font-size: 1.02rem; color: #555; margin: 0 0 14px; }
.pl-done-b { display: grid; gap: 8px; }
.pl-done-b .btn, .pl-again { width: 100%; font-size: 1.08rem; padding: 13px; }
.pl-again { margin-top: 10px; }
.pl-hub-lead { margin: 22px 0 14px; font-size: 1.05rem; color: #555; }
.pl-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; padding: 16px 14px; background: #fff; border: 1px solid #E8E0CC; border-radius: 14px; box-shadow: 0 3px 10px rgba(60,40,10,0.06); }
.pl-card b { font-family: 'Nanum Myeongjo', serif; font-size: 1.25rem; color: #1f1f1f; margin-top: 6px; }
.pl-card > span:not(.pl-ic) { font-size: 0.9rem; color: #666; line-height: 1.45; }
.pl-card em { font-style: normal; font-size: 0.8rem; color: #8a6d2c; margin-top: 6px; }
.pl-ic { height: 40px; display: flex; align-items: center; }
.gi-emoji { font-size: 2rem; }
.gi-num { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1.15rem; color: #fff; background: var(--dark-green); border-radius: 8px; padding: 6px 9px; }
.gi-tiles { display: grid; grid-template-columns: repeat(2, 16px); gap: 3px; }
.gi-tiles i { width: 16px; height: 16px; border-radius: 3px; background: #D8D1C2; } .gi-tiles i.g { background: #3E8A63; } .gi-tiles i.y { background: #F2D675; }
/* 순위 창 */
.rank-modal .modal-box { max-height: 88vh; overflow: auto; }
.rk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 12px; }
.rk-tabs button { padding: 10px; border-radius: 10px; border: 1px solid #E3DAC6; background: #fff; font-size: 1.02rem; font-weight: 700; color: #555; }
.rk-tabs button[aria-pressed="true"] { background: var(--warm); border-color: var(--warm-line); color: var(--warm-ink); }
.rk-me { background: #F4EFE3; border-radius: 10px; padding: 12px 14px; font-size: 1rem; color: #333; line-height: 1.6; }
.rk-me em { font-style: normal; font-weight: 800; color: var(--dark-green); font-size: 1.15rem; }
.rk-list { list-style: none; padding: 0; margin: 12px 0 0; }
.rk-list li { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: 8px; padding: 10px 6px; border-bottom: 1px solid #EFE8D8; font-size: 1rem; }
.rk-list li.me { background: #FFF8E3; border-radius: 8px; font-weight: 700; }
.rk-n { text-align: center; color: #8a6d2c; font-weight: 700; }
.rk-list li.top .rk-n { font-size: 1.25rem; }
.rk-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-rec { font-variant-numeric: tabular-nums; color: #333; font-size: 0.95rem; }
.rk-empty { display: block !important; text-align: center; color: #888; }
/* 1 to 50 */
.n5-goal { text-align: center; font-size: 1.1rem; color: #555; margin: 4px 0 12px; }
.n5-goal b { font-size: 1.6rem; color: var(--dark-green); margin-left: 6px; }
.n5-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; max-width: 420px; margin: 0 auto; }
.n5 { aspect-ratio: 1; border-radius: 10px; border: 0; background: #fff; box-shadow: 0 2px 0 #DCD3C0; font-size: 1.5rem; font-weight: 800; color: #1f1f1f; padding: 0; }
.n5.two { background: #F4EFE3; color: var(--dark-green); }
.n5.gone { background: transparent; box-shadow: none; }
.n5.no { background: #F6D5D0; }
/* 스도쿠 */
.sd-grid { display: grid; grid-template-columns: repeat(9, 1fr); max-width: 440px; margin: 0 auto; border: 2px solid #3a3a3a; border-radius: 6px; overflow: hidden; background: #fff; }
.sd { aspect-ratio: 1; border: 0; border-right: 1px solid #DDD5C4; border-bottom: 1px solid #DDD5C4; background: #fff; font-size: 1.3rem; color: #2C6AA0; font-weight: 600; padding: 0; }
.sd.given { color: #1f1f1f; font-weight: 800; }
.sd.br { border-right: 2px solid #3a3a3a; } .sd.bb { border-bottom: 2px solid #3a3a3a; }
.sd.near { background: #F6F1E4; } .sd.samev { background: #E7F0E9; } .sd.sel { background: #F2D675; }
.sd.bad { color: #C0392B; background: #FBE3DF; }
.sd-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; max-width: 440px; margin: 14px auto 0; }
.sd-pad button { height: 54px; border-radius: 10px; border: 0; background: #E9E3D6; font-size: 1.45rem; font-weight: 800; color: #1f1f1f; }
.sd-pad .wide { font-size: 1rem; background: #fff; border: 1px solid #DDD5C4; }
.sd-tip, .ss-tip { text-align: center; margin-top: 10px; }
/* 사천성 */
.ss-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 6px; margin: 0 auto; background: #1E3B2E; border-radius: 14px; --fs: 26px; }
.ss-t { aspect-ratio: 3 / 4; border: 0; border-radius: 8px; background: #FFFBEF; box-shadow: inset 0 -3px 0 #D9D1BD; font-size: var(--fs); padding: 0; display: flex; align-items: center; justify-content: center; }
.ss-t.sel { background: #F2D675; box-shadow: 0 0 0 3px #3A2E00 inset; }
.ss-t.hint { background: #CFE6D8; }
.ss-t.gone { visibility: hidden; }
.ss-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.ss-bar .btn { padding: 10px 4px; font-size: 0.95rem; line-height: 1.25; }
.ss-bar small { display: block; font-size: 0.72rem; color: #8a6d2c; }
.ss-line { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 30; }
.ss-line polyline { fill: none; stroke: #F2D675; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
body.game-mode .top-nav img { display: none; }
body.game-mode .top-nav .back { color: #1f1f1f !important; text-shadow: none; }
.pl-hub-head { padding: 18px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pl-hub-head span { font-size: 0.78rem; letter-spacing: 0.3em; color: #8a6d2c; }
.pl-hub-head h2 { font-family: 'Nanum Myeongjo', serif; font-size: 2rem; margin: 4px 0 6px; color: var(--dark-green); }
.pl-hub-head p { margin: 0; color: #555; font-size: 1.02rem; }
.sd-pad .wide { white-space: nowrap; font-size: 0.9rem; }
/* 큰 글씨 폰에서도 판이 넘치지 않게: 칸 글자는 화면 폭 기준 */
.sd { min-width: 0; font-size: min(5.2vw, 23px); }
.sd-grid { width: 100%; }
.mm-keys .k { min-width: 0; font-size: min(5vw, 21px); }
.mm-keys .k.wide { font-size: min(3.6vw, 15px); }
.mm .t { min-width: 0; font-size: min(6vw, 24px); }
.mm-row em { font-size: min(4vw, 17px); }
.n5 { min-width: 0; font-size: min(6.5vw, 26px); }
.ss-bar .btn { font-size: min(3.8vw, 15px); }
/* 가입 화면: 큰 글씨 폰에서도 칸이 다 보이게 */
.field .in { flex-wrap: wrap; }
.field .in input { flex: 1 1 7em; min-width: 0; }
.field .in .btn { flex: 1 0 auto; }
.field select { width: 100%; font-size: 1.05rem; padding: 12px; border-radius: 8px; border: 1px solid #D8D1C2; background: #fff; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg2 button { padding: 13px; border-radius: 8px; border: 1px solid #D8D1C2; background: #fff; font-size: 1.08rem; font-weight: 700; color: #444; }
.seg2 button[aria-pressed="true"] { background: var(--warm); border-color: var(--warm-line); color: var(--warm-ink); }
.chk input { width: 24px; height: 24px; flex: none; accent-color: #3E8A63; }
.rk-note { font-size: 0.72rem; color: #aaa; text-align: center; margin: 14px 0 0; }
.rk-cheer { font-size: 0.92rem; color: #6b665c; }
.pl-done-s b { color: var(--dark-green); font-size: 1.15em; }
/* 연습 판 */
.pr-try { display: block; width: 100%; text-align: left; margin: 0 0 14px; padding: 12px 14px; border: 1px dashed #D9C88F; border-radius: 10px; background: #FFFCF0; font-size: 1rem; color: #3A2E00; }
.pr-try small { display: block; font-size: 0.8rem; color: #8a6d2c; margin-top: 2px; }
.pr-band { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: #F4EFE3; font-size: 0.92rem; color: #6b5a2c; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-band .linkbtn { font-size: 0.92rem; }
.sd-reset { display: block; width: 100%; max-width: 440px; margin: 10px auto 0; font-size: 1rem; padding: 10px; }
.sd-reset small, .pl-again small { color: #8a6d2c; font-size: 0.82rem; }
/* 오늘 PLAY 목록: 사진 카드 */
.pl-card.has-photo { padding: 0; overflow: hidden; gap: 0; }
.pl-photo { display: block; width: 100%; aspect-ratio: 3 / 2; background-size: cover; background-position: center 60%; }
.pl-txt { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; width: 100%; min-width: 0; }
.pl-txt b { font-family: 'Nanum Myeongjo', serif; font-size: 1.25rem; color: #1f1f1f; margin: 0; }
.pl-txt span { font-size: 0.9rem; color: #666; line-height: 1.45; word-break: keep-all; }
.pl-txt em { font-style: normal; font-size: 0.8rem; color: #8a6d2c; margin-top: 4px; }
.rk-me-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.rk-me-h b { font-size: 1.05rem; color: #1f1f1f; }
.rk-me-h em { font-style: normal; font-weight: 800; color: var(--dark-green); font-size: 1.3rem; }
.rk-me-r { font-size: 0.98rem; color: #444; }
.rk-go { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 8px; border: 1px solid var(--warm-line); background: var(--warm); color: var(--warm-ink); font-size: 0.98rem; font-weight: 700; }
.rk-list li small { font-size: 0.8em; color: #8a6d2c; font-weight: 600; }
.rk-gap { display: block !important; text-align: center; color: #bbb; border-bottom: 0 !important; padding: 4px 0 !important; }
/* 따라하기: 썸네일 → 눌러서 영상 창 */
.fl-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: #000; }
.fl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(249,233,168,0.95); color: #3A2E00; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
/* 상세 화면을 내리면 위 막대를 단단한 바탕으로 (제목과 겹치지 않게) */
body.in-detail.nav-solid .top-nav { background: rgba(244,241,234,0.97); box-shadow: 0 1px 0 var(--line); padding-top: 12px; padding-bottom: 12px; }
body.in-detail.nav-solid .top-nav .back { color: #1f1f1f !important; text-shadow: none; }
body.in-detail.nav-solid .top-nav img { display: none; }
/* 5초 세고 시작 */
.pl-hidden { filter: blur(9px); pointer-events: none; user-select: none; }
.pl-cd { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(244,241,234,0.35); pointer-events: none; }
.pl-cd-n { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 6rem; line-height: 1; color: var(--dark-green); text-shadow: 0 2px 0 #fff; animation: plpop 0.9s ease-out; }
.pl-cd-n.go { font-size: 2.6rem; white-space: nowrap; color: #B8862F; }
.pl-cd-t { font-size: 1.05rem; color: #555; background: rgba(255,255,255,0.85); padding: 4px 12px; border-radius: 999px; }
@keyframes plpop { 0% { transform: scale(1.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); } }
/* 말모이 놀이 방법 */
.mm-steps { margin: 8px 0 12px; padding-left: 1.3em; line-height: 1.75; }
.mm-steps li { margin-bottom: 6px; }
.mm-steps small { color: #666; }
.mm-steps .t, .mm-exrow .t { display: inline-flex; width: 1.6em; height: 1.6em; font-size: 0.9rem; border-radius: 5px; vertical-align: middle; margin: 0 2px; aspect-ratio: auto; }
.mm-exp { margin: 10px 0 4px; font-size: 0.95rem; color: var(--dark-green); }
.mm-exrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; }
.mm-ex { display: inline-flex; gap: 2px; }
.mm-exrow em { font-style: normal; font-size: 0.88rem; color: #555; }
.pl-cd.local { position: absolute; inset: 0; align-items: center; justify-content: flex-start; padding-top: 70px; background: transparent; }
/* Contents: 가운데, 양쪽에 잎 */
.toc.toc-c { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: nowrap; }
.toc-c em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: normal; font-weight: 600; font-size: 2rem; letter-spacing: 0.2em; margin-right: -0.2em; text-transform: uppercase; color: #1f1f1f; line-height: 1; white-space: nowrap; }
.toc-c .tc-leaf { width: min(22vw, 96px); height: auto; flex: 0 1 auto; min-width: 0; }
.toc-c .tc-leaf.r { transform: scaleX(-1); }
@media (max-width: 768px) { .toc-c em { font-size: min(7.4vw, 1.9rem); } }
/* 네 칸 메인 단추: 화면 끝까지 넓고 세로로 길게 (A안) */
@media (max-width: 768px) {
.tabs3:not(.compact) { margin-left: -16px; margin-right: -16px; gap: 8px; }
.tabs3:not(.compact) button { min-height: 0; aspect-ratio: 4 / 5.3; padding: 18px 10px 18px; border-radius: 16px; background-size: cover !important; }
.tabs3:not(.compact) button b { font-size: 1.85rem !important; line-height: 1.22; }
.tabs3:not(.compact) button small { font-size: 1.05rem !important; }
.tabs3:not(.compact) button[aria-pressed="true"] { transform: scale(1.02) !important; }
}
@media (max-width: 768px) {
.tabs3:not(.compact) button, .tabs3:not(.compact) button[aria-pressed="true"] { background-size: cover !important; background-position: center !important; }
.tabs3:not(.compact) button b { font-size: min(1.85rem, 7.2vw) !important; word-break: keep-all; }
.tabs3:not(.compact) button small { font-size: min(1.05rem, 4.2vw) !important; word-break: keep-all; }
}
/* ── 장(章) 안으로 들어가기 ── */
.ch-zoom { position: fixed; z-index: 60; background-size: cover; background-position: center; border-radius: 16px; transition: left .42s cubic-bezier(.2,.7,.2,1), top .42s cubic-bezier(.2,.7,.2,1), width .42s cubic-bezier(.2,.7,.2,1), height .42s cubic-bezier(.2,.7,.2,1), border-radius .42s, opacity .35s; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.ch-zoom::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.45)); }
.ch-zoom.out { opacity: 0; }
body.in-chapter .toc, body.in-chapter #tabs3 { display: none; }
/* 소개 배너는 첫 화면에만 — 장에 들어가면 따라붙는다 (운영자 2026-10-20) */
body.in-chapter .intro { display: none; }
@media (max-width: 768px) { body.in-chapter .hero { display: none; } body.in-chapter main.content { padding-top: 0; } }
.ch-head { position: relative; margin: 0 -18px 26px; min-height: 46vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 0 22px 26px; color: #fff; animation: chin .5s ease-out; }
.ch-head::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 35%, rgba(20,16,10,0.72) 100%); }
.ch-head > * { position: relative; }
.ch-back { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 1rem; backdrop-filter: blur(6px); }
.ch-k { display: block; font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.32em; font-size: 0.85rem; opacity: 0.9; margin-bottom: 6px; }
.ch-t h2 { font-family: 'Nanum Myeongjo', serif; font-size: min(2.6rem, 10vw); line-height: 1.2; margin: 0 0 6px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.35); word-break: keep-all; }
.ch-t p { margin: 0; font-size: 1.1rem; opacity: 0.95; }
@keyframes chin { from { opacity: 0.4; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (min-width: 769px) { .ch-head { margin: 0 0 30px; border-radius: 18px; min-height: 340px; } }
body:not(.in-chapter) .ch-head { display: none; }
/* 첫 화면: 표지 + CONTENTS 네 칸 + 판권면만. 내용은 장 안에서 */
body:not(.in-chapter) .tabsec { display: none !important; }
body:not(.in-chapter) .tabs-mini { display: none !important; }
@media (max-width: 768px) {
.tabs3:not(.compact) { margin-left: 4px; margin-right: 4px; gap: 12px; }
.tabs3:not(.compact) button { aspect-ratio: 4 / 5.4; }
body:not(.in-chapter) .foot.colophon { margin-top: 44px; }
}
body:not(.in-chapter) .tabs3:not(.compact) button { opacity: 1 !important; filter: none !important; }
/* 첫 화면 네 칸: 모두 환하게 (글씨 아래만 살짝 어둡게) */
body:not(.in-chapter) .tabs3:not(.compact) button::before { background: linear-gradient(to top, rgba(20,16,10,0.62) 0%, rgba(20,16,10,0.12) 50%, rgba(20,16,10,0) 100%) !important; }
body:not(.in-chapter) .tabs3:not(.compact) button { transform: none !important; box-shadow: 0 6px 18px rgba(60,40,10,0.16) !important; }
body:not(.in-chapter) .tabs3:not(.compact) button b, body:not(.in-chapter) .tabs3:not(.compact) button small { text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.45); }
.nb-guide { margin: 0 0 12px; padding: 10px 12px; background: #FFFCF0; border: 1px dashed #E3D29A; border-radius: 10px; font-size: 0.98rem; line-height: 1.6; color: #3A2E00; }
.nb-guide small { color: #8a6d2c; }
.nb-say-tip { text-align: center; font-size: 1.05rem; line-height: 1.6; margin: 6px 0 10px; }
.nb-live { min-height: 4.5em; max-height: 40vh; overflow: auto; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #E3DAC6; font-size: 1.15rem; line-height: 1.6; color: #1f1f1f; }
.nb-live .ph { color: #aaa; font-size: 1rem; }
.nb-live .itm { color: #8a8a8a; }
.mic-big.on { animation: micpulse 1.4s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,213,138,0.7); } 50% { box-shadow: 0 0 0 14px rgba(232,213,138,0); } }
/* 장 넘어가기를 부드럽게: 커진 사진이 천천히 걷히며 표지로 이어짐 */
.ch-zoom { transition: left .46s cubic-bezier(.22,.61,.36,1), top .46s cubic-bezier(.22,.61,.36,1), width .46s cubic-bezier(.22,.61,.36,1), height .46s cubic-bezier(.22,.61,.36,1), border-radius .46s, opacity .6s ease; }
.ch-head { animation: chfade .6s ease both; }
@keyframes chfade { from { opacity: 0.6; } to { opacity: 1; } }
body.in-chapter .tabsec.on { animation: chbody .6s ease .1s both; }
@keyframes chbody { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* 연도 고르기: 다섯 개가 한 줄에 */
#tabs, #tabs2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; border-bottom: 0; }
#tabs button, #tabs2 button { padding: 10px 2px; border: 1px solid #E3DAC6; border-radius: 10px; background: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: min(1rem, 3.9vw); font-weight: 700; color: #555; white-space: nowrap; margin: 0; }
#tabs button[aria-pressed="true"], #tabs2 button[aria-pressed="true"] { background: var(--warm); border-color: var(--warm-line); color: var(--warm-ink); }
/* 수첩 달력 */
.nb-calcard { padding: 14px 12px 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-family: 'Nanum Myeongjo', serif; font-size: 1.3rem; color: var(--dark-green); }
.cal-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #E3DAC6; background: #fff; font-size: 1.5rem; line-height: 1; color: #444; }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-wk span { text-align: center; font-size: min(0.85rem, 3.4vw); color: #777; padding: 4px 0; }
.cal-wk .sun, .cal-d.sun b { color: #C0473A; } .cal-wk .sat, .cal-d.sat b { color: #3A6EA5; }
.cal-d { aspect-ratio: 1 / 1.05; border: 0; border-radius: 10px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 5px 0 0; min-width: 0; }
.cal-d b { font-size: min(1.05rem, 4.2vw); font-weight: 600; color: #1f1f1f; }
.cal-d.today { background: #F4EFE3; } .cal-d.today b { color: var(--dark-green); font-weight: 800; }
.cal-d.sel { background: var(--warm); box-shadow: inset 0 0 0 1px var(--warm-line); }
.cal-d .dots { display: flex; gap: 3px; margin-top: 4px; height: 7px; }
.cal-d .dots i, .cal-key i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
i.ev { background: #3E8A63; } i.mm { background: #9C9488; } i.an { background: #D99A2B; }
.cal-key { display: flex; justify-content: center; gap: 14px; margin: 10px 0 0; font-size: 0.85rem; color: #666; flex-wrap: wrap; }
.cal-key span { display: inline-flex; align-items: center; gap: 5px; }
.cal-day { margin-top: 12px; border-top: 1px solid #EFE8D8; padding-top: 10px; }
.cal-day-h { font-weight: 700; color: #1f1f1f; margin: 0 0 6px; font-size: 1.02rem; }
.cal-tag { font-style: normal; font-size: 0.78rem; padding: 2px 7px; border-radius: 999px; color: #fff; }
.cal-tag.ev { background: #3E8A63; } .cal-tag.mm { background: #9C9488; } .cal-tag.an { background: #D99A2B; }
.cal-d { aspect-ratio: auto; min-height: 3.2em; padding: 6px 0 5px; justify-content: center; }
.cal-key i { flex: none; vertical-align: middle; }
.cal-key span { line-height: 1; }
/* ── 달력: 잡지풍 ── */
.nb-calcard { padding: 22px 16px 18px; background: #FFFDF8; border: 1px solid #EDE5D3; }
.cal-head { align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #E6DCC6; }
.cal-title { display: flex; align-items: center; gap: 12px; }
.cal-title b { font-family: 'Cormorant Garamond', 'Nanum Myeongjo', serif; font-weight: 500; font-size: 3.2rem; line-height: 0.9; color: #1f1f1f; }
.cal-title span { display: flex; flex-direction: column; line-height: 1.25; }
.cal-title em { font-style: normal; font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.28em; font-size: 0.95rem; color: #1f1f1f; }
.cal-title small { font-size: 0.8rem; letter-spacing: 0.2em; color: #a08a5a; }
.cal-nav { width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.7rem; color: #8a7a5a; }
.cal-wk span, .cal-wk .sun, .cal-wk .sat { color: #a59d8d; font-size: min(0.78rem, 3.2vw); letter-spacing: 0.1em; }
.cal-d, .cal-d.today, .cal-d.sel { background: transparent !important; box-shadow: none !important; }
.cal-d b, .cal-d.sun b, .cal-d.sat b { font-family: 'Nanum Myeongjo', serif; font-weight: 400; color: #2a2a2a; font-size: min(1.12rem, 4.4vw); width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-d.today b { border: 1px solid #C9A24A; color: #8a6d2c; font-weight: 700; }
.cal-d.sel b { background: #2B2A26; color: #F4EFE3; border-color: #2B2A26; }
.cal-d .dots { margin-top: 2px; height: 5px; }
.cal-d .dots i.dot { width: 5px; height: 5px; border-radius: 50%; background: #C9A24A; display: block; }
.cal-day { border-top: 1px solid #E6DCC6; margin-top: 14px; padding-top: 14px; }
.cal-day-h { font-family: 'Nanum Myeongjo', serif; font-size: 1.12rem; color: #1f1f1f; }
.cal-tag { background: transparent !important; color: #8a6d2c !important; padding: 0 !important; font-size: 0.82rem !important; letter-spacing: 0.04em; }
/* ── 오늘의 문화 칸: 잡지 목차처럼 ── */
.cu-tabs { gap: 2px 0 !important; padding: 18px 0 10px !important; border-top: 1px solid #E6DCC6; border-bottom: 1px solid #E6DCC6; margin-bottom: 6px !important; }
.cu-tabs button, .cu-tabs button[aria-pressed="true"] { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: 'Nanum Myeongjo', serif; font-weight: 700; font-size: min(1.08rem, 4.3vw) !important; color: #8f877a !important; padding: 8px 2px 10px !important; position: relative; }
.cu-tabs button[aria-pressed="true"] { color: #1f1f1f !important; }
.cu-tabs button[aria-pressed="true"]::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 2px; margin-left: -11px; background: #C9A24A; }
/* 오늘의 시: 사진 위에 시집 한 쪽처럼 */
.cu-poem-page { position: relative; margin: 6px -6px 26px; border-radius: 16px; padding: 44px 30px 46px; min-height: 70vh; background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.cu-poem-page::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,16,12,0.45) 0%, rgba(18,16,12,0.55) 45%, rgba(18,16,12,0.7) 100%); }
.cu-poem-page > * { position: relative; }
.cu-poem-page .cu-kind { color: rgba(255,255,255,0.85) !important; letter-spacing: 0.2em; font-size: 0.85rem; }
.cu-poem-page .cu-title { color: #fff !important; font-family: 'Nanum Myeongjo', serif; font-size: min(2.2rem, 9vw); margin: 6px 0 4px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.cu-poem-page .cu-by { color: rgba(255,255,255,0.85) !important; margin-bottom: 30px; }
.cu-poem-page .cu-poem { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; color: #fff !important; font-family: 'Nanum Myeongjo', serif; font-size: 1.22rem; line-height: 2.05; white-space: pre-line; text-shadow: 0 2px 10px rgba(0,30,60,0.55); }
@media (min-width: 769px) { .cu-poem-page { margin: 6px 0 30px; border-radius: 18px; } }
/* 달력: 접어 두었다가 펼치기 */
.nb-calbtn { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 18px; padding: 14px 16px; background: #FFFDF8; border: 1px solid #E6DCC6; border-radius: 12px; font-family: 'Nanum Myeongjo', serif; font-size: 1.1rem; font-weight: 700; color: #1f1f1f; text-align: left; }
.nb-calbtn svg { color: #8a6d2c; flex: none; }
.nb-calbtn span { flex: 1; }
.nb-calbtn i { font-style: normal; color: #a08a5a; transition: transform .3s; }
.nb-calbtn[aria-expanded="true"] i { transform: rotate(180deg); }
.nb-calwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.nb-calwrap > .nb-calcard { overflow: hidden; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transition: padding .4s; }
.nb-calwrap.open { grid-template-rows: 1fr; margin-bottom: 22px; }
.nb-calwrap.open > .nb-calcard { padding: 22px 16px 18px; border-width: 1px; }
/* 첫 화면 표지와 CONTENTS 사이 여백 */
.toc.toc-c { margin-top: 44px !important; }
@media (max-width: 768px) { .toc.toc-c { margin-top: 36px !important; } }
/* 회화: 소리에 맞춰 발음이 칠해짐 */
.ph-read span { transition: color .15s, background .15s; border-radius: 4px; padding: 0 1px; }
.ph-read span.done { color: #8a6d2c; }
.ph-read span.on { background: var(--warm); color: #3A2E00; font-weight: 800; }
/* 오늘의 경제 바탕은 이 파일 맨 아래 '경제·이슈 칸 바탕'에서 다시 잡는다 (운영자 2026-10-20).
예전 바탕(운영자 제공 모눈 노트 img/market-bg.jpg)은 크림색이 이어져 숨 쉴 데가 없다는 말씀에 내렸다. */
.tabs3 button[data-tab="g3"], .tabs-mini button[data-tab="g3"] { background-position: center 35% !important; }
/* 판권면 헌사 */
.colophon .co-ded { margin: 26px 0 0; line-height: 1; color: #6b665c; }
.colophon .co-ded span { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.95rem; letter-spacing: 0.12em; margin-bottom: 2px; }
.colophon .co-ded em { font-family: 'Allura', 'Cormorant Garamond', cursive; font-style: normal; font-size: 2rem; }
/* 준비 중인 두 칸 */
.tabs3 button.soon { background-color: #CFC6B4; background-size: cover; background-position: center; }
.tabs3 button.soon[data-soon="g5"] { background-image: url('../img/tab-travel.jpg'), linear-gradient(160deg, #D9CDB4, #A99A7E); }
.tabs3 button.soon[data-soon="g6"] { background-image: url('../img/tab-health.jpg'), linear-gradient(160deg, #C9D3C2, #8FA088); }
.tabs3 button.soon small { opacity: 0.9; letter-spacing: 0.08em; }
.tabs3 button.soon[data-soon="g5"] { background-position: center 30% !important; }
.tabs3 button.soon[data-soon="g6"] { background-position: 70% 25% !important; }
/* 준비 중: 흐리고 차분하게(아직 열리지 않은 느낌) */
.tabs3 button.soon { filter: grayscale(0.65) brightness(0.88) !important; }
.tabs3 button.soon::before, body:not(.in-chapter) .tabs3:not(.compact) button.soon::before { background: linear-gradient(to top, rgba(30,28,24,0.7) 0%, rgba(30,28,24,0.42) 55%, rgba(30,28,24,0.35) 100%) !important; }
.tabs3 button.soon small { display: inline-block; margin-top: 4px; padding: 3px 12px; border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; font-size: min(0.9rem, 3.6vw) !important; }
body .tabs3:not(.compact) button.soon { filter: grayscale(0.7) brightness(0.82) contrast(0.92) !important; }
body:not(.in-chapter) .tabs3:not(.compact) button.soon::before { background: linear-gradient(to top, rgba(30,28,24,0.72) 0%, rgba(30,28,24,0.45) 55%, rgba(30,28,24,0.38) 100%) !important; }
@media (max-width: 768px) { body:not(.in-chapter) .foot.colophon { margin-top: 19px !important; } }
@media (max-width: 768px) { body:not(.in-chapter) .foot.colophon { margin-top: 0 !important; padding-top: 14px !important; } }
/* 그해 오늘: 소식마다 대표 사진 */
.era-fig { margin: 18px 0 22px; padding: 0; }
.era-fig img { display: block; width: 100%; max-height: 62vw; object-fit: cover; border-radius: 12px; filter: sepia(0.18) saturate(0.9); box-shadow: 0 6px 18px rgba(60,40,10,0.14); }
.era-fig figcaption { padding: 12px 2px 0; }
.era-fig figcaption b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; color: var(--dark-green); margin-bottom: 4px; }
.era-fig figcaption span { font-size: 1.02rem; line-height: 1.75; color: #333; }
/* ── 2026-10-16 전수 점검 손질 ── */
.nw { white-space: nowrap; }
/* 첫 화면 '앱 아이콘 설치하기'도 따뜻한 연노랑 (초록 단추 없애기) */
.ghost.go { background: #F9E9A8; color: #3A2E00; border: 1px solid #E8D58A; box-shadow: none; }
.ghost.go:hover { background: #F5DF86; }
/* 오늘의 음악 장르: 칸 테두리 대신 글자 메뉴 + 금빛 밑줄, 큰 글씨에서 줄바꿈 */
.genre.mu-genre { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 18px; border: 0; border-radius: 0; overflow: visible; margin: 18px 0 6px; }
.genre.mu-genre button { background: none !important; border: 0 !important; padding: 6px 2px; font-size: 1rem; color: #8a8173; font-weight: 600; min-width: 0; border-bottom: 2px solid transparent !important; border-radius: 0; }
.genre.mu-genre button + button { border-left: 0 !important; }
.genre.mu-genre button[aria-pressed="true"] { color: #2a2418; border-bottom-color: #C9A24A !important; }
/* 그해 오늘: 큰 글씨에서는 제목 위, 설명 아래 (좁은 두 칸으로 갈라지지 않게) */
html.big .dsec[data-k="history"] .row { flex-direction: column; gap: 4px; }
html.big .dsec[data-k="history"] .row b { width: auto; }
/* 회화 발음: 붙여 쓴 글자도 칠할 수 있게 여백 없이 */
.ph-read span { padding: 0; }
/* 장 이동 작은 단추: 낱말 중간에서 끊기지 않게(돌아보/기 방지), 글자는 화면 폭 기준 */
.tabs3.compact button b { word-break: keep-all; overflow-wrap: normal; font-size: min(0.88rem, 3.6vw) !important; }
.tabs-mini button { font-size: min(0.86rem, 3.5vw) !important; }
.tabs-mini button span { word-break: keep-all; overflow-wrap: normal; }
/* 날씨 칸 계절 사진(봄 3/1·여름 6/1·가을 9/1·겨울 12/1): 사진이 화사해 글씨 쪽만 살짝 더 눌러 또렷하게 */
.wx-card { background-position: center 40% !important; }
/* 창가 정물 사진으로 바꾸면서 다시 잡았다 (운영자 2026-10-20) — 글이 가운데까지 오므로 70% 까지 덮고,
찻잔과 단풍잎이 있는 오른쪽 끝만 비운다. */
.wx-card::after { background: linear-gradient(to top, rgba(24,22,18,0.44) 0%, rgba(24,22,18,0.06) 58%),
linear-gradient(to right, rgba(24,22,18,0.78) 0%, rgba(24,22,18,0.62) 48%, rgba(24,22,18,0.28) 78%, rgba(24,22,18,0.05) 100%) !important; }
.wx-card .wx-in, .wx-card .wx-in * { text-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.3); }
/* 봄·겨울 사진은 창밖이 벚꽃·눈이라 왼쪽이 환하다 — 그 두 철만 막을 더 두껍게 해 흰 글씨를 지킨다 */
.wx-card[data-season="spring"]::after, .wx-card[data-season="winter"]::after {
background: linear-gradient(to top, rgba(24,22,18,0.46) 0%, rgba(24,22,18,0.08) 58%),
linear-gradient(to right, rgba(24,22,18,0.86) 0%, rgba(24,22,18,0.72) 48%, rgba(24,22,18,0.34) 78%, rgba(24,22,18,0.06) 100%) !important; }
/* ── 인사 카드: 고급 편지지 6가지 (2026-10-16) ── */
.gcard.paper { flex: none; position: relative; width: min(70vw, 290px); aspect-ratio: 4 / 5; height: auto; min-height: 0; border: 0; border-radius: 10px; box-shadow: 0 8px 22px rgba(70,52,22,0.10), 0 1px 3px rgba(70,52,22,0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 34px 18px 40px; overflow: hidden; scroll-snap-align: center; background-repeat: no-repeat; }
.gcard.paper::after { display: none !important; }
.gcard.paper::before { content: none; }
.gcard.paper > q, .gcard.paper > .gp-rule, .gcard.paper > .gp-leaf, .gcard.paper > .gp-brush, .gcard.paper > .gp-foil { position: relative; z-index: 1; }
.gcard.paper .gp-date { position: absolute; top: 22px; left: 0; right: 0; z-index: 1; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: min(0.74rem, 3.2vw); letter-spacing: 0.14em; }
.gcard.paper .gp-leaf { position: relative; width: 44px; height: auto; opacity: 0.92; margin: 0 0 14px; }
.gcard.paper .gp-foil { display: block; width: 26px; height: 26px; border-radius: 50%; margin: 0 0 18px; border: 1.5px solid #C2A05A; box-shadow: 0 0 0 3px #EFEAE1, 0 0 0 4px rgba(194,160,90,0.55); }
.gcard.paper q { display: block; quotes: none; padding: 0; margin: 0; background: none; text-shadow: none; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: min(1.2rem, 5.2vw); line-height: 1.75; word-break: keep-all; }
.gcard.paper .gp-rule { display: block; width: 26px; height: 1px; margin: 16px auto 0; }
.gcard.paper .gp-brush { display: block; width: 84px; height: 12px; margin: 14px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 20'%3E%3Cpath d='M4 12 C30 6 70 5 136 9 C100 13 50 15 6 15 Z' fill='%23221e19' opacity='.85'/%3E%3C/svg%3E") center/contain no-repeat; }
.gcard.paper .gp-brand { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 1; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: min(1rem, 4.4vw); letter-spacing: 0.06em; }
/* 카드 아래 로고 (운영자 2026-10-22 — 보내는 그림과 화면 카드를 같게) */
.gcard.paper .gp-logo { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 1; width: 22%; height: auto; } /* 보내는 그림의 235/1080 과 같은 비율 */
.gcard.paper .gp-seal { position: absolute; right: 24px; bottom: 17px; z-index: 1; width: 19px; padding: 5px 0; background: #B5322A; color: #F6E7D8; font: 800 10px/1.15 'Nanum Myeongjo', serif; writing-mode: vertical-rl; text-orientation: upright; border-radius: 2px; transform: rotate(-3deg); opacity: 0.9; display: flex; align-items: center; justify-content: center; }
/* 1 아이보리 금테 */
.gcard.paper.v1 { background-color: #FBF8F1; color: #2E2618; }
.gcard.paper.v1::before, .gcard.paper.v5::before { content: ''; position: absolute; inset: 9px; border-radius: 5px; pointer-events: none; display: block; }
.gcard.paper.v1::before { border: 1px solid rgba(176,141,74,0.5); }
.gcard.paper.v1 .gp-date { color: #A88B55; } .gcard.paper.v1 .gp-brand { color: #8A7A5A; } .gcard.paper.v1 .gp-rule { background: #C9A24A; }
/* 2 리넨 + 금 고리 */
.gcard.paper.v2 { background-color: #EFEAE1; background-repeat: repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E"); color: #3A3328; }
.gcard.paper.v2 .gp-date { color: #9A8A6E; } .gcard.paper.v2 .gp-brand { color: #857559; } .gcard.paper.v2 .gp-rule { background: #C9A24A; }
/* 3 크라프트 + 낙관 */
.gcard.paper.v3 { background-color: #D9C3A0; background-repeat: repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); color: #3B2B18; }
.gcard.paper.v3 .gp-date { color: #7A5F3A; } .gcard.paper.v3 .gp-brand { color: #6E5534; } .gcard.paper.v3 .gp-rule { background: #7A5F3A; }
/* 4 한지 + 먹 */
.gcard.paper.v4 { background-color: #F7F3EA; background-repeat: repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .6' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); color: #1E1B17; }
.gcard.paper.v4 .gp-date { color: #8C8070; } .gcard.paper.v4 .gp-brand { color: #6E655A; }
/* 5 새벽 하늘 */
.gcard.paper.v5 { background-image: linear-gradient(170deg, #DCE7EE 0%, #EEF1EE 55%, #F7EFE3 100%); color: #2A3440; }
.gcard.paper.v5::before { border: 1px solid rgba(255,255,255,0.9); }
.gcard.paper.v5 .gp-date, .gcard.paper.v5 .gp-brand { color: #6F8293; } .gcard.paper.v5 .gp-rule { background: #9FB2C2; }
/* 6 수채 (계절 그림은 화면에서 넣음) */
.gcard.paper.v6 { background-color: #FCFAF6; background-position: right top; background-size: 74% auto; color: #3A2E2A; }
.gcard.paper.v6 .gp-date { text-align: left; padding-left: 24px; line-height: 1.7; color: #B08A7A; }
.gcard.paper.v6 .gp-brand { color: #9A7A6A; } .gcard.paper.v6 .gp-rule { background: #D6A79A; }
/* 예전 인사 카드 규칙(.gcard q / .gcard img 의 위치·색)이 새 편지지에 섞이지 않게 */
.gcard.paper > q, .gcard.paper > .gp-leaf, .gcard.paper > .gp-rule, .gcard.paper > .gp-brush, .gcard.paper > .gp-foil { top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
.gcard.paper q { color: inherit !important; font-size: min(1.2rem, 5.2vw) !important; line-height: 1.75 !important; }
.gcard.paper .gp-leaf { width: 44px !important; }
/* 수첩: 줄마다 '고치기' 표시 + 안내 한 줄 + 창 안 지우기 확인 */
.nb-item { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.nb-item .nb-when, .nb-item .nb-txt { grid-column: 1; min-width: 0; }
.nb-item .nb-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.nb-item .nb-edit, .nb-item .nb-rm { font-size: min(0.86rem, 3.6vw); white-space: nowrap; background: none; border: 0; padding: 1px 0; border-bottom: 1px solid; }
.nb-item .nb-edit { color: #8A6D2C; border-bottom-color: rgba(201,162,74,0.6); }
.nb-item .nb-rm { color: #A4553F; border-bottom-color: rgba(164,85,63,0.45); }
.nb-tip { margin: 2px 0 6px; font-size: 0.86rem; color: #8a8173; }
.nb-ask { width: 100%; margin: 0 0 10px; font-size: 1.02rem; color: #3a2e2a; text-align: center; }
/* 큰 글씨: '말로 적기'·'손으로 적기'가 두 줄로 갈라지지 않게, 짧은 안내창도 한 줄로 */
.nb-mic, .nb-hand { white-space: nowrap; min-width: 0; font-size: min(1.1rem, 4.6vw) !important; padding-left: 10px !important; padding-right: 10px !important; }
.toast { width: max-content; max-width: 88vw; font-size: min(0.95rem, 4.2vw) !important; word-break: keep-all; text-align: center; }
/* 그해 오늘 '나는 그때' 고치기·지우기 */
.mine-wrap .mine { margin-bottom: 6px; }
.mine-acts { display: flex; gap: 18px; align-items: center; justify-content: flex-end; font-size: 0.92rem; }
.mine-acts .linkbtn { text-decoration: none; color: #8A6D2C; border-bottom: 1px solid rgba(201,162,74,0.6); padding: 2px 0; background: none; }
.mine-ask { color: #3a2e2a; }
/* '앱 아이콘 설치하기'는 옅은 세이지(쑥색) — 친구에게 보내기의 노란색과 구분 */
.ghost.go:not(.kakao) { background: #E3EBDF !important; color: #2F4A3C !important; border: 1px solid #C9D8C4 !important; box-shadow: none; }
.ghost.go:not(.kakao):hover { background: #D8E4D2 !important; }
/* ── 오늘의 오프닝 (미소·한결) ── */
.opn-sub { margin: 12px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: #8a8173; }
.opn-sub span { font-size: min(0.95rem, 4vw); letter-spacing: 0.06em; }
.opn-sub small { font-size: min(0.82rem, 3.5vw); letter-spacing: 0.12em; color: #A8823A; }
.opn-frame { position: relative; aspect-ratio: 4 / 5; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #E4D7BF; box-shadow: 0 10px 26px rgba(70,52,22,0.14); }
.opn-stage { position: absolute; inset: 0; }
.opn-shot { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 0.7s ease; }
.opn-shot.on { opacity: 1; animation: opnKen 7s ease-out both; }
@keyframes opnKen { from { transform: scale(1.04); } to { transform: scale(1); } }
.opn-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(20,14,6,0.3)); }
.opn-name { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 16px 18px 46px; color: #fff; background: linear-gradient(to bottom, rgba(38,26,10,0.55), rgba(38,26,10,0)); text-shadow: 0 1px 6px rgba(30,20,6,0.5); opacity: 0; transition: opacity 0.8s ease 0.4s; pointer-events: none; }
.opn-name.on { opacity: 1; }
.opn-name b { display: block; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: min(1.7rem, 7.6vw); letter-spacing: 0.06em; line-height: 1.15; }
.opn-name i { display: block; width: 28px; height: 1.5px; background: #E7C878; margin: 8px 0 6px; }
.opn-name small { font-size: min(0.78rem, 3.3vw); letter-spacing: 0.08em; }
.opn-cap { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; display: flex; justify-content: center; padding: 0 14px; pointer-events: none; }
.opn-cap span { max-width: 100%; background: rgba(28,22,14,0.62); color: #fff; font-weight: 700; font-size: min(1rem, 4.3vw); line-height: 1.6; text-align: center; padding: 8px 14px; border-radius: 6px; word-break: keep-all; text-wrap: balance; }
.opn-cap span:empty { display: none; }
.opn-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: rgba(255,255,255,0.35); }
.opn-bar i { display: block; height: 100%; width: 0; background: #E7C878; transition: width 0.25s linear; }
.opn-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(30,22,10,0.16); border: 0; cursor: pointer; padding: 0; }
.opn-play span { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 6px; background: #F9E9A8; color: #3A2E00; font-weight: 700; font-size: min(1.05rem, 4.4vw); white-space: nowrap; box-shadow: 0 6px 18px rgba(40,28,8,0.25); }
.opn-ctrl { position: absolute; top: 12px; right: 12px; z-index: 3; border: 0; border-radius: 6px; padding: 7px 12px; background: rgba(30,24,16,0.6); color: #fff; font-size: min(0.85rem, 3.6vw); white-space: nowrap; cursor: pointer; }
.opn-next { display: grid; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(201,162,74,0.45); }
.opn-next small { font-weight: 700; font-size: min(0.78rem, 3.4vw); letter-spacing: 0.12em; color: #A8823A; }
.opn-next p { margin: 0; font-family: 'Nanum Myeongjo', serif; font-weight: 700; font-size: min(1.05rem, 4.5vw); line-height: 1.5; color: #2E2618; word-break: keep-all; }
.opn-note { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: min(0.82rem, 3.5vw); color: #8a8173; word-break: keep-all; }
.opn-send { border: 0; border-radius: 6px; padding: 6px 12px; background: #F9E9A8; color: #3A2E00; font-weight: 700; font-size: min(0.85rem, 3.6vw); white-space: nowrap; cursor: pointer; }
.opn-m-desc { color: #5a5245; line-height: 1.65; word-break: keep-all; }
#opn-story { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; line-height: 1.6; padding: 12px; border: 1px solid rgba(20,20,20,0.2); border-radius: 6px; resize: vertical; }
@media (prefers-reduced-motion: reduce) { .opn-shot.on { animation: none; } }
/* ── 장마다 색 포인트 (산호·겨자·민트·라일락) ── */
:root { --c-g1: #E07A5F; --c-g2: #D9A42B; --c-g3: #3AA58A; --c-g5: #5B8FD9; --c-g4: #9C7BD3; --c-soon: #8C8C8C; }
.tabs3 button[data-tab="g1"]::before, body:not(.in-chapter) .tabs3:not(.compact) button[data-tab="g1"]::before { background: linear-gradient(to top, rgba(224,122,95,0.92) 0%, rgba(224,122,95,0.45) 42%, rgba(20,20,20,0.06) 78%) !important; }
.tabs3 button[data-tab="g2"]::before, body:not(.in-chapter) .tabs3:not(.compact) button[data-tab="g2"]::before { background: linear-gradient(to top, rgba(217,164,43,0.92) 0%, rgba(217,164,43,0.45) 42%, rgba(20,20,20,0.06) 78%) !important; }
.tabs3 button[data-tab="g3"]::before, body:not(.in-chapter) .tabs3:not(.compact) button[data-tab="g3"]::before { background: linear-gradient(to top, rgba(58,165,138,0.92) 0%, rgba(58,165,138,0.45) 42%, rgba(20,20,20,0.06) 78%) !important; }
.tabs3 button[data-tab="g4"]::before, body:not(.in-chapter) .tabs3:not(.compact) button[data-tab="g4"]::before { background: linear-gradient(to top, rgba(156,123,211,0.92) 0%, rgba(156,123,211,0.45) 42%, rgba(20,20,20,0.06) 78%) !important; }
.tabs3 button.soon::before, body:not(.in-chapter) .tabs3:not(.compact) button.soon::before { background: linear-gradient(to top, rgba(70,70,70,0.85) 0%, rgba(70,70,70,0.5) 50%, rgba(20,20,20,0.2) 100%) !important; }
.toc.toc-c:not(.opn-toc) { position: relative; }
.toc.toc-c:not(.opn-toc)::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-g1); box-shadow: 12px 0 var(--c-g2), 24px 0 var(--c-g5), 36px 0 var(--c-g3), 48px 0 var(--c-g4); transform: translateX(-27px); }
body[data-ch="g1"] { --acc: var(--c-g1); } body[data-ch="g2"] { --acc: var(--c-g2); } body[data-ch="g3"] { --acc: var(--c-g3); } body[data-ch="g5"] { --acc: var(--c-g5); } body[data-ch="g3"] { --acc: var(--c-g3); } body[data-ch="g4"] { --acc: var(--c-g4); }
body[data-ch^="g"] .ch-k { display: inline-block; background: var(--acc); color: #fff; opacity: 1; padding: 5px 12px 4px; border-radius: 999px; margin-bottom: 10px; }
body[data-ch^="g"] .label { border-bottom-color: var(--acc) !important; }
body[data-ch^="g"] .label .lb-ic { background: color-mix(in srgb, var(--acc) 14%, transparent); border-radius: 50%; padding: 3px; box-sizing: border-box; }
body[data-ch^="g"] .banner.photo .b-text > span { border-bottom-color: var(--acc); border-bottom-width: 2px; }
.tabs-mini button[aria-pressed="true"] { opacity: 1; }
.tabs-mini button[data-tab="g1"][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-g1); }
.tabs-mini button[data-tab="g2"][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-g2); }
.tabs-mini button[data-tab="g3"][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-g3); }
.tabs-mini button[data-tab="g4"][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-g4); }
body.in-chapter #opening { display: none !important; }
.b-text h3 span, .b-text p span { border: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; }
.b-text h3 { text-wrap: pretty; word-break: keep-all; }
/* ── 그해 오늘 · 그날의 신문 ── */
.paper-head { margin: 34px 0 0; text-align: center; }
.paper-head .date { font-family: 'Nanum Myeongjo', serif; font-size: 1.45rem; font-weight: 800; color: var(--dark-green); letter-spacing: 0.04em; line-height: 1.4; }
.paper-head .date small { display: block; font-size: 0.95rem; font-weight: 400; color: #666; letter-spacing: 0.18em; margin-top: 4px; }
.paper-head .mood { font-family: 'Nanum Myeongjo', serif; font-size: 1.05rem; line-height: 1.85; color: #444; margin: 14px 0 0; word-break: keep-all; }
.paper-head .papers { margin: 12px 0 0; font-size: 0.92rem; color: #777; } .paper-head .papers a { white-space: nowrap; }
.paper-head .nw { white-space: nowrap; }
.dsec[data-k="history"] .rule { height: 1px; background: var(--gold); margin: 22px 0 0; position: relative; }
.dsec[data-k="history"] .rule::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--gold); opacity: 0.5; }
.dsec[data-k="history"] .field { padding: 22px 0 20px; border-bottom: 1px solid rgba(15,74,53,0.14); }
.dsec[data-k="history"] .f-name { display: flex; align-items: center; gap: 10px; font-family: 'Nanum Myeongjo', serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.28em; color: var(--leaf-deep); margin: 0 0 8px; }
.dsec[data-k="history"] .f-name::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.hl { margin: 0; } .hl + .hl { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(15,74,53,0.18); }
.hl h3 { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 1.3rem; line-height: 1.45; color: var(--dark-green); margin: 0 0 8px; word-break: keep-all; }
.hl p { margin: 0; font-size: 1.02rem; line-height: 1.8; color: #333; word-break: keep-all; }
.hl .src { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 8px 0 0; font-size: 0.9rem; color: #777; }
.hl .src b { font-weight: 500; color: #555; white-space: nowrap; } .hl .src a { white-space: nowrap; }
.dsec[data-k="history"] .foot { margin: 26px 0 0; font-size: 0.88rem; color: #888; line-height: 1.7; }
.place { padding: 26px 0 0; } .ph { margin: 0; }
.ph img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; border-radius: 12px; filter: sepia(0.12) saturate(0.95); box-shadow: 0 6px 18px rgba(60,40,10,0.14); }
.ph figcaption { padding: 12px 2px 0; }
.ph figcaption b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.1rem; color: var(--dark-green); margin-bottom: 4px; word-break: keep-all; }
.ph figcaption span { display: block; font-size: 1.02rem; line-height: 1.75; color: #333; word-break: keep-all; }
.ph figcaption small { display: block; margin-top: 6px; font-size: 0.88rem; color: #888; }
/* 그해 그곳 사진 — 눌러서 크게 보기 */
.ph-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; position: relative; cursor: pointer; border-radius: 12px; }
.ph-zoom .ph-zoom-i { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,16,8,0.46); color: #fff; font-size: 1.05rem; line-height: 36px; text-align: center; pointer-events: none; }
.modal.ph-modal { background: #000; padding: 0; }
.modal.ph-modal .modal-box { background: none; border-radius: 0; max-width: 100%; width: 100%; max-height: 100%; height: 100%; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.modal.ph-modal .modal-box .x { right: 10px; top: 6px; color: #fff; font-size: 2rem; width: 46px; height: 46px; z-index: 2; }
.ph-full { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; padding: 56px 16px 24px; box-sizing: border-box; }
.ph-full img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 2px; flex: 0 1 auto; min-height: 0; }
.ph-full p { flex: 0 0 auto; margin: 0; max-width: 680px; text-align: center; color: #f0e8d8; font-family: 'Nanum Myeongjo', serif; font-size: 1.05rem; line-height: 1.6; word-break: keep-all; }
/* 장 다섯으로 다시 나눔 (2026-10-17): 3장 몸과 마음, 4장 손과 발(g5), 5장 나의 수첩 */
.tabs3 button[data-tab="g5"], .tabs3 button[data-tab="g5"][aria-pressed="true"] { background-image: url('../img/tab-travel.jpg') !important; background-size: cover !important; background-position: center 30% !important; }
.tabs-mini button[data-tab="g5"] { background-image: url('../img/tab-travel.jpg'); background-position: center 30%; }
.tabs3 button[data-tab="g5"]::before, body:not(.in-chapter) .tabs3:not(.compact) button[data-tab="g5"]::before { background: linear-gradient(to top, rgba(91,143,217,0.92) 0%, rgba(91,143,217,0.45) 42%, rgba(20,20,20,0.06) 78%) !important; }
.tabs-mini button[data-tab="g5"][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-g5); }
/* (장이 여섯이 되어 나의 수첩도 다른 칸과 같은 크기 — 2026-10-24) */
/* PC 는 칸이 넓어서 16/7 이면 혼자 거대해진다 — 납작하게 (운영자 2026-10-20) */
.tabs3 button[data-tab="g4"] { background-position: center 55% !important; }
.tabs3 button[data-tab="g3"], .tabs3 button[data-tab="g3"][aria-pressed="true"] { background-image: url('../img/tab-health.jpg') !important; background-size: cover !important; background-position: center 40% !important; }
.tabs-mini button[data-tab="g3"] { background-image: url('../img/tab-health.jpg'); background-position: center 40%; }
.tabs3 button[data-tab="g3"]::before, body:not(.in-chapter) .tabs3:not(.compact) button[data-tab="g3"]::before { background: linear-gradient(to top, rgba(58,165,138,0.92) 0%, rgba(58,165,138,0.45) 42%, rgba(20,20,20,0.06) 78%) !important; }
.tabs-mini button[data-tab="g3"][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-g3); }
/* 운세: '조심할 것' 한 줄만 결을 달리해 눈에 들어오게 (2026-10-18) */
#fortune .fo-row.fo-care { background: #FBF6EC; margin: 0 -14px; padding: 12px 14px; }
#fortune .fo-row.fo-care b { color: #9A5B2B; }
/* 오늘의 문화: 무엇을 볼까 고르는 화면 (2026-10-18) */
.cu-lead { margin: 26px 0 16px; font-size: 1.02rem; line-height: 1.75; color: #555; word-break: keep-all; }
.cu-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cu-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 16px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-align: left; box-shadow: 0 2px 10px rgba(60,40,10,0.05); }
.cu-pick b { font-family: 'Nanum Myeongjo', serif; font-size: 1.3rem; font-weight: 800; color: var(--dark-green); line-height: 1.2; }
.cu-pick span { display: block; width: 100%; min-width: 0; font-size: 0.92rem; line-height: 1.5; color: #777; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cu-pick::after { content: ''; width: 26px; height: 1px; background: var(--gold); margin-top: 2px; }
@media (max-width: 380px) { .cu-menu { grid-template-columns: 1fr; } }
/* 들어오자마자 화면이 '튀지' 않게: 로그인 여부를 아는 데 걸리는 잠깐 동안도
그 자리를 미리 잡아 둔다. 인사말 칸과 로그인 단추 중 큰 쪽 높이로 늘 비워 둔다. (2026-10-18) */
.auth-slot { flex-basis: 100%; display: grid; align-items: center; min-height: 2.6em; }
.auth-slot > * { grid-column: 1; grid-row: 1; justify-self: start; }
.auth-slot > [hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; }
.logo-wrap img { aspect-ratio: 800 / 653; height: auto; } /* 로고가 늦게 떠도 자리가 밀리지 않게 */
html.app-installed #install-btn { display: none !important; } /* 이미 깔려 있으면 설치 단추를 아예 그리지 않는다 */
/* 오늘의 마음 한 줄 — 숨 고르기 (2026-10-18) */
.mn-breath { margin-top: 4px; padding-top: 22px; text-align: center; } /* 윗선은 .cu-block 이 이미 긋는다 */
.mn-say { margin: 10px 0 18px; font-size: 1.05rem; line-height: 1.7; color: #555; word-break: keep-all; }
.mn-ring { width: min(52vw, 190px); height: min(52vw, 190px); margin: 0 auto 20px; border-radius: 50%; border: 2px solid var(--line); background: #FBF8F0; display: grid; place-items: center; font-family: 'Nanum Myeongjo', serif; font-size: 2.6rem; color: var(--dark-green); transform: scale(0.72); transition: transform 1s linear, background-color 1s linear, border-color 1s linear; }
.mn-ring.in { transform: scale(1); background: #EAF4EC; border-color: var(--leaf-deep); }
.mn-ring.hold { transform: scale(1); background: #FFF8E3; border-color: var(--gold); }
.mn-ring.out { transform: scale(0.72); background: #FBF8F0; border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .mn-ring { transition: none; } }
/* 여행 회화책 — 나라말 · 상황 고르고 문장 듣기 (2026-10-18) */
.pb { padding: 26px 0 8px; }
.pb-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.pb-pick button { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.pb-pick button b { font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; font-weight: 800; color: var(--dark-green); }
.pb-pick button span { font-size: 0.86rem; color: #888; word-break: keep-all; }
.pb-pick button[aria-pressed="true"] { background: var(--warm); border-color: var(--warm-line); }
.pb-pick button[aria-pressed="true"] b, .pb-pick button[aria-pressed="true"] span { color: var(--warm-ink); }
.pb-scenes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pb-scenes button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 1rem; color: #444; }
.pb-scenes button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: #fff; font-weight: 700; }
.pb-scene-sub { margin: 4px 0 0; font-size: 0.95rem; color: #888; }
.pb-tip { margin: 10px 0 0; padding: 10px 12px; background: #FBF6EC; border-radius: 8px; font-size: 0.95rem; line-height: 1.6; color: #6b4e22; word-break: keep-all; }
.pb-list { margin-top: 6px; }
.pb-row { padding: 18px 0; border-top: 1px solid var(--line); }
.pb-ko { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: #1f1f1f; word-break: keep-all; }
.pb-t { margin: 0 0 4px; font-family: 'Nanum Myeongjo', serif; font-size: 1.45rem; line-height: 1.5; color: var(--dark-green); word-break: keep-all; }
.pb-r { margin: 0 0 12px; font-size: 1.05rem; color: #777; word-break: keep-all; }
.pb-btns { display: flex; gap: 8px; }
.pb-btns .btn { flex: 1; min-width: 0; padding: 11px 8px; font-size: 1rem; }
@media (max-width: 380px) { .pb-pick { grid-template-columns: 1fr; } }
/* 내 고향 둘러보기 (2026-10-18) */
.ht-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 26px 0 18px; }
.ht-tabs button { padding: 13px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.05rem; font-weight: 700; color: var(--dark-green); }
.ht-tabs button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: #fff; }
.ht-lead { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.75; color: #555; word-break: keep-all; }
.ht-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ht-form input { flex: 1 1 100%; min-width: 0; padding: 14px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 1.1rem; background: #fff; }
.ht-form .btn { flex: 1 1 0; min-width: 0; padding: 13px 8px; font-size: 1.02rem; }
.ht-mic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ht-mic svg { flex: 0 0 auto; }
.ht-view { position: relative; border-radius: 12px; overflow: hidden; background: #EFEDE6; box-shadow: 0 6px 18px rgba(60,40,10,0.14); }
.ht-view #ht-road { width: 100%; height: 0; }
.ht-view #ht-road.on { height: min(62vh, 420px); }
.ht-empty { margin: 0; padding: 48px 20px; text-align: center; font-size: 1.02rem; line-height: 1.7; color: #888; word-break: keep-all; }
/* 로드뷰 아래 큰 단추 넷 — 언제나 2×2: 위 = 방향 돌리기, 아래 = 걷기 (짝이 섞이지 않게) */
.ht-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ht-pad[hidden] { display: none; }
.ht-pad button { min-width: 0; padding: 14px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--dark-green); font-size: min(1.05rem, 4.5vw); font-weight: 700; white-space: nowrap; touch-action: manipulation; }
.ht-pad button:active { background: #F2EFE6; }
.ht-tip { margin: 12px 0 0; font-size: 0.96rem; line-height: 1.7; color: #777; word-break: keep-all; }
.ht-by { margin-top: 8px; font-size: 0.84rem; color: #999; }
.ht-soon { padding: 40px 20px; text-align: center; background: #F7F4ED; border-radius: 12px; }
.ht-soon p { margin: 0 0 8px; font-size: 1.08rem; color: #555; word-break: keep-all; }
.ht-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ht-regions button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 1rem; color: #444; }
.ht-regions button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: #fff; font-weight: 700; }
/* 장소는 권역 아래 작은 줄 — 알약을 두 줄로 쌓으면 어수선해서 가는 금빛 밑줄로 */
.ht-spots { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 14px; }
.ht-spots button { padding: 4px 1px 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-size: 1rem; color: #8A8273; }
.ht-spots button[aria-pressed="true"] { color: var(--dark-green); font-weight: 700; border-bottom-color: var(--gold, #C9A227); }
.ht-cam { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #141414; box-shadow: 0 6px 18px rgba(60,40,10,0.14); margin-top: 6px; }
.ht-cam iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ht-cap { margin: 12px 0 0; }
.ht-cap b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; color: var(--dark-green); }
.ht-cap span { display: block; margin-top: 3px; font-size: 1rem; line-height: 1.65; color: #555; word-break: keep-all; }
.ht-origin { display: inline-block; margin-top: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-family: ui-monospace, Menlo, monospace; font-size: 0.95rem; color: #3A2E00; word-break: break-all; }
/* 윗줄에 .b-text p span 을 font:inherit !important 로 묶어 둔 규칙이 있어 여기도 !important 가 필요하다 */
.b-text p span.b-eg { display: block !important; margin-top: 4px; font-size: 0.84em !important; opacity: 0.82; word-break: keep-all; }
/* 오늘의 한 권 (2026-10-18) */
.bk { margin-top: 26px; }
.bk-title { margin: 6px 0 4px; font-family: 'Nanum Myeongjo', serif; font-size: 1.6rem; line-height: 1.35; color: var(--dark-green); word-break: keep-all; }
.bk-who { margin: 0 0 18px; font-size: 1rem; color: #6b6354; }
.bk-who span { display: block; margin-top: 2px; font-size: 0.92rem; color: #9a938a; }
.bk-blurb { margin: 0; font-size: 1.06rem; line-height: 1.8; color: #2d2a24; word-break: keep-all; }
.bk-scene { margin: 0; font-size: 1.04rem; line-height: 1.8; color: #3d382f; word-break: keep-all; }
.bk-why { margin: 20px 0 0; padding: 14px 16px; border-left: 2px solid var(--gold); background: #FAF7EF; font-size: 1.04rem; line-height: 1.7; color: #4a4134; word-break: keep-all; }
.bk-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bk-go .btn { flex: 1 1 160px; min-width: 0; text-align: center; text-decoration: none; }
.bk-note { margin-top: 14px; }
/* 이번 주, 무엇을 볼까 (2026-10-18) */
.sw-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 26px 0 16px; }
/* 네 칸짜리(여행)는 두 줄로 — 큰 글씨에서도 '해외 골프'가 안 잘리게 */
.sw-tabs.t4 { grid-template-columns: repeat(2, 1fr); }
.trv-band { width: 100%; aspect-ratio: 16 / 5; background: center / cover no-repeat #E9DFC9; border-radius: 12px; margin: 4px 0 2px; box-shadow: 0 6px 18px rgba(70,52,22,0.12); }
.sw-tip { margin: 6px 0 0; font-size: 0.96rem; line-height: 1.65; color: #6b6354; border-left: 2px solid var(--gold, #C9A24A); padding-left: 10px; word-break: keep-all; }
.sw-tabs button { padding: 12px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.04rem; font-weight: 700; color: var(--dark-green); }
.sw-tabs button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: #fff; }
.sw-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sw-regions button { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.98rem; color: #444; }
.sw-regions button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: #fff; font-weight: 700; }
.sw-row { display: block; }
.sw-row p { margin: 0 0 4px; }
.sw-row .linkbtn { display: inline-block; margin-top: 8px; }
/* 소제목 — 단추도 초록이라 구분이 약해서 연노랑 밑줄로 가른다 (운영자 2026-10-20) */
.sw-row b { display: inline; width: auto; font-family: 'Nanum Myeongjo', serif; font-size: 1.18rem; line-height: 1.6; color: #1D1B16; word-break: keep-all;
background: linear-gradient(transparent 62%, #F6E6A8 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sw-meta { margin: 4px 0 8px; font-size: 0.96rem; line-height: 1.6; color: #6b6354; word-break: keep-all; }
/* 칸마다 띠 사진 — 자리를 미리 잡아 두어(aspect-ratio) 늦게 와도 아래가 밀리지 않는다 (2026-10-20) */
.sw-shot { display: block; width: 100%; aspect-ratio: 16 / 5; object-fit: cover; margin: -2px 0 14px; border-radius: 3px; background: #EFEAE0; }
/* 오늘의 몸 한 가지 (2026-10-19) */
.bd-line { font-family: 'Nanum Myeongjo', serif; font-size: 1.5rem; line-height: 1.5; margin: 2px 0 14px; color: #141414; word-break: keep-all; }
.bd-note { margin: 0; font-size: 1.04rem; line-height: 1.85; color: #3d382f; word-break: keep-all; }
.bd-todo { margin: 0; padding: 14px 16px; border-left: 2px solid var(--gold); background: #FAF7EF; font-size: 1.05rem; line-height: 1.7; color: #4a4134; word-break: keep-all; }
.bd-tip { margin: 16px 0 0; padding-left: 14px; border-left: 2px solid #E4DCC8; font-size: 0.99rem; line-height: 1.75; color: #6b6354; word-break: keep-all; }
.bd-foot { margin-top: 22px; }
/* 담아 두기 (2026-10-19) */
.sv { margin: 26px 0 4px; display: flex; justify-content: center; }
.sv-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border: 1px solid var(--gold, #C9A24A); border-radius: 6px; background: #fff; color: #6b5a2a; font-size: 1rem; font-weight: 600; cursor: pointer; word-break: keep-all; }
.sv-btn[aria-pressed="true"] { background: #F9E9A8; border-color: #E2C96E; color: #3A2E00; }
.sv-ic { font-size: 1.1em; line-height: 1; }
.sv-list { display: flex; flex-direction: column; gap: 10px; }
.nb-empty { margin: 4px 0 0; font-size: 1rem; line-height: 1.75; color: #6b6354; word-break: keep-all; }
.sv-item { border: 1px solid #E8E0CD; border-radius: 10px; background: #fff; overflow: hidden; }
.sv-item.open { border-color: var(--gold, #C9A24A); }
.sv-head { display: block; width: 100%; min-height: 56px; padding: 13px 16px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.sv-head strong { display: block; margin-top: 5px; font-weight: 600; font-size: 1.04rem; line-height: 1.6; color: #2b2620; word-break: keep-all; }
.sv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sv-tag { color: #6b5a2a; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.sv-tag::after { content: ''; display: inline-block; width: 1px; height: 0.8em; margin-left: 8px; background: #DCD2BC; vertical-align: -1px; }
.sv-date { color: #8a8273; font-size: 0.86rem; white-space: nowrap; }
.sv-full { padding: 2px 16px 16px; border-top: 1px solid #F0EADA; }
.sv-p { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.85; color: #3d382f; word-break: keep-all; white-space: pre-wrap; }
.sv-fig { margin: 12px 0 0; }
.sv-fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.sv-rm { margin: 18px 0 0; padding: 10px 16px; min-height: 44px; border: 1px solid #E0D8C6; border-radius: 6px; background: #FAF7EF; color: #7a7263; font-size: 0.95rem; cursor: pointer; }
/* 읽어 드려요 — 장 맨 위의 음성 안내 (2026-10-19) */
.rd { margin: 0 0 22px; }
.rd-face { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid #E8E0CD; border-radius: 14px; background: linear-gradient(100deg, #FFFDF7 0%, #F6F0E0 100%); box-shadow: 0 6px 18px rgba(70,52,22,0.08); cursor: pointer; font: inherit; text-align: left; }
.rd-ph { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; background: 46% 26% / 170% no-repeat #E9DFC9; box-shadow: 0 2px 8px rgba(70,52,22,0.18); }
/* 진행자 셋을 동그랗게 겹쳐 둔다 — '여러 사람이 코너마다 맡는구나'로 보이게 (운영자 2026-10-20) */
.rd-phs { flex: 0 0 auto; display: flex; align-items: center; }
.rd-phs i { display: block; width: 48px; height: 48px; border-radius: 50%; background: center / cover no-repeat #E9DFC9;
border: 2px solid #FFFDF7; box-shadow: 0 2px 8px rgba(70,52,22,0.18); }
.rd-phs i + i { margin-left: -18px; }
.rd-face.playing .rd-phs i { box-shadow: 0 0 0 2px #F9E9A8, 0 2px 10px rgba(70,52,22,0.22); }
@media (max-width: 380px) { .rd-phs i { width: 42px; height: 42px; } .rd-phs i + i { margin-left: -16px; } }
.rd-face.playing .rd-ph { box-shadow: 0 0 0 3px #F9E9A8, 0 2px 10px rgba(70,52,22,0.22); }
.rd-tx { flex: 1 1 120px; min-width: 0; }
.rd-tx b { display: block; font-size: 1.08rem; color: #2b2620; line-height: 1.5; word-break: keep-all; }
.rd-tx small { display: block; margin-top: 3px; font-size: 0.92rem; color: #7a7263; line-height: 1.55; word-break: keep-all; }
.rd-go { flex: 0 0 auto; align-self: center; padding: 9px 14px; min-height: 42px; display: inline-flex; align-items: center; border-radius: 8px; background: #F9E9A8; color: #3A2E00; font-size: 0.95rem; font-weight: 700; white-space: nowrap; }
.rd-off .rd-face { opacity: 0.62; }
.rd-off .rd-go { background: #EFEADB; color: #8a8273; }
@media (max-width: 430px) { .rd-face { flex-wrap: wrap; } .rd-go { order: 3; width: 100%; justify-content: center; } }
/* 지금 읽고 있는 코너 카드 */
.rd-now { outline: 2px solid var(--gold, #C9A24A); outline-offset: 3px; border-radius: 12px; }
/* 듣는 동안 화면 아래에 붙는 띠 */
.rd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'ph tx x' 'b b b'; align-items: center; gap: 8px 10px; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); background: #262119; color: #F6F1E6; box-shadow: 0 -4px 18px rgba(0,0,0,0.22); }
.rd-bar-ph { grid-area: ph; }
.rd-bar-tx { grid-area: tx; }
.rd-bar-x { grid-area: x; }
.rd-bar-btns { grid-area: b; display: flex; gap: 8px; }
.rd-bar-btns .rd-bar-b { flex: 1 1 0; justify-content: center; text-align: center; }
.rd-bar-ph { width: 38px; height: 38px; border-radius: 50%; background: center / cover no-repeat #4a4134; }
.rd-bar-tx { min-width: 0; }
.rd-bar-tx b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.4; word-break: keep-all; }
.rd-bar-tx small { display: block; font-size: 0.82rem; color: #C3B9A5; }
.rd-bar-b { min-height: 44px; padding: 8px 13px; border: 1px solid #6a6050; border-radius: 8px; background: transparent; color: #F6F1E6; font: inherit; font-size: 0.93rem; cursor: pointer; white-space: nowrap; }
.rd-bar-x { min-width: 44px; min-height: 42px; border: 0; background: transparent; color: #C3B9A5; font-size: 1.1rem; cursor: pointer; }
body.rd-on { padding-bottom: 124px; }
/* ── 오마주 소개 배너 (커버와는 따로 선 한 단) — 운영자 2026-10-20 ──
아래로 내려가면 끝까지 크림색뿐이라 숨 쉴 데가 없다. 여기만 찬 색으로 틔운다. */
/* 좌우는 커버와 같은 폭으로 — 안쪽 여백을 지워 글 칸 끝까지 꽉 채운다 (운영자 2026-10-20) */
.intro { position: relative; margin: 34px 0 0; padding: 46px 26px 48px; overflow: hidden; border-radius: 16px;
text-align: center; background: #123a57 url('../img/intro.jpg') center/cover no-repeat; }
/* 글씨가 구름 위에 와도 읽히게, 파란 결은 살린 채로 살짝 덮는다 */
.intro::before { content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,34,62,0.20) 0%, rgba(8,34,62,0.40) 55%, rgba(8,34,62,0.46) 100%); }
.intro > * { position: relative; }
.intro-lede { margin: 0 0 14px; font-family: 'Nanum Myeongjo', serif; font-weight: 700;
font-size: 1.56rem; line-height: 1.45; color: #fff; word-break: keep-all; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
/* 둘째 줄은 손글씨(나눔손글씨 펜) — 대표 2026-10-24 시안. 펜 글씨는 몸이 작아 크게 잡는다 */
.intro-sub { margin: 0; font-family: 'Nanum Pen Script', 'Nanum Myeongjo', serif; font-size: min(2.1rem, 8.4vw); line-height: 1.32;
color: #fff; word-break: keep-all; text-shadow: 0 2px 10px rgba(0,30,60,0.6); }
/* 오른쪽 아래 영문 한 줄 — 잡지 판권처럼. 그림과 흰 글씨만 있으면 허전하다 (운영자 2026-10-20) */
/* 대표 2026-10-24: 영문은 배너 맨 아래 오른쪽에 딱 붙여 — 판권처럼 */
.intro { padding-bottom: 64px; }
.intro-mast { position: absolute !important; right: 20px; bottom: 14px; margin: 0; text-align: right; font-family: 'Cormorant Garamond', serif;
font-weight: 600; font-size: min(0.78rem, 3.4vw); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
color: rgba(255,255,255,0.88); text-shadow: 0 1px 6px rgba(0,30,60,0.5); }
/* 좌우 여백은 CONTENTS 칸과 똑같이 — 휴대폰도 PC 도 같은 자리에서 시작한다 (운영자 2026-10-20) */
@media (max-width: 768px) { .intro { margin: 12px 0 0; padding: 40px 22px 60px; } } /* 대표 2026-10-25: 커버→배너 = 배너→OPENING (둘 다 36px) */
@media (max-width: 420px) { .intro-lede { font-size: min(1.42rem, 6.1vw); } }
/* 대표 2026-10-24: 두 줄 모두 한 줄씩 떨어지게 — 휴대폰은 화면 폭에 맞춰 글자 크기를 정한다(큰 글씨에서도) */
/* ── 경제·이슈 칸 바탕 (운영자 2026-10-20) ──
집안 방식 그대로 — 오늘 PLAY·운세·한 끼처럼 사진 위에 짙은 초록 막, 글씨는 흰색.
그 칸들은 글이 아래 두 줄뿐이라 아래만 덮으면 되지만, 여기는 줄이 꽉 차므로 고르게 덮는다.
사진은 운영자가 주문해 받은 탁자 정물 두 장 — 경제는 따뜻한 오크를 옆에서, 이슈는 찬 돌판을 위에서. */
.mk-card, #is-sec .is-card { position: relative; overflow: hidden; color: #fff;
border: 0; box-shadow: 0 8px 24px rgba(10,45,32,0.24); }
.mk-card { background: linear-gradient(to top, rgba(30,20,11,0.86) 0%, rgba(30,20,11,0.62) 55%, rgba(30,20,11,0.30) 100%),
url('../img/bg-econ.jpg') center 42% / cover no-repeat; padding: 10px 20px 14px; }
#is-sec .is-card { background: linear-gradient(to top, rgba(10,45,32,0.88) 0%, rgba(10,45,32,0.66) 55%, rgba(10,45,32,0.34) 100%),
url('../img/bg-issue.jpg') center 35% / cover no-repeat; padding: 8px 20px 14px; }
.mk-card::before { display: none; }
.mk-item, .mk-item:last-child, .mk-item:nth-last-child(-n+2), #is-sec .is-item { border-bottom-color: rgba(255,255,255,0.16); }
.mk-item:last-child, #is-sec .is-item:last-child { border-bottom-color: transparent; }
.mk-card .mk-l, .mk-card .mk-item .mk-l { color: rgba(255,255,255,0.88) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.mk-card .mk-v, .mk-card .mk-item .mk-v { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.40); }
.mk-card .mk-c, .mk-card .mk-item .mk-c { color: rgba(255,255,255,0.78); }
.mk-card .mk-c.up { color: #FFB6A2; } .mk-card .mk-c.down { color: #A8D4F6; }
.mk-foot { color: rgba(255,255,255,0.62); }
#is-sec .is-cat { color: #F2CE7E; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.10em; }
#is-sec .is-src { color: rgba(255,255,255,0.64); }
#is-sec .is-src:not(:empty)::before { color: rgba(242,206,126,0.6); }
#is-sec .is-line { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.32); }
#is-sec .is-item a:active .is-line { opacity: 0.6; }
#is-sec .is-foot { color: rgba(255,255,255,0.60); }
/* ── 오늘의 시사 상식 카드도 같은 바탕으로 (운영자 2026-10-20: 바탕이 어울린다, 글씨만 뒤집자) ──
돌판 사진 + 짙은 초록 막, 본문은 흰색, 소제목은 진한 노랑. */
#issue-card .is-card { position: relative; overflow: hidden; color: #fff;
background: linear-gradient(to top, rgba(10,45,32,0.90) 0%, rgba(10,45,32,0.80) 50%, rgba(10,45,32,0.66) 100%),
url('../img/bg-issue.jpg') center 35% / cover no-repeat;
box-shadow: 0 8px 24px rgba(10,45,32,0.24); padding: 24px 22px 22px; }
#issue-card .cu-kind { color: #F2CE7E; }
#issue-card .is-term { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.35); }
#issue-card .is-mean { color: #F5D98A; }
#issue-card .is-exp { color: rgba(255,255,255,0.94); text-shadow: 0 1px 3px rgba(0,0,0,0.30); }
#issue-card .is-sub { color: #F2CE7E; letter-spacing: 0.06em; }
#issue-card .is-ex { color: #fff; border-left-color: #F2CE7E; text-shadow: 0 1px 3px rgba(0,0,0,0.30); }
/* ── 카카오·네이버로 시작하기 (운영자 2026-10-21) ──
두 회사가 정해 둔 색을 그대로 쓴다 — 사람들이 색으로 알아보고, 심사에서도 이 색을 본다. */
.modal-actions.social { display: grid; grid-template-columns: 1fr; gap: 10px; }
.btn.kakao, .btn.naver { display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; min-height: 54px; border: 0; border-radius: 10px; font-size: 1.1rem; font-weight: 700; }
.btn.kakao { background: #FEE500; color: #191600; }
.btn.naver { background: #03C75A; color: #fff; }
.btn.kakao::before, .btn.naver::before { content: ''; width: 20px; height: 20px; flex: none;
background: currentColor; -webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
/* 말풍선(카카오) · N(네이버) 을 글자색으로 찍는다 — 그림 파일을 따로 두지 않으려고 */
.btn.kakao::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.3c0 2.6 1.7 4.8 4.3 6.1l-1.1 4 4.3-2.4c.6.1 1.2.1 1.7.1 5.1 0 9.2-3.3 9.2-7.8S17.1 3 12 3z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.3c0 2.6 1.7 4.8 4.3 6.1l-1.1 4 4.3-2.4c.6.1 1.2.1 1.7.1 5.1 0 9.2-3.3 9.2-7.8S17.1 3 12 3z'/%3E%3C/svg%3E"); }
.btn.naver::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h5l4.2 6.4V4H19v16h-5l-4.2-6.4V20H5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h5l4.2 6.4V4H19v16h-5l-4.2-6.4V20H5z'/%3E%3C/svg%3E"); }
.btn.kakao:active, .btn.naver:active { filter: brightness(0.94); }
@media (min-width: 560px) { .modal-actions.social { grid-template-columns: 1fr 1fr; } }
/* ── 가입 화면에는 '무료'를 또렷하게 (운영자 2026-10-21) ──
돈을 받는 줄 알고 망설이다 그냥 나가는 일이 없게, 제목 옆과 바로 밑 한 줄에 못 박는다. */
.modal-box h2 .free-tag { display: inline-block; vertical-align: 0.18em; margin-left: 8px;
background: var(--dark-green, #1F5A43); color: #FFF8E3; font-family: 'Noto Sans KR', sans-serif;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; }
.modal-box .free-line { margin: 6px 0 14px; font-size: 1rem; color: var(--dark-green, #1F5A43); font-weight: 700; }
/* 카카오·네이버 단추 위 작은 머리글 (운영자 2026-10-21: 간편 가입이라고 표시해 달라) */
.modal-box .social-label { margin: 18px 0 8px; font-family: 'Nanum Myeongjo', serif; font-weight: 700;
font-size: 0.95rem; letter-spacing: 0.1em; color: var(--dark-green, #1F5A43); }
/* ── 로그인·가입 한 장 (운영자 디자인, 2026-10-21) ──
창이 아니라 화면을 꽉 채운다. 배경은 --gate-bg 한 줄만 바꾸면 사진으로 갈아 끼운다.
(바깥 사진 주소를 걸지 않는다 — 끊기면 화면이 깨진다.) */
.modal.gate-lux { padding: 0; align-items: stretch; background: #0B0B0B; }
.gate-lux .modal-box { max-width: none; width: 100%; max-height: none; min-height: 100%;
border-radius: 0; padding: 0; overflow: auto; color: var(--ivory, #F4F1EA);
background: var(--gate-bg, url('../img/login-bg.jpg') center 30% / cover no-repeat), #1B1410; }
.gate-lux .modal-box::before { content: ''; position: absolute; inset: 0;
/* 따뜻한 사진이라 초록 막을 얹으면 올리브로 죽는다(경제 칸에서 배운 것) → 따뜻한 암갈색으로 */
background: linear-gradient(to bottom, rgba(30,20,12,0.06) 0%, rgba(26,18,11,0.52) 48%, rgba(18,13,8,0.93) 100%); }
.gate-lux .modal-box > *:not(.x) { position: relative; }
.gate-lux .x { position: absolute; left: auto; right: 14px; top: 10px; color: rgba(244,241,234,0.8); font-size: 2rem; z-index: 3; }
.gate-in { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 480px;
margin: 0 auto; padding: 40px 24px 24px; min-height: 100%;
display: flex; flex-direction: column; justify-content: flex-end; }
.gate-logo { margin: 0 0 14px; font-family: 'Nanum Myeongjo', serif; font-size: min(2.1rem, 32px + 1vw); font-weight: 700; letter-spacing: 0.1em; color: #F4F1EA; }
.gate-logo span { -webkit-text-emphasis: filled circle #19B46B; text-emphasis: filled circle #19B46B; }
.gate-head { margin: 0 0 12px; font-family: 'Nanum Myeongjo', serif; font-weight: 400;
font-size: min(1.62rem, 26px + 1.2vw); line-height: 1.38; color: #F4F1EA; word-break: keep-all; }
.gate-desc { margin: 0 0 20px; font-size: min(0.92rem, 14px + 0.9vw); font-weight: 300; line-height: 1.62;
color: rgba(244,241,234,0.8); word-break: keep-all; }
.gate-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.gbtn { position: relative; width: 100%; min-height: 56px; padding: 16px 18px 16px 52px; border: 0; border-radius: 4px;
font-family: 'Noto Sans KR', sans-serif; font-size: min(1rem, 15px + 0.8vw); font-weight: 500; line-height: 1.35;
display: flex; align-items: center; justify-content: center; text-align: center; transition: transform .15s; }
.gbtn:active { transform: scale(0.98); }
.gbtn.kakao { background: #FEE500; color: #191919; }
.gbtn.naver { background: #03C75A; color: #fff; }
.gbtn i { position: absolute; left: 20px; width: 20px; height: 20px; background: currentColor;
-webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center; }
.gbtn.kakao i { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.3c0 2.6 1.7 4.8 4.3 6.1l-1.1 4 4.3-2.4c.6.1 1.2.1 1.7.1 5.1 0 9.2-3.3 9.2-7.8S17.1 3 12 3z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.3c0 2.6 1.7 4.8 4.3 6.1l-1.1 4 4.3-2.4c.6.1 1.2.1 1.7.1 5.1 0 9.2-3.3 9.2-7.8S17.1 3 12 3z'/%3E%3C/svg%3E"); }
.gbtn.naver i { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h5l4.2 6.4V4H19v16h-5l-4.2-6.4V20H5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h5l4.2 6.4V4H19v16h-5l-4.2-6.4V20H5z'/%3E%3C/svg%3E"); }
.gate-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 13px; margin: 0 0 16px; }
.gate-links button { background: none; border: 0; padding: 6px 2px; font-family: 'Noto Sans KR', sans-serif;
font-size: min(0.84rem, 12px + 0.5vw); font-weight: 300; color: rgba(244,241,234,0.72); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.gate-links em { width: 1px; height: 11px; background: rgba(244,241,234,0.25); }
.gate-note { margin: 0 0 8px; text-align: center; font-size: min(0.8rem, 11.5px + 0.5vw); font-weight: 300; color: rgba(244,241,234,0.6); }
.gate-install { width: 100%; min-height: 54px; padding: 16px; background: transparent;
border: 1px solid rgba(244,241,234,0.35); color: #F4F1EA; border-radius: 4px;
font-family: 'Noto Sans KR', sans-serif; font-size: min(0.95rem, 14px + 0.8vw); letter-spacing: 0.05em; }
@media (max-width: 400px) { .gbtn { padding-left: 48px; } }
/* ── 가입 마무리 한 장 (운영자 2026-10-21) ──
로그인 화면과 같은 '사진 한 장' 꼴이되 반대로 간다 — 로그인은 어둡게, 여기는 환하게.
가입이 끝나 문이 열리는 자리라서다. 사진 아래쪽이 리넨뿐이라 크림색으로 자연스럽게 이어진다. */
.modal.wel-lux { padding: 0; align-items: stretch; background: #E9E4D8; }
.wel-lux .modal-box { max-width: 520px; width: 100%; max-height: none; min-height: 100%;
margin: 0 auto; border-radius: 0; padding: 0; overflow: auto;
background: #F4F1EA url('../img/welcome-bg.jpg') center top / 100% auto no-repeat; }
.wel-lux .x { position: absolute; left: auto; right: 12px; top: 8px; z-index: 3; color: #6A6253; }
.wel-in { position: relative; z-index: 2; box-sizing: border-box; padding: 0 24px 30px;
/* 사진에서 찻잔이 놓인 위쪽은 비워 두고, 글이 시작되는 자리부터 크림색으로 덮는다 */
background: linear-gradient(to bottom, rgba(244,241,234,0) 0, rgba(244,241,234,0.70) 46vw, #F4F1EA 62vw); }
.wel-in::before { content: ''; display: block; height: min(58vw, 230px); }
.wel-in h2 { margin: 0 0 6px; font-family: 'Nanum Myeongjo', serif; font-weight: 700;
font-size: min(1.45rem, 23px + 0.8vw); color: var(--dark-green, #1F5A43); word-break: keep-all; }
.wel-in > p { margin: 0 0 18px; font-size: min(0.95rem, 15px + 0.5vw); color: #5B5446; }
/* 마무리 화면 안쪽 — 칸 테두리 대신 가는 금빛 밑줄과 명조체로 (운영자 2026-10-21:
"환영합니다"는 좋은데 그 밑이 딱딱하다). 다른 창의 입력칸은 건드리지 않게 .wel-lux 안으로만 묶는다. */
.wel-lux .field { margin: 0 0 20px; }
.wel-lux .field > label { font-family: 'Nanum Myeongjo', serif; font-weight: 700;
font-size: min(0.9rem, 14px + 0.45vw); letter-spacing: 0.1em; color: var(--dark-green, #1F5A43); margin-bottom: 2px; }
.wel-lux .field input, .wel-lux .field select {
padding: 11px 2px; background: transparent; border: 0; border-bottom: 1px solid rgba(201,162,74,0.6);
border-radius: 0 !important; box-shadow: none;
font-family: 'Nanum Myeongjo', serif; font-size: min(1.12rem, 17px + 0.55vw); color: #2A2520; }
.wel-lux .field input::placeholder { color: #A79E8C; font-family: 'Noto Sans KR', sans-serif; font-size: 0.9em; }
.wel-lux .field input:focus, .wel-lux .field select:focus { outline: none; border-bottom-color: var(--dark-green, #1F5A43); }
.wel-lux .field select { -webkit-appearance: none; appearance: none; padding-right: 22px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F5A43' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 2px center; background-size: 12px 8px; }
.wel-lux .field .hint { margin-top: 7px; font-size: min(0.8rem, 12px + 0.35vw); color: #8C8373; }
.wel-lux .seg2 { gap: 10px; margin-top: 4px; }
.wel-lux .seg2 button { padding: 12px 0; border-radius: 2px !important; border: 1px solid rgba(201,162,74,0.6);
background: transparent; font-family: 'Nanum Myeongjo', serif; font-weight: 400;
font-size: min(1.05rem, 16px + 0.45vw); color: #4A4337; }
.wel-lux .seg2 button[aria-pressed="true"] { background: var(--dark-green, #1F5A43);
border-color: var(--dark-green, #1F5A43); color: #F4F1EA; }
.wel-lux .chk { margin: 18px 0 22px; font-size: min(0.86rem, 13px + 0.4vw); color: #5B5446; line-height: 1.6; }
.wel-lux .chk a { color: var(--dark-green, #1F5A43); }
.wel-lux .modal-actions .btn.warm { min-height: 56px; border-radius: 3px !important;
font-family: 'Nanum Myeongjo', serif; font-weight: 700; letter-spacing: 0.1em;
font-size: min(1.08rem, 16px + 0.5vw); }
.wel-lux .field > label .lab-sub { font-family: 'Noto Sans KR', sans-serif; font-weight: 300;
font-size: 0.78em; letter-spacing: 0; color: #8C8373; }
/* 커버 사진 위의 '나의 정보 · 로그아웃' 이 밑줄만 그은 흰 글씨라 사진에 묻혀
눌리지 않는 글자처럼 보였다 (운영자 2026-10-21: "버튼이 활성이 안 되는데").
가는 흰 테두리와 옅은 검은 바탕을 둘러 눌러도 되는 것임을 알아보게 하고, 탭 자리도 넓힌다. */
.chip-links { gap: 8px; flex-wrap: nowrap; }
.chip-links button, .chip-links a { white-space: nowrap; }
.chip-links > span { display: none; } /* 가운데 점은 테두리가 생겨 필요 없다 */
.chip-links button, .chip-links a:not([hidden]) {
padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center;
border: 1px solid rgba(255,255,255,0.55); border-radius: 3px;
background: rgba(20,24,20,0.3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
color: #fff; text-decoration: none; font-size: min(0.92rem, 14px + 0.4vw);
text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.chip-links a:not([hidden])::before { content: none; }
/* 판권 위 소개 문단 — 사람이 읽어도 자연스럽게, 검색·AI 가 '오마주가 무엇인지' 를 글로 읽게.
화면은 JS 로 그려져 크롤러 눈에는 거의 빈 페이지였다 (2026-10-21). */
.co-about { max-width: 34em; margin: 0 auto 16px; padding: 0 4px;
font-size: min(0.84rem, 12.5px + 0.4vw); line-height: 1.85; color: #8e887c;
word-break: keep-all; text-align: center; }
/* 나의 수첩 — 달력 단추를 사진 띠로 (운영자 2026-10-21: 배너가 좀 커야 할 것 같다).
집안 공식 그대로: 고화질 사진 + 짙은 막 + 흰 명조. 따뜻한 월넛 사진이라 막도 암갈색. */
.nb-calban { position: relative; display: block; width: 100%; min-height: 104px; padding: 22px 20px;
border: 0; border-radius: 14px; overflow: hidden; text-align: left; margin: 0 0 14px;
background: url('../img/nb-cal.jpg') center 58% / cover no-repeat, #1E1409; color: #F4F1EA; }
.nb-calban::before { content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(26,17,9,0.78) 0%, rgba(26,17,9,0.62) 48%, rgba(26,17,9,0.12) 100%); }
.nb-calban .cb-in { position: relative; display: block; }
.nb-calban b { display: block; font-family: 'Nanum Myeongjo', serif; font-weight: 700;
font-size: min(1.28rem, 20px + 0.7vw); letter-spacing: 0.02em; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.nb-calban small { display: block; margin-top: 5px; font-size: min(0.86rem, 13px + 0.4vw);
color: rgba(244,241,234,0.78); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.nb-calban i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(180deg);
font-style: normal; font-size: 1.1rem; color: rgba(244,241,234,0.8); transition: transform .2s; }
.nb-calban[aria-expanded="false"] i { transform: translateY(-50%); }
/* 메모가 쌓이면 목록이 길게 늘어져 지저분하다 → 최근 셋만, 나머지는 눌러서 */
.nb-more { display: block; width: 100%; margin: 6px 0 0; padding: 11px; background: none;
border: 1px solid var(--line, #E3DDCE); border-radius: 6px; color: var(--dark-green, #1F5A43);
font-size: min(0.9rem, 14px + 0.4vw); }
/* 나의 수첩 네 칸 띠 사진 — 설명만 있어 밋밋하던 칸 위에 (운영자 2026-10-21).
여행 코너와 같은 수법. 글씨를 얹지 않으므로 막은 씌우지 않는다. */
.nb-band { width: 100%; aspect-ratio: 1000 / 329; border-radius: 10px; margin: 2px 0 14px;
background: center / cover no-repeat #E9DFC9; box-shadow: 0 6px 18px rgba(70,52,22,0.12); }
.nb-band.memo { background-image: url('../img/nb-memo.jpg'); }
.nb-band.event { background-image: url('../img/nb-event.jpg'); }
.nb-band.anniv { background-image: url('../img/nb-anniv.jpg'); }
.nb-band.save { background-image: url('../img/nb-save.jpg'); }
/* 나의 노트 — 오래 두고 찾아보는 개인 기록. 목록에는 제목만, 누르면 그 자리에서 펼쳐 읽는다. */
.nb-band.note { background-image: url('../img/nb-note.jpg'); }
.nt-list { margin-top: 4px; }
.nt-row { border-bottom: 1px solid var(--line, #E8E2D4); }
.nt-row:last-child { border-bottom: 0; }
.nt-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
padding: 15px 2px; background: none; border: 0; text-align: left;
font-family: 'Nanum Myeongjo', serif; font-weight: 700; color: var(--black, #1b1a17);
font-size: min(1.05rem, 16px + 0.5vw); }
.nt-head b { font-weight: 700; min-width: 0; word-break: keep-all; }
.nt-head i { font-style: normal; color: #9a9384; flex: none; }
.nt-row.open .nt-head { color: var(--dark-green, #1F5A43); }
.nt-body { padding: 2px 2px 14px; line-height: 1.85; color: #3a3630;
font-size: min(1rem, 15px + 0.5vw); word-break: keep-all; white-space: normal; }
.nt-acts { display: flex; gap: 8px; padding: 0 0 14px; }
.nt-acts .btn { flex: 1; }
/* 수첩 칸은 '문'이다 — 목록은 눌러 들어가서 본다 (운영자 2026-10-21) */
button.nb-band { display: block; border: 0; padding: 0; cursor: pointer; }
.nb-open { display: block; width: 100%; margin: 12px 0 0; padding: 13px;
background: none; border: 1px solid var(--line, #E3DDCE); border-radius: 6px;
color: var(--dark-green, #1F5A43); font-size: min(0.95rem, 14px + 0.45vw); }
.nb-open b { font-weight: 700; }
.nb-open::after { content: ' ›'; color: #A79E8C; }
.nb-listmodal .modal-box { max-width: 560px; }
.nb-listmodal .nb-add { margin: 0 0 14px; }
/* ── 수첩 손보기 (운영자 2026-10-21 밤) ── */
/* ① 고치기·지우기가 오른쪽에 작게 세로로 붙어 누르기 어려웠다 → 아래에 가로로 넓게 */
.nb-item { grid-template-columns: minmax(0, 1fr) !important; }
.nb-item .nb-acts { grid-column: 1 !important; grid-row: auto !important;
display: flex !important; flex-direction: row !important; align-items: stretch !important;
gap: 8px; margin-top: 10px; }
.nb-item .nb-edit, .nb-item .nb-rm { flex: 1; text-align: center; border: 1px solid; border-radius: 4px;
padding: 10px 6px !important; font-size: min(0.92rem, 14px + 0.4vw) !important; }
.nb-item .nb-edit { color: #8A6D2C; border-color: rgba(201,162,74,0.6); }
.nb-item .nb-rm { color: #A4553F; border-color: rgba(164,85,63,0.45); }
/* ② 목록 창 맨 위 찾기 한 줄 — 쌓이면 눈으로 훑기 어렵다 */
.nb-find { width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 12px 14px;
border: 1px solid var(--line, #E3DDCE); border-radius: 6px; background: #fff;
font-size: min(1rem, 15px + 0.5vw); }
.nb-find:focus { outline: none; border-color: var(--dark-green, #1F5A43); }
.nb-none { margin: 18px 0; text-align: center; color: #8a8173; font-size: min(0.95rem, 14px + 0.5vw); }
/* 노트 고정 · 메모를 노트로 · 빈 목록 예시 (운영자 2026-10-21 밤) */
.nt-head .nt-pin { font-style: normal; color: #C9A24A; margin-right: 7px; flex: none; }
.nt-acts { flex-wrap: wrap; }
.nt-acts .btn { flex: 1 1 30%; min-width: 0; white-space: nowrap; font-size: min(0.92rem, 14px + 0.4vw); }
.nb-item .nb-tonote { flex: 1; text-align: center; border: 1px solid rgba(31,90,67,0.45); border-radius: 4px;
background: none; color: var(--dark-green, #1F5A43);
padding: 10px 6px; font-size: min(0.92rem, 14px + 0.4vw); white-space: nowrap; }
.nb-eg { display: inline-block; margin-top: 7px; color: #9a9384; font-size: 0.92em; word-break: keep-all; }
/* '내 사연 보내기' 를 조금 크게 — 오프닝 끝에서 사연을 청하므로 바로 눌리게 (운영자 2026-10-21 밤) */
.opn-send { display: inline-block; margin-top: 8px; padding: 12px 20px !important;
border-radius: 7px !important; font-size: min(1rem, 15px + 0.45vw) !important;
box-shadow: 0 2px 8px rgba(70,52,22,0.18); }
/* 나들이 안의 '숨겨진 여가 공간' 소제목 */
.ot-sub { margin-top: 30px; }
.ot-subnote { margin: 2px 0 14px; }
.gd-title { margin: 6px 0 14px; font-family: 'Nanum Myeongjo', serif; font-weight: 700;
font-size: min(1.25rem, 19px + 0.6vw); color: var(--dark-green, #1F5A43); word-break: keep-all; }
/* '로그인 · 무료 구독하기' 는 옆 단추보다 글자가 많아 휴대폰에서 두 줄로 꺾였다 (운영자 2026-10-22).
이 단추만 글자 크기를 화면 폭에 맞춰 한 줄에 들어가게. 아주 좁은 화면에서는 '로그인 · / 무료 구독하기' 로만 꺾인다. */
.hero-actions #login-btn { font-size: min(1em, 4.6vw); }
/* ── 꿈 해몽 (운영자 2026-10-22) ── 운세 안의 사진 단추 + 찾기 화면.
사진(img/dream.jpg)이 오기 전에는 새벽빛 남색 그러데이션으로 자리를 잡아 둔다. */
.lk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 28px; }
.lk-card { position: relative; min-width: 0; min-height: min(13.5rem, 60vw); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 14px; border: 0; border-radius: 12px; overflow: hidden; text-align: left; color: #fff; background-size: cover; background-position: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.lk-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,25,20,0.05) 30%, rgba(10,25,20,0.72) 100%); }
.lk-card > span { position: relative; }
.lk-t { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: min(1.32rem, 5.6vw); text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.lk-s { font-size: min(0.92rem, 3.9vw); line-height: 1.5; opacity: 0.92; word-break: keep-all; }
/* 오늘의 운세 칸 — 바깥 카드 사진(fortune.jpg)을 또 쓰면 '같은 사진 두 곳'. 제 사진(img/luck.jpg)이 오기 전까지 따뜻한 금빛 그러데이션 */
.lk-fortune { background-color: #4A3A22; background-image: url('../img/luck.jpg'), linear-gradient(135deg, #6B5330 0%, #A07F45 55%, #D8C08A 100%); }
.dr-ban { background-color: #1E2A3A; background-image: url('../img/dream.jpg'), linear-gradient(115deg, #24324A 0%, #3B4A63 55%, #8C7B5E 100%); background-size: cover; background-position: center; }
.dr-wrap { padding-top: 26px; }
#dr-res { scroll-margin-top: 96px; } /* 찾은 결과가 위에 붙는 '뒤로 가기' 띠 밑에 가려지지 않게 */
.dr-lead { margin: 0 0 14px; font-size: 1.04rem; line-height: 1.75; color: #555; word-break: keep-all; }
.dr-pop, .dr-catlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.dr-pop button, .dr-catlist button { min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--dark-green); font-size: 0.98rem; }
.dr-sub { margin: 18px 0 8px; font-size: 0.92rem; letter-spacing: 0.04em; color: #9A8454; }
.dr-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6em, 1fr)); gap: 6px; margin-bottom: 10px; }
.dr-cats button { min-width: 0; padding: 10px 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 0.98rem; font-weight: 700; color: var(--dark-green); }
.dr-cats button[aria-pressed="true"] { background: var(--dark-green); border-color: var(--dark-green); color: #fff; }
.dr-card { margin: 0 0 16px; padding: 18px 18px 6px; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.dr-card h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(201,162,74,0.55); font-family: 'Nanum Myeongjo', serif; font-size: 1.28rem; color: #2E2618; }
.dr-card ul { margin: 0; padding: 0; list-style: none; }
.dr-card li { padding: 10px 0 12px; border-bottom: 1px dashed rgba(0,0,0,0.08); }
.dr-card li:last-child { border-bottom: 0; }
.dr-card li b { font-size: 1.06rem; color: #1F3B2E; word-break: keep-all; }
.dr-card li p { margin: 6px 0 0; font-size: 1rem; line-height: 1.75; color: #444; word-break: keep-all; }
.dr-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; font-size: 0.8rem; vertical-align: 2px; white-space: nowrap; }
.dr-tag.g { background: #F6EFD9; color: #7A5F1E; }
.dr-tag.c { background: #EAF0EC; color: #2F5A46; }
.dr-none { margin: 4px 0 18px; font-size: 1rem; line-height: 1.7; color: #777; word-break: keep-all; }
.dr-foot { margin-top: 18px; font-size: 0.88rem; color: #999; }
/* ── 구독 환영 카드 (운영자 2026-10-22) ── 반가움이 먼저다. 잡지 지면의 크림·금빛(앤틱)이 아니라
환한 아침 사진 위로 흰 종이 한 장이 올라오는 꼴, 강조색은 소개 배너의 바다빛(청량함)으로.
사진 img/welcome-hi.jpg (열린 흰 창·흰 튤립·바다). 단추만은 집안 연노랑. */
.modal.wel-hi { padding: 0; align-items: stretch; background: #DCEBF2; }
.wel-hi .modal-box { position: relative; max-width: 520px; width: 100%; max-height: none; min-height: 100%; margin: 0 auto; border-radius: 0; padding: 0; overflow: auto;
background: #EEF5F8 url('../img/welcome-hi.jpg') center top / 100% auto no-repeat; }
.wel-hi .x { position: absolute; left: auto; right: 12px; top: 8px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.75); color: #2B4A5A; }
.hi-in { position: relative; z-index: 2; box-sizing: border-box; margin-top: min(46vw, 240px); padding: 22px 22px 24px;
background: #FFFFFF; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(30,70,90,0.10); }
.hi-eye { margin: 0 0 8px; font-family: 'Cormorant Garamond', 'Nanum Myeongjo', serif; font-weight: 600; font-size: min(1rem, 15px + 0.4vw);
letter-spacing: 0.18em; text-transform: uppercase; color: #3A86A8; }
.hi-in h2 { margin: 0 0 8px; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: min(1.8rem, 27px + 1vw);
line-height: 1.32; color: #1D3E4E; word-break: keep-all; }
.hi-lead { margin: 0; font-size: min(1.02rem, 15.5px + 0.5vw); line-height: 1.75; color: #4E6470; word-break: keep-all; }
.hi-sub { margin: 14px 0 6px; font-size: min(0.82rem, 12.5px + 0.4vw); font-weight: 700; letter-spacing: 0.14em; color: #3A86A8; }
.hi-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.hi-list button { width: 100%; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 0; border-radius: 14px; background: #F1F7FA; text-align: left; color: inherit; }
.hi-list button::after { content: '›'; margin-left: auto; padding-left: 8px; font-size: 1.35em; color: #7FAFC4; }
.hi-list i { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; }
.hi-list i svg { width: 22px; height: 22px; }
.hi-list span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hi-list b { font-weight: 700; font-size: min(1.05rem, 16px + 0.5vw); color: #1D3E4E; word-break: keep-all; }
.hi-list small { font-size: min(0.86rem, 13px + 0.4vw); color: #6B8290; word-break: keep-all; }
.wel-hi .hi-go { width: 100%; min-height: 52px; border: 1px solid #CFE0E8; border-radius: 14px; background: #FFFFFF; color: #2B5A6E; font-weight: 700; font-size: min(1.05rem, 16px + 0.5vw); }
/* 홈 화면에 놓기 — 맨 먼저, 가장 눈에 띄게 (운영자 2026-10-22: '무조건 설치부터'). 바다빛 칸 + 휴대폰 홈 화면의 앱 아이콘 모양 + 연노랑 '지금 놓기' */
.hi-feat { width: 100%; min-width: 0; display: flex; align-items: center; gap: 16px; margin: 16px 0 2px; padding: 14px 16px; border: 0; border-radius: 18px; text-align: left; color: #fff;
background: linear-gradient(135deg, #2F7FA3 0%, #4FA3C4 100%); box-shadow: 0 8px 22px rgba(47,127,163,0.28); }
.hi-app { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hi-app img { width: 62px; height: 62px; border-radius: 15px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.18); }
.hi-app em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.92); }
.hi-ft { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hi-ft b { font-weight: 800; font-size: min(1.12rem, 17px + 0.5vw); word-break: keep-all; }
.hi-ft small { font-size: min(0.88rem, 13.5px + 0.4vw); color: rgba(255,255,255,0.9); word-break: keep-all; }
.hi-now { margin-top: 6px; padding: 7px 16px; border-radius: 10px; background: #F9E9A8; color: #3A2E00; font-weight: 800; font-size: min(0.95rem, 14.5px + 0.4vw); }
/* ── 창간 독자 (운영자 2026-10-22) ── 본인에게만. 잡지 판권처럼 조용하게, 금빛 작은 글씨. */
.fd-badge { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border: 1px solid rgba(233,206,140,0.85); border-radius: 2px;
font-family: 'Nanum Myeongjo', serif; font-size: 0.82rem; letter-spacing: 0.14em; color: #F3DFA6; background: rgba(20,16,8,0.28); text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.fd-badge[hidden] { display: none; }
.fd-card { margin: 0 0 18px; padding: 16px 18px; border: 1px solid rgba(201,162,74,0.6); outline: 1px solid rgba(201,162,74,0.25); outline-offset: 3px;
background: linear-gradient(135deg, #FBF7EC 0%, #F4ECD8 100%); text-align: center; }
.fd-card small { display: block; font-family: 'Cormorant Garamond', serif; letter-spacing: 0.3em; font-size: 0.8rem; color: #A88B55; }
.fd-card b { display: block; margin: 4px 0 2px; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: min(1.35rem, 21px + 0.6vw); color: #1F5A43; }
.fd-card b span { font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.06em; color: #9A7B3C; }
.fd-card em { display: block; font-style: normal; font-size: min(0.88rem, 13.5px + 0.4vw); color: #7C7262; word-break: keep-all; }
.hi-fd { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid #C9A24A; background: #FBF6E9; font-size: min(0.95rem, 14.5px + 0.4vw); line-height: 1.6; color: #5B4A22; word-break: keep-all; }
.hi-fd b { color: #8A6A1E; }
/* ── 나의 정보 (운영자 2026-10-23) ── 환영 카드와 같은 꼴: 위는 사진(img/my-bg.jpg — 창가 흰 리넨 위 가죽 수첩·열쇠·유칼립투스), 흰 종이가 올라온다 */
.modal.wel-my { padding: 0; align-items: stretch; background: #EEF2EE; }
.wel-my .modal-box { position: relative; max-width: 520px; width: 100%; max-height: none; min-height: 100%; margin: 0 auto; border-radius: 0; padding: 0; overflow: auto;
background: #F6F6F2 url('../img/my-bg.jpg') center top / 100% auto no-repeat; }
.wel-my .x { position: absolute; left: auto; right: 12px; top: 8px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.8); color: #33443B; }
.my-in { position: relative; z-index: 2; box-sizing: border-box; margin-top: min(44vw, 230px); padding: 24px 22px 30px; background: #FFFFFF; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(40,60,50,0.10); }
.my-in .fd-card { margin: 0 0 16px; }
.my-in h2 { margin: 0 0 4px; font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: min(1.6rem, 25px + 0.8vw); color: #1F3A30; }
.my-line { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(201,162,74,0.45); font-size: min(0.95rem, 14.5px + 0.4vw); color: #6B7A72; line-height: 1.7; }
.my-f { margin: 0 0 16px; }
.my-f > label { display: block; margin-bottom: 6px; font-size: min(0.85rem, 13px + 0.35vw); font-weight: 700; letter-spacing: 0.08em; color: #5E7A6C; }
.my-f .in { display: flex; gap: 8px; flex-wrap: wrap; }
.my-f .in input, .my-f .in select { flex: 1 1 8em; min-width: 0; padding: 11px 12px; border: 1px solid #DDE3DE; border-radius: 10px; background: #FAFBF9; font-size: min(1.02rem, 16px + 0.4vw); }
.my-f .in .btn { flex: 0 0 auto; min-height: 46px; padding: 0 16px; border-radius: 10px !important; }
.my-f .in #m-size-big, .my-f .in #m-size-normal { flex: 1 1 0; }
/* ── 오늘 PLAY: 읽어 보기 + 프사 읽기 (대표 2026-10-23 — 1차 시안이 "80년대 책자 같다" → 사진 중심·여백·가는 선으로 다시) ── */
.pl-sec { margin: 26px 0 12px; font-size: 0.8rem; letter-spacing: 0.24em; color: #8a6d2c; }
.pl-hub-head + .pl-sec { margin-top: 6px; }
.pl-feature { display: block; width: 100%; padding: 0; text-align: left; background: #fff; border: 1px solid #E8E0CC; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 10px rgba(60,40,10,0.06); }
.pl-f-photo { display: block; aspect-ratio: 16 / 9; background: #ddd center / cover no-repeat; }
.pl-f-txt { display: block; padding: 18px 18px 18px; }
.pl-f-kick { display: block; font-size: 0.8rem; letter-spacing: 0.2em; color: #8a6d2c; }
.pl-feature b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.4rem; line-height: 1.42; font-weight: 700; color: #1f1f1f; margin: 6px 0 6px; }
.pl-f-sub { display: block; font-size: 0.92rem; color: #666; line-height: 1.55; }
.pl-f-sub i { font-style: normal; color: #8a6d2c; }
.psa { padding: 0 0 34px; }
.psa-photo { margin: 0 -20px; aspect-ratio: 4 / 3; background: #ddd center / cover no-repeat; position: relative; }
.psa-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 70%, var(--ivory) 100%); }
.psa-head { position: relative; margin-top: 4px; padding: 0 2px; }
.psa-kick { display: block; font-size: 0.8rem; letter-spacing: 0.22em; color: #8a6d2c; }
.psa-head h2 { font-family: 'Nanum Myeongjo', serif; font-size: 1.85rem; line-height: 1.4; margin: 8px 0 12px; font-weight: 700; color: #141414; }
.psa-head h2 em { font-style: normal; color: var(--dark-green); border-bottom: 2px solid #E3B04B; }
.psa-head p { margin: 0; font-size: 1.02rem; line-height: 1.75; color: #555; }
.psa-who { display: flex; gap: 22px; margin: 26px 0 4px; border-bottom: 1px solid var(--line); }
.psa-who button { background: none; border: 0; padding: 0 0 10px; margin-bottom: -1px; text-align: left; min-width: 0; border-bottom: 2px solid transparent; }
.psa-who button b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.15rem; color: #999; font-weight: 700; }
.psa-who button span { display: block; font-size: 0.85rem; color: #aaa; }
.psa-who button[aria-pressed="true"] { border-bottom-color: var(--dark-green); }
.psa-who button[aria-pressed="true"] b { color: var(--dark-green); }
.psa-who button[aria-pressed="true"] span { color: #777; }
.psa-go { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 16px 20px; margin-top: 22px; background: var(--warm); color: var(--warm-ink); border: 1px solid var(--warm-line); border-radius: 10px; font-weight: 800; font-size: 1.06rem; line-height: 1.45; text-align: left; }
.psa-dex-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-top: 4px; padding: 16px 2px; background: none; border: 0; border-bottom: 1px solid var(--line); color: #333; font-size: 1rem; text-align: left; }
.psa-dex-link .psa-nowrap { white-space: nowrap; color: #8a6d2c; }
.psa-nowrap0 { white-space: nowrap; }
.psa-note { margin: 18px 0 0; font-size: 0.86rem; color: #999; line-height: 1.6; }
.psa-prog { height: 2px; background: #E5DFD0; margin: 10px 0 22px; }
.psa-prog i { display: block; height: 100%; background: var(--dark-green); transition: width .3s; }
.psa-step { margin: 0; font-size: 0.85rem; color: #8a6d2c; letter-spacing: 0.08em; }
.psa-q { font-family: 'Nanum Myeongjo', serif; font-size: 1.6rem; line-height: 1.45; margin: 10px 0 18px; color: #141414; font-weight: 700; }
.psa-opts { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.psa-opts button { display: flex; align-items: baseline; gap: 14px; text-align: left; padding: 18px 2px; background: none; border: 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; line-height: 1.5; color: #222; min-width: 0; }
.psa-opts button::before { content: attr(data-n); flex: none; font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: #b49a5e; width: 1.4em; }
.psa-opts button::after { content: '›'; margin-left: auto; color: #c9bfa6; padding-left: 8px; }
.psa-opts button:active, .psa-opts button[aria-pressed="true"] { color: var(--dark-green); font-weight: 700; }
.psa-prev { margin-top: 18px; background: none; border: 0; color: #888; font-size: 0.98rem; padding: 6px 0; }
.psa-res { padding: 8px 2px 0; }
.psa-res h2 { font-family: 'Nanum Myeongjo', serif; font-size: 2.2rem; margin: 10px 0 0; color: #141414; font-weight: 700; line-height: 1.3; }
.psa-new { margin: 10px 0 0; font-size: 0.86rem; color: #8a6d2c; }
.psa-rule { width: 40px; height: 1px; background: #C9A24A; margin: 20px 0 18px; border: 0; }
.psa-read { font-size: 1.12rem; line-height: 1.85; color: #222; margin: 0; }
.psa-more { font-size: 1rem; line-height: 1.8; color: #666; margin: 12px 0 0; }
.psa-ask { margin-top: 28px; padding: 22px 22px 20px; background: #EAEFE6; border-radius: 12px; }
.psa-ask span { display: block; font-size: 0.8rem; letter-spacing: 0.16em; color: #4f6b56; }
.psa-ask p { font-family: 'Nanum Myeongjo', serif; font-size: 1.22rem; line-height: 1.65; margin: 10px 0 14px; font-weight: 700; color: #1d3b2c; }
.psa-copy { padding: 0; background: none; border: 0; border-bottom: 1px solid #4f6b56; color: #2d4a38; font-size: 0.95rem; font-weight: 700; }
.psa-row { display: flex; margin-top: 6px; border-bottom: 1px solid var(--line); }
.psa-row button { flex: 1; padding: 16px 4px; background: none; border: 0; color: #333; font-size: 1rem; min-width: 0; line-height: 1.45; }
.psa-row button + button { border-left: 1px solid var(--line); }
.psa-dex { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.psa-cell { padding: 16px 12px 16px 2px; border-bottom: 1px solid var(--line); min-width: 0; }
.psa-cell:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
.psa-cell:nth-child(even) { padding-left: 14px; }
.psa-cell b { display: block; font-family: 'Nanum Myeongjo', serif; font-size: 1.1rem; color: #c3bba8; line-height: 1.4; font-weight: 700; }
.psa-cell span { display: block; margin-top: 4px; font-size: 0.82rem; color: #aaa; line-height: 1.5; }
.psa-cell.on b { color: var(--dark-green); }
.psa-cell.on span { color: #777; }
.psa-dex-head { padding-top: 8px; }
.psa-dex-head h2 { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 500; margin: 4px 0 4px; color: #141414; line-height: 1.1; }
.psa-dex-head p { margin: 0; color: #666; font-size: 1rem; line-height: 1.7; }
/* 심리 테스트 고르는 목록 */
.pt-list { margin-top: 24px; border-top: 1px solid var(--line); }
.pt-list button { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 20px 2px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; min-width: 0; }
.pt-n { flex: none; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: #b49a5e; width: 1.6em; line-height: 1.5; }
.pt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-t b { font-family: 'Nanum Myeongjo', serif; font-size: 1.25rem; color: #141414; font-weight: 700; line-height: 1.4; }
.pt-t > span { font-size: 0.95rem; color: #666; line-height: 1.5; }
.pt-t em { font-style: normal; font-size: 0.85rem; color: #8a6d2c; margin-top: 2px; }
.pt-ar { flex: none; color: #c9bfa6; font-size: 1.3rem; line-height: 1.5; }
.pt-head { margin-top: 12px; }
.psa h2, .psa-q, .pt-t b, .pl-feature b, .psa-ask p { word-break: keep-all; }
.psa-cards { margin-top: 28px; }
.psa-cards p { margin: 6px 0 14px; font-size: 0.95rem; color: #666; }
.psa-cards .cards { margin: 0 -20px; padding: 0 20px 20px; gap: 14px; }
@media (min-width: 769px) { .hero { background-image: url("../img/hero-mobile.jpg?v=2") !important; background-position: center 100% !important; } }
/* 휴대폰 커버 (대표 2026-10-24: "사람만 크게 나온다, 원본 그대로 보이게") — 칸이 사진보다 길어(390×1080) 꽉 채우면 양옆이 35% 잘렸다.
사진은 가로 폭에 맞춰 위에서부터 통째로 보이고, 아래는 사진 바닥색으로 이어지게 한다 */
@media (max-width: 768px) { .hero { background: linear-gradient(to bottom, rgba(42,36,30,0) 0, rgba(42,36,30,0) calc(100vw * 1.5), #2a241e calc(100vw * 1.79)), url('../img/hero-mobile.jpg?v=2') center top / 100% auto no-repeat, #2a241e !important; } }
/* 휴대폰 커버 높이를 사진 높이에 맞춘다 (대표 2026-10-24 02:27: 첫 화면에 날짜까지만 나오고 단추가 안 보였다 — 사진 아래 빈 갈색 띠가 길었다) */
@media (max-width: 768px) { .hero { min-height: max(calc(100vw * 1.79 + 40px), 44rem) !important; /* 큰 글씨면 rem 쪽이 커져 로그인 뒤 단추가 붙어도 밀리지 않는다 */ } }
@media (max-width: 768px) { .hero-foot, .hero-foot * { text-shadow: 0 1px 6px rgba(0,0,0,0.75); } }
/* 로그인하면 인사말 한 줄과 단추 세 개가 더 붙어 커버가 길어진다(대표 휴대폰에서 노란 단추가 잘림, 2026-10-24) — 위 빈자리를 줄여 끌어올린다 */
@media (max-width: 768px) { .hero > div:last-child { padding-top: 2vh !important; } .hero .logo-wrap { margin-bottom: 14px; } }
/* 휴대폰: 앱 설치·친구에게 보내기를 한 줄로 나란히 — 커버가 한 화면에 들어오게 (2026-10-24) */
@media (max-width: 768px) {
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .auth-slot { flex: 1 1 100%; }
.hero-actions > .ghost.go { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: normal; word-break: keep-all; }
}
@media (max-width: 768px) { .hero-actions > .ghost.go { font-size: 0.95rem; padding-top: 12px; padding-bottom: 12px; line-height: 1.3; } }
/* CONTENTS 다섯 칸: 색막을 걷고 사진 그대로 선명하게 (대표 2026-10-24 02:52) — 글씨 자리에만 옅은 그림자 */
.tabs3 button::before, body:not(.in-chapter) .tabs3:not(.compact) button::before,
.tabs3 button[data-tab]::before, body:not(.in-chapter) .tabs3:not(.compact) button[data-tab]::before { background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 38%, rgba(0,0,0,0) 62%) !important; }
.tabs3 button::after { background: none !important; }
.tabs3 button, .tabs3 button[aria-pressed] { filter: none !important; opacity: 1 !important; }
/* 무엇을 볼까: 칸을 낮추고 사진을 넓게 (대표 2026-10-24 03:16 B안) */
/* 코너 칸 사진: 짙은 초록막을 걷고 사진 그대로 밝게 — 글씨 밑에만 옅은 그림자 (대표 2026-10-24 03:18) */
.banner.photo::after { background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.36) 42%, rgba(0,0,0,0) 75%) !important; }
.banner.photo .b-text h3, .banner.photo .b-text p, .banner.photo .b-text > span { text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 14px rgba(0,0,0,0.35); }
/* ── 판갈이 시안 (대표 2026-10-24): 칸 = 썸네일 ── */
.banner.thumb { min-height: 230px; }
.banner.thumb::before { background: linear-gradient(to top, rgba(10,10,8,0.86) 0%, rgba(10,10,8,0.55) 40%, rgba(10,10,8,0.06) 75%) !important; }
.banner.thumb .b-kick { display: block; font-size: 0.82rem; letter-spacing: 0.08em; color: #F3D98B; margin-bottom: 6px; font-weight: 700; }
.banner.thumb h3.b-hook { font-size: 1.5rem; line-height: 1.38; font-weight: 800; word-break: keep-all; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.55); }
.banner.thumb .b-text p { font-size: 0.92rem; opacity: 0.88; margin-top: 6px; }
.brief-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 46px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.brief-h span { font-size: 0.8rem; letter-spacing: 0.2em; color: #8a6d2c; }
.brief-h b { font-family: 'Nanum Myeongjo', serif; font-size: 1.3rem; color: #141414; }
.brief-h small { width: 100%; font-size: 0.88rem; color: #888; }
.label.thumb-lab { display: none; }
.banner.photo.thumb { height: 300px; margin-top: 18px; }
@media (max-width: 768px) { .banner.photo.thumb { height: 280px; } }
.banner.photo.thumb { height: auto; min-height: 280px; display: flex; align-items: flex-end; }
.banner.thumb .b-text { position: relative; left: auto; right: auto; bottom: auto; width: 100%; padding: 90px 22px 20px; flex-direction: column; align-items: stretch; gap: 12px; }
.banner.thumb .b-text > div { min-width: 0; }
.banner.thumb .b-text > span { align-self: flex-end; }
.banner.thumb .b-text span.b-kick { font-family: 'Noto Sans KR', sans-serif; border: 0; padding: 0; white-space: normal; }
.banner.thumb .b-text { background: linear-gradient(to top, rgba(12,10,6,0.92) 0%, rgba(12,10,6,0.78) 45%, rgba(12,10,6,0.35) 78%, rgba(12,10,6,0) 100%); border-radius: 0 0 inherit inherit; }
.banner.thumb::before { display: none; }
.banner.photo.thumb { min-height: 360px; }
.banner.thumb .b-text { padding-top: 70px; background: linear-gradient(to top, rgba(12,10,6,0.92) 0%, rgba(12,10,6,0.8) 55%, rgba(12,10,6,0) 100%); }
/* 썸네일 2안 (대표 2026-10-24: "배경이 너무 어둡다, 선명해야 한다") — 유튜브처럼 사진은 막 없이 또렷하게, 제목은 사진 아래 */
.banner.photo.thumb { display: block; height: auto; min-height: 0; padding: 56% 0 0; background-color: #fff; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat; border: 1px solid #ECE5D5; }
.banner.thumb .b-text { position: static; background: #fff; color: #141414; padding: 16px 18px 18px; flex-direction: column; gap: 10px; }
.banner.thumb .b-text .b-kick { color: #B0662A; text-shadow: none; }
.banner.thumb h3.b-hook { color: #141414; text-shadow: none; font-size: 1.42rem; }
.banner.thumb .b-text p { color: #666; opacity: 1; }
.banner.thumb .b-text > span:not(.b-kick) { color: #B0662A; border-color: #E3B37A; }
.banner.thumb::after, .banner.thumb::before { display: none !important; } .banner.thumb .b-text { min-height: 0; }
.banner.thumb .b-text, .banner.thumb .b-text * { text-shadow: none !important; } .banner.photo.thumb { height: auto !important; }
/* 말 거는 제목: 뜻이 끊기는 자리에서 줄을 내린다 — 줄마다 한 덩어리, 줄 안에서는 낱말을 쪼개지 않는다 (대표 2026-10-24 04:17) */
.banner.thumb h3.b-hook .hl { display: block; word-break: keep-all; text-wrap: balance; }
.banner.thumb h3.b-hook .hl { padding: 0; margin: 0; border: 0; font: inherit; color: inherit; white-space: normal; }
.banner.thumb h3.b-hook { font-size: min(1.5rem, 6vw); } /* 큰 글씨에서도 한 줄(13자 안팎)이 다시 쪼개지지 않게 화면 폭에 맞춘다 */
/* 로그인한 사람: 인사말 줄 자리를 그리기 전에 잡아 둔다 — 문서를 읽는 도중 한 번 그려지면 빈 줄에서 커버 단추가 밀렸다 (2026-10-24) */
html.hello-in #user-nick:empty { min-height: 1.3em; }
/* 칸 안 머리말(심리 테스트 · 놀이 …)을 제목과 또렷이 가른다 — 갈색 글씨가 흰 칸에서 묻혔다 (대표 2026-10-24 04:20) */
.banner.thumb .b-text span.b-kick { display: inline-block; background: #1F5A43; color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 4px; margin-bottom: 10px; line-height: 1.4; text-shadow: none; }
html.hello-in .auth-slot > #user-chip[hidden] { display: block !important; } /* 감춰진 동안에도 보일 때와 같은 꼴로 자리를 잡는다 */
/* 오프닝 날짜·때를 화면 안 오른쪽 위로 (대표 2026-10-24 04:36) — 왼쪽 위는 진행자 이름표 */
.opn-frame .opn-when { position: absolute; top: 16px; right: 18px; z-index: 3; margin: 0; align-items: flex-end; text-align: right; gap: 3px; color: #fff; text-shadow: 0 1px 6px rgba(20,14,4,0.75), 0 0 16px rgba(20,14,4,0.45); pointer-events: none; }
.opn-frame .opn-when span { font-size: min(0.9rem, 3.8vw); letter-spacing: 0.04em; color: #fff; }
.opn-frame .opn-when small { font-size: min(0.82rem, 3.5vw); letter-spacing: 0.14em; color: #F3D98B; font-weight: 700; }
/* 오마주가 읽어 드려요 — 화면에서 뺌 (대표 2026-10-24 04:46, 나중에 다시 켤 수 있게 장치는 남김) */
.rd, #rd-bar { display: none !important; }
/* 무엇을 볼까 — 예고편·소개 영상 썸네일 (대표 2026-10-24) */
.sw-vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; margin: 12px 0 4px; border: 0; border-radius: 10px; overflow: hidden; background: #111; cursor: pointer; }
.sw-vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-vid .sw-play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(0,0,0,0.62); color: #fff; font-size: 0.95rem; font-weight: 700; font-family: 'Noto Sans KR', sans-serif; border: 0; white-space: nowrap; }
.sw-vid .sw-play i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #F9E9A8; color: #3A2E00; font-size: 0.75rem; }
/* 오늘의 인사말 머리 — 아래 썸네일 칸들과 같은 말씨(초록 머리말 + 두 줄 제목) (대표 2026-10-24 04:49: 아이콘·글씨가 언밸런스) */
.greet-h { margin: 6px 0 14px; }
.greet-h .g-tag { display: inline-block; background: #1F5A43; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 4px; line-height: 1.4; }
.greet-h h3 { margin: 10px 0 0; font-family: 'Noto Sans KR', sans-serif; font-size: min(1.5rem, 6vw); font-weight: 800; line-height: 1.38; color: #141414; letter-spacing: -0.01em; word-break: keep-all; }
/* 30초 브리핑·오늘의 질문 소제목도 인사말과 같은 말씨로 (대표 2026-10-24 05:00: 일관성) — 아이콘 빼고 초록 머리말 */
.tabsec[data-g="g1"] .label:not(.thumb-lab) { display: inline-block; border: 0; margin: 28px 0 12px; padding: 4px 10px; background: #1F5A43; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; border-radius: 4px; }
.tabsec[data-g="g1"] .label:not(.thumb-lab) .lb-ic { display: none; }
.tabsec[data-g="g1"] .label:not(.thumb-lab) .nw { color: inherit; }
.brief-h { display: block; margin: 46px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.brief-h span { display: inline-block; background: #1F5A43; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 4px; line-height: 1.4; }
.brief-h b { display: block; margin-top: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: min(1.5rem, 6vw); font-weight: 800; line-height: 1.38; color: #141414; letter-spacing: -0.01em; }
.brief-h small { display: block; margin-top: 4px; font-size: 0.92rem; color: #777; }
.tabsec[data-g="g1"] .label:not(.thumb-lab) { border: 0 !important; box-shadow: none !important; } .tabsec[data-g="g1"] .label:not(.thumb-lab)::before, .tabsec[data-g="g1"] .label:not(.thumb-lab)::after { display: none !important; }
/* 썸네일 칸끼리 조금 더 띄워 구분 (대표 2026-10-24 05:12: 쭉 붙어 있어 정신없다) */
.banner.photo.thumb { margin-top: 0; margin-bottom: 40px; }
.label.thumb-lab + .banner.photo.thumb { margin-top: 0; }
.banner.thumb .b-text h3 { color: #141414; font-family: 'Noto Sans KR', sans-serif; font-size: min(1.5rem, 6vw); font-weight: 800; line-height: 1.38; text-shadow: none; word-break: keep-all; }
/* 오프닝 서서 인사하는 장면은 상반신까지만 (대표 2026-10-24 05:15: 높은 책상 뒤 전신이라 상체가 짧고 어색하다) */
.opn-shot[data-tag="wave"], .opn-shot[data-tag="stand"] { background-size: 155% auto; background-position: 45% 8%; } /* 대표 2026-10-24 05:35: 1.55배로 확정(얼굴 부담 줄이고 책상 언저리에서 끊음) */
/* 썸네일 사진 칸: 16:9 에 꽉 채우기 (가로로 긴 사진도 흰 틈 없이) */
.banner.photo.thumb { padding: 0 !important; background-image: none !important; }
.banner.thumb .b-pic { display: block; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-repeat: no-repeat; }
.banner.photo.thumb { min-height: 0 !important; } .banner.thumb .b-text { padding-top: 16px !important; gap: 8px; } .banner.thumb .b-text > span:not(.b-kick) { margin-top: 4px; }
.banner.thumb .b-text > div { flex: 0 0 auto !important; } /* 세로로 놓이니 200px 바탕 높이가 빈칸이 됐다 */
/* 코너 머리 사진을 통째로 (한 끼 — 사람 있는 가로 사진이 세로 칸에 꽉 차 얼굴만 크게 나왔다, 대표 2026-10-24) */
.d-hero.d-wide { height: auto; padding-top: calc(56.25% + 4px); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: var(--ivory); }
.d-hero.d-wide::after { background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, transparent 30%, transparent 70%, var(--ivory) 100%); }
.d-hero.d-wide .d-title { position: relative; bottom: auto; left: auto; right: auto; padding: 18px 20px 6px; }
/* 오늘의 추천 음악 (대표 2026-10-24) */
.pk-card { margin: 26px 0 10px; }
.pk-meta { margin: 0; font-size: 0.95rem; color: #8a6d2c; letter-spacing: 0.04em; }
.pk-title { margin: 6px 0 12px; font-family: 'Noto Sans KR', sans-serif; font-size: min(1.8rem, 7.2vw); font-weight: 800; line-height: 1.3; color: #141414; word-break: keep-all; }
.pk-note { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.8; color: #333; word-break: keep-all; }
.pk-vid { margin: 6px 0 12px; }
/* 코너 안쪽 판갈이 시안 (대표 2026-10-24: 바깥은 산뜻해졌는데 안에 들어가면 다운된다) */
#detail { --g: #1F5A3E; --g-soft: #EEF5F0; --ink: #1A1A1A; --sub: #5F6360; --hair: #E6E6E0; background: #fff; }
/* 머리: 사진은 또렷하게 통째로, 제목은 사진 아래 흰 판에 */
#detail .d-hero { height: auto !important; padding-top: 56.25%; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat; background-color: #fff; display: flex; flex-direction: column; }
#detail .d-hero::after { background: linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,0)) !important; inset: 0 0 auto 0 !important; height: 96px; }
#detail .d-title { position: relative !important; inset: auto !important; bottom: auto; text-align: left; background: #fff; margin: -22px 0 0; border-radius: 22px 22px 0 0; padding: 26px 22px 4px; z-index: 2; }
#detail .d-title .tag { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .02em; padding: 6px 12px; border: 0; border-radius: 6px; background: var(--g); color: #fff; margin: 0 0 14px; }
#detail .d-title h1 { font-family: 'Noto Sans KR', sans-serif; font-weight: 800; font-size: 1.85rem; line-height: 1.32; letter-spacing: -.02em; color: var(--ink); text-shadow: none; }
#detail .d-body { padding: 18px 22px 120px; color: var(--ink); }
#detail .d-body p, #detail .d-body li { font-size: 1.06rem; line-height: 1.72; color: var(--ink); }
/* 소제목 — 바깥 칸 머리말과 같은 초록 표 */
#detail .is-sub, #detail .cu-kind, #detail .d-body .subhead { display: inline-block; font-family: 'Noto Sans KR', sans-serif !important; font-weight: 700 !important; font-size: .85rem !important; letter-spacing: .02em; color: var(--g) !important; background: var(--g-soft); padding: 5px 11px; border-radius: 6px; margin: 34px 0 12px !important; line-height: 1.4 !important; }
/* 한 끼 */
#detail #meal .lead { font-size: 1.12rem; font-weight: 500; line-height: 1.7; color: #2A2A2A; margin: 8px 0 0; }
#detail #meal .ing { display: block; list-style: none; padding: 0; margin: 0; border: 0; }
#detail #meal .ing::before { content: '재료'; display: table; font-weight: 700; font-size: .85rem; color: var(--g); background: var(--g-soft); padding: 5px 11px; border-radius: 6px; margin: 30px 0 6px; }
#detail #meal .ing li { background: #F4F4EF; border-radius: 999px; padding: 9px 16px; white-space: nowrap; font-weight: 500; color: var(--ink); display: inline-block; margin: 0 6px 8px 0; }
/* 2026-10-25: 재료 이름이 길면(조림 양념(간장…)) 한 줄로 버티다 화면 밖으로 나갔다 — 칸 폭을 넘으면 그 칸 안에서 줄바꿈 */
#detail #meal .ing li { max-width: 100%; white-space: normal; word-break: keep-all; border-radius: 18px; }
#detail #meal .steps { list-style: none; counter-reset: st; padding: 0; margin: 0; border: 0; }
#detail #meal .steps::before { content: '만드는 법'; display: inline-block; font-weight: 700; font-size: .85rem; color: var(--g); background: var(--g-soft); padding: 5px 11px; border-radius: 6px; margin: 34px 0 10px; }
#detail #meal .steps li { counter-increment: st; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--hair); margin: 0; }
#detail #meal .steps li:last-child { border-bottom: 0; }
#detail #meal .steps li::before { content: counter(st); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: .95rem; display: grid; place-items: center; line-height: 1; }
#detail #meal .note { background: #FFF7DB; border-radius: 14px; padding: 18px 18px 16px; margin: 20px 0 0; color: #3A2E00; }
#detail #meal .note::before { content: '요령'; display: block; font-weight: 800; font-size: .85rem; color: #8A6A00; margin-bottom: 4px; }
/* 담아 두기 · 한마디 */
#detail .sv { margin: 26px 0 0; text-align: center; }
#detail .sv-btn { width: 100%; min-height: 54px; border-radius: 14px; border: 0; background: #F9E9A8; color: #3A2E00; font-weight: 700; font-size: 1.05rem; box-shadow: none; }
#detail .sv-btn[aria-pressed=true] { background: var(--g); color: #fff; }
#detail .cbox { margin-top: 36px; padding-top: 4px; border-top: 8px solid #F4F4F0; margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
#detail .cmt-form { display: flex; gap: 8px; }
#detail .cmt-form input { flex: 1; min-width: 0; border: 1.5px solid var(--hair); border-radius: 12px; padding: 14px; font-size: 1rem; background: #fff; }
#detail .cmt-form .btn { border-radius: 12px; background: var(--g); color: #fff; border: 0; font-weight: 700; padding: 0 18px; }
#detail .cmts .note { color: var(--sub); font-size: .98rem; }
/* 한 권 */
#detail .bk-title { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 800 !important; font-size: 1.7rem !important; color: var(--ink) !important; letter-spacing: -.02em; margin: 0 0 8px !important; line-height: 1.35; }
#detail .bk .cu-kind { margin-top: 0 !important; } #detail #book-body, #detail .bk { margin-top: 0 !important; padding-top: 0 !important; }
#detail .bk-who { color: var(--sub) !important; font-size: 1rem !important; }
#detail .bk-who span { color: var(--sub) !important; }
#detail .bk-blurb { margin-top: 18px !important; }
#detail .bk-scene { background: var(--g-soft); border-radius: 14px; padding: 18px; margin: 0; }
#detail .bk-why { background: #FFF7DB !important; border: 0 !important; border-radius: 14px; padding: 18px !important; margin: 14px 0 0 !important; color: #3A2E00 !important; }
#detail .bk-why::before { content: '이럴 때 펼쳐 보세요'; display: block; font-weight: 800; font-size: .85rem; color: #8A6A00; margin-bottom: 4px; }
#detail .bk-go { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
#detail .bk-go .btn { border: 0 !important; background: #F4F4F0 !important; color: var(--ink) !important; border-radius: 12px !important; font-weight: 700; min-height: 52px; display: grid; place-items: center; }
#detail .bk-go .btn:last-child { grid-column: 1 / -1; }
#detail .bk-note { font-size: .92rem !important; color: var(--sub) !important; }
/* 시사 상식 */
#detail #issue-card .is-card { background: #fff !important; background-image: none !important; color: var(--ink) !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
#detail #issue-card .is-card::before, #detail #issue-card .is-card::after { display: none !important; }
#detail #issue-card .cu-kind { margin-top: 8px !important; }
#detail #issue-card .is-term { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 800 !important; font-size: 1.7rem !important; color: var(--ink) !important; margin: 0 0 10px !important; letter-spacing: -.02em; }
#detail #issue-card .is-mean { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--g) !important; line-height: 1.55 !important; margin: 0 0 16px !important; }
#detail #issue-card .is-exp { color: var(--ink) !important; }
#detail #issue-card .is-ex { font-family: 'Noto Sans KR', sans-serif !important; background: #FFF7DB; border: 0 !important; border-radius: 14px; padding: 16px 18px !important; color: #3A2E00 !important; font-weight: 500; margin: 0 !important; }
#detail .quiz-q { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 800; font-size: 1.3rem; line-height: 1.5; color: var(--ink); margin: 0 0 14px; }
#detail .opts { display: grid; gap: 8px; }
#detail .opts button { background: #fff !important; border: 1.5px solid var(--hair) !important; border-radius: 14px !important; padding: 15px 16px !important; font-size: 1.04rem !important; line-height: 1.55 !important; color: var(--ink) !important; text-align: left; box-shadow: none !important; }
#detail .opts button[aria-pressed=true] { border-color: var(--g) !important; background: var(--g-soft) !important; }
#detail .quiz-foot .btn { width: 100%; min-height: 54px; border-radius: 14px; border: 0; background: #F9E9A8; color: #3A2E00; font-weight: 700; font-size: 1.05rem; }
#detail .quiz-foot .btn:disabled { opacity: .55; }
#detail #issue-card .is-card > .cu-kind:first-child, #detail #issue-card .is-term { display: none !important; }
#detail #issue-card .is-mean { margin-top: 6px !important; }
#detail #issue-card, #detail #issue-card .is-card { margin-top: 0 !important; padding-top: 0 !important; }
#detail #issue-card .is-mean { margin-top: 0 !important; }
#detail .bk-title { display: none !important; }
/* 나머지 코너 — 안쪽은 고딕 하나로 (그해 오늘의 신문 지면만 명조로 남긴다) */
#detail .d-body :is(h2, h3, b, strong, blockquote, p, li, button, a, span) { font-family: 'Noto Sans KR', sans-serif; }
#detail #era :is(h2, h3, p, span, small) { font-family: 'Nanum Myeongjo', serif; }
/* 형광펜 밑줄 걷기 — 굵은 진한 제목으로 */
#detail .sw-row b, #detail .ot-row b { background: none !important; font-family: 'Noto Sans KR', sans-serif !important; font-weight: 800; font-size: 1.2rem; color: var(--ink); letter-spacing: -.01em; }
#detail .picks button { font-family: 'Noto Sans KR', sans-serif; }
/* 마음 한 줄 */
#detail .cu-quote > .cu-kind:first-child { display: none; }
#detail .cu-quote blockquote { margin: 8px 0 0 !important; border: 0 !important; background: var(--g-soft); border-radius: 16px; padding: 22px 20px !important; font-family: 'Noto Sans KR', sans-serif !important; font-weight: 700; font-size: 1.25rem !important; line-height: 1.6 !important; color: var(--g) !important; }
#detail .cu-quote .cu-note:last-child { background: #FFF7DB; border-radius: 14px; padding: 16px 18px; color: #3A2E00; }
/* 몸 한 가지 */
#detail .bd-line { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 800 !important; font-size: 1.35rem !important; line-height: 1.45 !important; color: var(--ink) !important; letter-spacing: -.01em; }
#detail .bd-todo { background: #FFF7DB !important; border: 0 !important; border-radius: 14px; padding: 16px 18px !important; color: #3A2E00 !important; font-weight: 500; }
#detail .bd .cu-kind { margin-top: 4px !important; }
#detail .cu-pick b { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 800; color: var(--ink); }
#detail .cu-pick { border-radius: 14px; }
.opn-shot[data-up="1"] { background-size: cover; background-position: center top; } /* 상반신으로 새로 받은 사진은 확대 없이 (2026-10-24) */
/* ── 어쩌다 점점 집사 (대표 2026-10-24) ── */
/* 장이 여섯이 되어 2×3 으로 반듯하게 — 나의 수첩도 다른 칸과 같은 크기로 */
.tabs3 button[data-tab="g6"], .tabs3 button[data-tab="g6"][aria-pressed="true"] { background-image: url('../img/tab-pet.jpg') !important; background-size: cover !important; background-position: center 45% !important; }
.tabs-mini button[data-tab="g6"] { background-image: url('../img/tab-pet.jpg'); background-position: center 45%; }
:root { --c-g6: #C47C3E; } body[data-ch="g6"] { --acc: var(--c-g6); }
/* 안쪽 — 코너 안쪽 판갈이 틀 그대로 */
#detail .pet-meta { display: inline-block; font-weight: 700; font-size: .85rem; color: var(--g); background: var(--g-soft); padding: 5px 11px; border-radius: 6px; margin: 6px 0 0; }
#detail .pet-hook { background: var(--g-soft); border-radius: 16px; padding: 20px; margin: 14px 0 0; font-size: 1.12rem; font-weight: 500; line-height: 1.7; color: #23412F; }
#detail .pet-todo { list-style: none; counter-reset: pt; padding: 0; margin: 0; }
#detail .pet-todo li { counter-increment: pt; position: relative; padding: 13px 0 13px 46px; border-bottom: 1px solid var(--hair); margin: 0; }
#detail .pet-todo li:last-child { border-bottom: 0; }
#detail .pet-todo li::before { content: counter(pt); position: absolute; left: 0; top: 13px; width: 30px; height: 30px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: .95rem; display: grid; place-items: center; line-height: 1; }
#detail .pet-vet { background: #FFF7DB; border-radius: 14px; padding: 18px; margin: 20px 0 0; color: #3A2E00; }
#detail .pet-vet b { display: block; font-weight: 800; font-size: .85rem; color: #8A6A00; margin-bottom: 4px; }
#detail .pet-foot { font-size: .9rem !important; color: var(--sub) !important; margin-top: 14px; }
#detail .pet-past { margin: 36px -22px 0; padding: 4px 22px 0; border-top: 8px solid #F4F4F0; }
#detail .pet-past button { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 15px 2px; background: none; border: 0; border-bottom: 1px solid var(--hair); text-align: left; min-width: 0; cursor: pointer; }
#detail .pet-past button span { flex: 1; min-width: 0; font-size: 1.04rem; font-weight: 500; color: var(--ink); line-height: 1.5; word-break: keep-all; }
#detail .pet-past button small { flex: none; font-size: .85rem; color: #999; }
#detail .pet-past button[aria-current="true"] span { color: var(--g); font-weight: 800; }
/* ── 심리 테스트 판갈이 (대표 2026-10-24: 과정은 짧고 결과는 넉넉하게) ── */
.psa .pt-nick { font-family: 'Noto Sans KR', sans-serif; font-size: 1.12rem; font-weight: 700; color: #1F5A3E; margin: 6px 0 0; }
.psa .psa-res .is-sub { display: inline-block; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: .85rem; color: #1F5A3E; background: #EEF5F0; padding: 5px 11px; border-radius: 6px; margin: 4px 0 10px; }
.psa .psa-read { font-family: 'Noto Sans KR', sans-serif; font-size: 1.08rem; line-height: 1.8; color: #1A1A1A; }
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
@media (max-width: 420px) { .pt-two { grid-template-columns: 1fr; } }
.pt-box { border-radius: 14px; padding: 16px; min-width: 0; }
.pt-box b { display: block; font-size: .85rem; font-weight: 800; margin-bottom: 4px; }
.pt-box p { margin: 0; font-size: 1rem; line-height: 1.6; }
.pt-shine { background: #EEF5F0; color: #23412F; } .pt-shine b { color: #1F5A3E; }
.pt-care { background: #FFF7DB; color: #3A2E00; } .pt-care b { color: #8A6A00; }
.pt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pt-pair > div { border: 1.5px solid #E6E6E0; border-radius: 14px; padding: 14px 16px; min-width: 0; }
.pt-pair span { display: block; font-size: .8rem; font-weight: 700; color: #5F6360; }
.pt-pair b { display: block; font-size: 1.05rem; font-weight: 800; color: #1A1A1A; margin-top: 2px; word-break: keep-all; }
.pt-pair small { display: block; font-size: .85rem; color: #5F6360; margin-top: 2px; }
.psa .psa-ask p { font-family: 'Noto Sans KR', sans-serif; font-size: 1.08rem; }
.pt-share { margin-top: 22px; background: #F9E9A8 !important; color: #3A2E00 !important; }
.pt-share-note { text-align: center; font-size: .9rem; color: #5F6360; margin: 8px 0 0; }
.pt-all { margin-top: 22px; border-top: 1px solid #E6E6E0; }
.pt-all summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: #1F5A3E; font-size: 1rem; }
.pt-all-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #F0F0EA; }
.pt-all-row b { font-size: 1rem; } .pt-all-row span { font-size: .9rem; color: #5F6360; }
.pt-all-row.on b { color: #1F5A3E; }
.pt-t em.pt-new { color: #fff !important; background: #1F5A3E; padding: 2px 8px; border-radius: 6px; font-style: normal; display: inline-block; width: fit-content; }
.pt-next { margin-top: 12px; border: 1.5px dashed #C9D6CC; border-radius: 14px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.pt-next span { width: 100%; font-size: .8rem; font-weight: 700; color: #5F6360; }
.pt-next b { font-size: 1.05rem; color: #1A1A1A; } .pt-next small { color: #1F5A3E; font-weight: 700; }
.pt-map { margin-top: 26px; background: #EEF5F0; border-radius: 16px; padding: 20px; }
.pt-map h3 { font-family: 'Noto Sans KR', sans-serif; font-size: 1.6rem; font-weight: 800; color: #1F5A3E; margin: 6px 0 8px; }
.pt-map ul { list-style: none; padding: 0; margin: 0; }
.pt-map li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 10px 0; border-top: 1px solid rgba(31,90,62,.12); }
.pt-map li span { color: #5F6360; font-size: .95rem; } .pt-map li b { color: #1A1A1A; font-size: 1rem; }
.pt-map p { margin: 0; color: #23412F; } .pt-map .pt-map-note { margin-top: 10px; font-size: .85rem; color: #5F6360; }
.psa-photo.psa-type { background: linear-gradient(135deg, #1F5A3E, #2E7A55); display: flex; align-items: center; justify-content: center; }
.psa-photo.psa-type span { color: #F9E9A8; font-family: 'Noto Sans KR', sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; }
/* ── 혼자라서 좋은 날 (대표 2026-10-24) ── 장이 일곱: 여섯 칸은 2×3, 나의 수첩은 맨 아래 넓게 */
.tabs3:not(.compact) button[data-tab="g4"] { grid-column: 1 / -1; aspect-ratio: 16 / 7; min-height: 0; }
@media (max-width: 420px) { .tabs3:not(.compact) button[data-tab="g4"] { aspect-ratio: 16 / 7.6; } }
@media (min-width: 769px) { .tabs3:not(.compact) button[data-tab="g4"] { aspect-ratio: 16 / 4.2; } }
.tabs3 button[data-tab="g7"], .tabs3 button[data-tab="g7"][aria-pressed="true"] { background-image: url('../img/tab-solo.jpg') !important; background-size: cover !important; background-position: center 45% !important; }
.tabs-mini button[data-tab="g7"] { background-image: url('../img/tab-solo.jpg'); background-position: center 45%; }
:root { --c-g7: #2A7896; } body[data-ch="g7"] { --acc: var(--c-g7); }
#detail .so-list { list-style: none; counter-reset: so; padding: 0; margin: 0; }
#detail .so-list li { counter-increment: so; position: relative; padding: 18px 0 18px 46px; border-bottom: 1px solid var(--hair); margin: 0; min-width: 0; }
#detail .so-list li:last-child { border-bottom: 0; }
#detail .so-list li::before { content: counter(so); position: absolute; left: 0; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; font-size: .95rem; display: grid; place-items: center; line-height: 1; }
#detail .so-route li::after { content: ''; position: absolute; left: 14px; top: 52px; bottom: -18px; width: 2px; background: var(--g-soft); }
#detail .so-route li:last-child::after { display: none; }
#detail .so-time { display: block; font-size: .85rem; font-weight: 700; color: var(--g); margin-bottom: 2px; }
#detail .so-name { display: inline; font-size: 1.15rem; font-weight: 800; color: var(--ink); word-break: keep-all; }
#detail .so-where { display: inline-block; margin-left: 8px; font-size: .9rem; color: var(--sub); }
#detail .so-note { margin: 6px 0 0 !important; }
#detail .so-solo { background: var(--g-soft); border-radius: 12px; padding: 12px 14px; margin: 10px 0 0 !important; color: #23412F !important; font-size: 1rem !important; }
#detail .so-solo i { display: block; font-style: normal; font-weight: 800; font-size: .8rem; color: var(--g); margin-bottom: 2px; }
#detail .so-map { display: inline-block; margin-top: 10px; font-size: .92rem; font-weight: 700; color: var(--g); text-decoration: none; border-bottom: 1.5px solid currentColor; }
#detail .so-tip { display: block; margin-top: 6px; }
#detail .so-tip::before { content: '· '; }
/* ── 기획 연재 '전기차 시대' (대표 2026-10-24) — 첫 화면 띠 + 안쪽 글(도표·사진) ── */
/* 기획 칼럼 단추 — 나의 수첩 밑, 금빛 줄 사이 (대표 2026-10-24) */
body.in-chapter .cols-wrap { display: none; }
.cols-wrap { margin: 34px 0 0; text-align: center; }
.cols-wrap + .foot.colophon { margin-top: 34px; }
.cols-orn { display: flex; align-items: center; gap: 12px; color: #C9A24A; font-size: .8rem; margin: 0 0 18px; }
.cols-orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #C9A24A 40%, #C9A24A); }
.cols-orn i:last-child { background: linear-gradient(90deg, #C9A24A, #C9A24A 60%, transparent); }
.cols-orn b { font-weight: 400; }
.cols-head { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 1.08rem; color: #2a2a2a; margin: 0 0 14px; letter-spacing: .04em; }
.cols-head small { display: block; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: .82rem; color: #8a6d2c; letter-spacing: .08em; margin-top: 2px; }
.cols-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.col-tile { position: relative; border: 0; border-radius: 14px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto); background: #ddd center / cover no-repeat; text-align: left; padding: 0; cursor: pointer; box-shadow: 0 6px 18px rgba(60,40,10,0.16); min-width: 0; }
.col-tile[hidden] { display: none; }
.cols-row.one .col-tile { grid-column: 1 / -1; }
.col-tile::after { content: ""; grid-area: 1 / 1; aspect-ratio: 1 / 1; } /* 적어도 정사각, 글이 길면 늘어난다 — 두 칸 높이는 같은 줄이라 맞춰진다 */
.cols-row.one .col-tile::after { aspect-ratio: 16 / 9; }
.col-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 70% 42% at center, rgba(14,12,8,.42) 0%, rgba(14,12,8,.22) 55%, rgba(14,12,8,0) 100%); /* 사진 전체에 막을 씌우지 않는다(대표 2026-10-24: 선명하지 않다) — 글씨 뒤에만 */ }
.col-tile .ct-in { grid-area: 1 / 1; align-self: center; text-align: center; align-items: center; position: relative; padding: 18px 14px; color: #fff; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.col-tile small { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: #1F5A3E; padding: 3px 9px; border-radius: 6px; margin-bottom: 4px; }
.col-tile b { font-size: 1.15rem; font-weight: 700; line-height: 1.38; word-break: keep-all; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 16px rgba(0,0,0,.55); }
.col-tile em { font-style: normal; font-size: .8rem; opacity: .9; line-height: 1.4; word-break: keep-all; }
#detail .ev .ev-by { font-size: .85rem !important; color: #888 !important; margin: 10px 0 0 !important; line-height: 1.5 !important; }
#detail .ev .ev-p { font-size: 1.06rem; line-height: 1.8; color: var(--ink, #1a1a1a); margin: 20px 0 0 !important; word-break: keep-all; }
#detail .ev .is-sub + .ev-p { margin-top: 6px !important; }
#detail .ev-chart { margin: 22px 0 6px; padding: 18px 16px 14px; background: #F7F8F5; border: 1px solid #E5EAE3; border-radius: 16px; }
#detail .ev-chart figcaption { font-weight: 800; font-size: 1.02rem; color: #1F3A2B; line-height: 1.45; word-break: keep-all; margin-bottom: 10px; }
#detail .ev-chart figcaption small { display: block; font-weight: 500; font-size: .8rem; color: #888; margin-top: 2px; }
#detail .ev-chart svg { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
#detail .ev-chart .ev-v { font: 700 15px 'Noto Sans KR', sans-serif; fill: #7a8a80; }
#detail .ev-chart .ev-v.hi { fill: #1F5A3E; font-size: 18px; }
#detail .ev-chart .ev-l { font: 600 13px 'Noto Sans KR', sans-serif; fill: #555; }
#detail .ev-chart .ev-big { font: 800 34px 'Noto Sans KR', sans-serif; fill: #1F5A3E; }
#detail .ev-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
#detail .ev-donut svg { width: min(200px, 55vw); }
#detail .ev-key { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: #333; min-width: 0; }
#detail .ev-key li { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; line-height: 1.45; word-break: keep-all; }
#detail .ev-key i { flex: none; width: 12px; height: 12px; border-radius: 3px; margin-top: .3em; }
#detail .ev-rank { list-style: none; margin: 0; padding: 0; }
#detail .ev-rank li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; grid-template-areas: "rk nm v" "rk tr tr"; column-gap: 8px; row-gap: 4px; align-items: center; padding: 7px 0; border-bottom: 1px solid #ECEFEA; }
#detail .ev-rank li:last-child { border-bottom: 0; }
#detail .ev-rk { grid-area: rk; font-weight: 800; color: #999; font-size: .9rem; align-self: start; }
#detail .ev-nm { grid-area: nm; font-size: .95rem; color: #333; min-width: 0; word-break: keep-all; }
#detail .ev-nm em { font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; background: #1F5A3E; padding: 1px 6px; border-radius: 4px; margin-left: 4px; white-space: nowrap; }
#detail .ev-rank b { grid-area: v; font-size: .92rem; color: #333; white-space: nowrap; }
#detail .ev-track { grid-area: tr; height: 10px; background: #E8ECE6; border-radius: 5px; overflow: hidden; }
#detail .ev-track span { display: block; height: 100%; background: #C9D8CE; border-radius: 5px; }
#detail .ev-rank li.hi .ev-track span { background: #1F5A3E; }
#detail .ev-rank li.hi .ev-rk, #detail .ev-rank li.hi b { color: #1F5A3E; }
#detail .ev .ev-legend { font-size: .88rem !important; line-height: 1.5 !important; color: #1F5A3E; font-weight: 600; margin: 10px 0 0; word-break: keep-all; }
#detail .ev .ev-src { font-size: .76rem !important; color: #999 !important; margin: 8px 0 0 !important; line-height: 1.45 !important; text-align: right; word-break: keep-all; }
#detail .ev-photo { margin: 22px 0 6px; }
#detail .ev-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: #eee; }
#detail .ev-photo figcaption { font-size: .9rem; color: #444; line-height: 1.55; margin-top: 8px; word-break: keep-all; }
#detail .ev-photo figcaption small { display: block; font-size: .74rem; color: #aaa; margin-top: 2px; }
#detail .ev-box { background: var(--g-soft, #EEF5F0); border-radius: 14px; padding: 18px; margin: 24px 0 0; font-size: 1.04rem; line-height: 1.7; color: #23412F; font-weight: 500; word-break: keep-all; }
#detail .ev-box > b:first-child { display: block; font-size: .85rem; font-weight: 800; color: #1F5A3E; margin-bottom: 4px; }
#detail .ev-cons { margin: 4px 0 0; padding-left: 1.1em; }
#detail .ev-cons li { margin: 6px 0; line-height: 1.65; word-break: keep-all; }
#detail .ev-next { margin: 24px 0 0; padding: 16px 18px; border: 1px dashed #C9D8CE; border-radius: 14px; font-weight: 700; color: #1F3A2B; word-break: keep-all; }
#detail .ev-next small { display: block; font-size: .78rem; font-weight: 700; color: #8a7a4a; margin-bottom: 4px; }
#detail .ev-sources { margin: 26px 0 0; font-size: .82rem; color: #777; line-height: 1.6; }
#detail .ev-sources b { color: #555; }
#detail .ev-sources ol { margin: 4px 0 8px; padding-left: 1.3em; }
#detail .ev-sources a { color: #557; word-break: keep-all; overflow-wrap: anywhere; }
#detail .ev .ev-sources p { font-size: .8rem !important; color: #888 !important; line-height: 1.6 !important; margin: 6px 0 0 !important; word-break: keep-all; }
#detail .ev .ev-sources li { font-size: .8rem; line-height: 1.55; margin: 3px 0; }
#detail .ev .ev-p b, #detail .ev .ev-cons b, #detail .ev .ev-box b:not(:first-child), #detail .ev .pet-hook b { font-weight: 800; color: #111; }
#detail .ev .ev-box b:first-child { font-weight: 800; }
#detail .ev .ev-cons b, #detail .ev .ev-box b:not(:first-child) { display: inline; font-size: inherit; color: #111; margin: 0; font-weight: 800; }
/* ── 오마주 사랑방 (대표 2026-10-25): 재미나이 시안의 결(미색 종이·명조 주제·말풍선 없는 글) + 가로 칸(나의 수첩만 한 크기)
— 세로로 길면 오히려 촌스럽다. 글은 한 번에 하나씩, 아래에서 떠올라 위로 올라간다. ── */
.cols-orn.tk-orn { margin: 30px 0 22px; }
.tk-orn + .talk { margin-top: 0; }
.talk { position: relative; margin: 22px 0 0; border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left;
background: #F9F8F6; border: 1px solid #E8E6E1; box-shadow: 0 15px 40px rgba(0,0,0,0.08); padding: 20px 22px 16px; }
.tk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.tk-k { font: 600 .84rem Pretendard, 'Noto Sans KR', sans-serif; letter-spacing: .02em; color: #2C4B3B; min-width: 0; white-space: nowrap; }
.tk-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: #FFF3EC; border: 1px solid #F3C9B1; border-radius: 999px; padding: 3px 10px;
font: 700 .66rem Pretendard, 'Noto Sans KR', sans-serif; letter-spacing: .12em; color: #B4461C; } /* LIVE 는 따뜻한 주황 — 머리가 하늘빛 말풍선이 되면서 블루가 묻혔다 (대표 2026-10-25) */
.tk-live i { width: 6px; height: 6px; border-radius: 50%; background: #E8622F; animation: tkPulse 2s infinite; }
@keyframes tkPulse { 0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(232,98,47,.6); } 70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(232,98,47,0); } 100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(232,98,47,0); } }
.tk-q { margin: 10px 0 0; padding-bottom: 14px; border-bottom: 1px solid #E8E6E1; font: 700 min(1.2rem, 5.4vw)/1.4 'Noto Serif KR', 'Nanum Myeongjo', serif; color: #222; word-break: keep-all; }
.tk-q small { display: block; margin-top: 5px; font: 400 .84rem/1.5 Pretendard, 'Noto Sans KR', sans-serif; color: rgba(34,34,34,0.65); }
.tk-win { position: relative; height: 10em; overflow: hidden; margin-top: 6px;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); }
.tk-reel { list-style: none; margin: 0; padding: 0; will-change: transform; }
.tk-it { height: 5em; box-sizing: border-box; padding: .45em 0; display: flex; align-items: center; min-width: 0;
opacity: 0; transform: translateY(12px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1); }
.tk-it.in { opacity: 1; transform: none; }
.tk-bb { flex: 1 1 auto; min-width: 0; }
.tk-bb b { display: flex; align-items: center; gap: 8px; font: 600 .84rem Pretendard, 'Noto Sans KR', sans-serif; color: #222; min-width: 0; margin-bottom: 3px; }
.tk-bb b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-bb b em { font-style: normal; font-weight: 500; font-size: .62rem; color: #2C4B3B; background: rgba(44,75,59,0.1); border: 1px solid rgba(44,75,59,0.2); border-radius: 4px; padding: 1px 6px; }
.tk-bb b i { font-style: normal; font-weight: 400; font-size: .72rem; color: #888; margin-left: auto; white-space: nowrap; }
.tk-bb p { margin: 0; font: 400 .94rem/1.55 Pretendard, 'Noto Sans KR', sans-serif; color: rgba(34,34,34,0.9); word-break: keep-all;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-typing { gap: 5px; }
.tk-typing small { font: italic 400 .86rem Pretendard, 'Noto Sans KR', sans-serif; color: #888; white-space: nowrap; }
.tk-dots { display: inline-flex; gap: 3px; transform: translateY(2px); }
.tk-dots i { width: 4px; height: 4px; border-radius: 50%; background: #888; animation: tkDot 1.4s infinite both; }
.tk-dots i:nth-child(2) { animation-delay: .2s; } .tk-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes tkDot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.tk-empty p { color: #888; }
.tk-foot { margin-top: 10px; }
.tk-r { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tk-n { font: 400 .74rem Pretendard, 'Noto Sans KR', sans-serif; color: #888; white-space: nowrap; }
.tk-n b { font-weight: 600; color: #2C4B3B; }
.tk-go { display: block; text-align: center; padding: 12px; border-radius: 12px; background: #2C4B3B; color: #fff; font: 500 .94rem Pretendard, 'Noto Sans KR', sans-serif; box-shadow: 0 4px 12px rgba(44,75,59,0.2); }
.tk-go b { font-size: 1.1em; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .tk-reel { transition: none !important; } .tk-it { transition: none; } .tk-dots i, .tk-live i { animation: none; } }
/* #talk 안쪽: 오늘 글 전부 + 쓰기 */
#talk-body .tk-head { margin: 26px 0 14px; }
#talk-body .tk-head .tk-k { display: inline-block; background: #1F5A3E; color: #fff; }
#talk-body .tk-head h3 { margin: 10px 0 4px; font: 700 1.36rem/1.4 'Noto Serif KR', 'Nanum Myeongjo', serif; color: #1d1d1b; word-break: keep-all; }
#talk-body .tk-head p { margin: 0; color: #6b6b63; font-size: .9rem; }
#talk-body .tk-form { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 16px rgba(40,50,30,.07); }
#talk-body .tk-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font: 500 1rem/1.5 Pretendard, 'Noto Sans KR', sans-serif; resize: vertical; }
#talk-body .tk-fb { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
#talk-body .tk-fb small { color: #8a8a80; }
#talk-body .tk-list { list-style: none; margin: 18px 0 0; padding: 0; }
#talk-body .tk-list li { position: relative; background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(40,50,30,.05); }
#talk-body .tk-list b { font: 700 .86rem Pretendard, 'Noto Sans KR', sans-serif; color: #1F5A3E; }
#talk-body .tk-list b em { font-style: normal; font-size: .7rem; color: #fff; background: #C9A24A; border-radius: 4px; padding: 0 5px; margin-left: 6px; }
#talk-body .tk-list p { margin: 4px 0 0; font: 500 1rem/1.55 Pretendard, 'Noto Sans KR', sans-serif; color: #2b2b28; word-break: keep-all; }
#talk-body .tk-list button { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: #a3a399; font-size: .78rem; cursor: pointer; }
/* 사랑방 말로 쓰기 단추 (대표 2026-10-25) — 남기기 옆, 큰 글씨에선 줄바꿈 */
#talk-body .tk-fb { flex-wrap: wrap; gap: 10px; }
#talk-body .tk-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-left: auto; min-width: 0; }
#talk-body .tk-mic { background: #fff; border: 1px solid #C9D6E8; color: #1F4E8C; font-weight: 600; white-space: nowrap; }
#talk-body .tk-mic:disabled { opacity: .7; }
/* 사랑방 머리 — 하늘빛 창밖 사진 위에 이름·주제 (대표 2026-10-25: "제목 부분도 배경 이미지, 구분하기 쉽게") */
.tk-hd { position: relative; margin: -20px -22px 0; padding: 18px 22px 16px; border-radius: 15px 15px 0 0;
background: linear-gradient(90deg, rgba(247,251,255,0.80) 0%, rgba(247,251,255,0.62) 55%, rgba(247,251,255,0.30) 100%), url('../img/talk-head.jpg') 42% 55% / 190% auto no-repeat, #EEF5FC; } /* 말풍선 무늬(대표 제공) — 글씨 쪽은 옅게 */
.tk-hd .tk-q { border-bottom: 0; padding-bottom: 0; color: #13283F; text-shadow: 0 1px 10px rgba(255,255,255,0.85); }
.tk-hd .tk-k { color: #1C3B2C; text-shadow: 0 1px 8px rgba(255,255,255,0.9); }
.tk-hd .tk-n { color: #2a3a48; text-shadow: 0 1px 8px rgba(255,255,255,0.9); }
.tk-hd .tk-live { background: #FFF3EC; box-shadow: 0 1px 4px rgba(180,70,28,0.12); }
.tk-hd + .tk-win { margin-top: 12px; }
/* 글 끝 물음 → 사랑방 (대표 2026-10-25 "일방향이 되면 안 된다") — 하늘빛 한 줄, 조르지 않게 작게 */
.ask { margin: 26px 0 6px; padding: 16px 18px; border-radius: 14px; background: #EEF5FC; border: 1px solid #D6E4F3; }
.ask-q { margin: 0; font: 600 1.02rem/1.55 'Noto Serif KR', 'Nanum Myeongjo', serif; color: #1E3550; word-break: keep-all; }
.ask-go { margin-top: 10px; padding: 0; border: 0; background: none; font: 600 .9rem 'Noto Sans KR', sans-serif; color: #2C4B3B; cursor: pointer; white-space: nowrap; }
.ask-go span { margin-left: 2px; }
#talk-body .tk-ask { position: relative; margin: 0 0 12px; padding: 12px 40px 12px 14px; border-radius: 12px; background: #EEF5FC; border: 1px solid #D6E4F3; }
#talk-body .tk-ask small { display: block; color: #4A6A8A; font-size: .8rem; }
#talk-body .tk-ask p { margin: 4px 0 0; font-weight: 600; color: #1E3550; word-break: keep-all; }
#talk-body .tk-ask button { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 1.3rem; color: #6A7F94; cursor: pointer; }
#talk-body .tk-from { margin-left: 6px; font-weight: 400; font-size: .76rem; color: #4A6A8A; background: #EEF5FC; border-radius: 6px; padding: 1px 6px; }
/* ── 오늘의 음악과 함께 (대표 2026-10-25) — js/mood.js ── */
.mz { margin: 34px 0 8px; padding-top: 26px; border-top: 1px solid #E7E1D3; min-width: 0; }
.mz-h { margin: 6px 0 4px; font: 900 1.25rem/1.4 'Noto Serif KR', 'Nanum Myeongjo', serif; color: #1F2A24; word-break: keep-all; }
.mz-lead { margin: 0 0 14px; color: #5B655F; font-size: .92rem; line-height: 1.55; word-break: keep-all; }
.mz-lead b { color: #1F5A43; }
.mz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mz-c { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; background: #fff; border: 1px solid #E7E1D3; border-radius: 14px; padding: 14px 40px 12px 14px; min-width: 0; color: #1F2A24; font: inherit; cursor: pointer; word-break: keep-all; }
.mz-c b { display: block; font: 700 1.02rem/1.35 'Noto Serif KR', 'Nanum Myeongjo', serif; }
.mz-c small { display: block; color: #6B756F; font-size: .82rem; margin-top: 4px; line-height: 1.45; }
.mz-c i { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: #F9E9A8; color: #3A2E00; font-style: normal; display: flex; align-items: center; justify-content: center; }
.mz-c em { display: block; font-style: normal; color: #1F5A43; font-size: .78rem; margin-top: 6px; }
.mz-c:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mz-c.on { border-color: #1F5A43; box-shadow: inset 0 0 0 2px #1F5A43; }
.mz-note { margin: 10px 0 0; font-size: .8rem; color: #6B756F; line-height: 1.5; word-break: keep-all; }
.mz-bar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; max-width: 560px; margin: 0 auto;
background: #123E2D; color: #fff; border-radius: 16px; padding: 10px 10px 10px 14px; display: flex; align-items: center; gap: 6px; box-shadow: 0 8px 26px rgba(0,0,0,.25); }
.mz-bar[hidden] { display: none; }
.mz-bt { flex: 1; min-width: 0; }
.mz-bt b { display: block; font: 700 .95rem 'Noto Serif KR', 'Nanum Myeongjo', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-bt small { display: block; font-size: .74rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-bar button { flex: none; background: none; border: 0; color: #fff; font-size: 1rem; min-width: 36px; height: 40px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mz-bar .mz-pp { background: #F9E9A8; color: #3A2E00; width: 42px; height: 42px; border-radius: 50%; }
.mz-bar .mz-x { font-size: .8rem; border: 1px solid rgba(255,255,255,.35); padding: 0 10px; }
body.mz-on { padding-bottom: 76px; }
.pk-sec { display: inline-block; margin: 0 0 12px; padding: 4px 10px; border-radius: 6px; background: #E6F1EA; color: #1F5A43; font-weight: 700; font-size: .9rem; }
.mz-c b { overflow-wrap: anywhere; }
/* 단추마다 그 분위기 사진(대표 제공 2026-10-25) — 왼쪽은 흰 막으로 글씨 자리, 사진은 오른쪽에 */
.mz-c { min-height: 118px; background-color: #fff; background-size: cover; background-position: right center; background-repeat: no-repeat; }
.mz-c b, .mz-c small { text-shadow: 0 0 8px rgba(255,255,255,.9); }
/* 사랑방 머리 판갈이 (대표 2026-10-25 밤: 그림 배너로, 조금 크게) — 가운데 빈 벽에 주제, 양옆은 창가·라디오 그림 */
.tk-hd { min-height: clamp(190px, 52vw, 300px); padding: 16px 22px 18px; display: flex; flex-direction: column;
background: radial-gradient(ellipse 46% 60% at 50% 56%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.45) 55%, rgba(255,255,255,0) 100%), url('../img/talk-head2.jpg?v=1') center 40% / cover no-repeat, #F3EFE6; }
.tk-hd .tk-top { position: relative; }
.tk-hd .tk-k { background: rgba(255,255,255,.82); padding: 3px 9px; border-radius: 6px; }
.tk-hd .tk-q { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; margin: 8px auto 0; max-width: 64%;
font-size: min(1.3rem, 5.6vw); color: #1E2A33; text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9); }
.tk-hd .tk-q small { color: rgba(30,42,51,.72); }
.tk-hd .tk-n { background: rgba(255,255,255,.82); padding: 2px 8px; border-radius: 6px; text-shadow: none; }
/* LIVE 는 다시 파란색 (대표 2026-10-25 밤 — 머리가 따뜻한 그림 배너로 바뀌어 블루가 산다) */
.tk-live, .tk-hd .tk-live { background: #EEF4FF; border-color: #BFD3F5; color: #1D4FA0; box-shadow: 0 1px 4px rgba(29,79,160,0.12); }
.tk-live i { background: #2F6FE0; animation-name: tkPulseB; }
@keyframes tkPulseB { 0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(47,111,224,.6); } 70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(47,111,224,0); } 100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(47,111,224,0); } }
/* 사랑방 머리 글씨를 또렷하게 (대표 2026-10-25 22:40) — 이름은 '전기차 시대' 칸 제목과 같은 크기·굵은 고딕, 이름·주제 모두 진한 검정 */
.tk-hd .tk-k { font-family: 'Noto Sans KR', sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.38; color: #111; text-shadow: none; padding: 4px 11px; }
.tk-hd .tk-q { color: #111; font-weight: 800; text-shadow: 0 0 12px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.9); }
/* 기획 연재 사진 띠 — 옆으로 넘겨 보는 차 사진 (대표 2026-10-25) */
#detail .ev-gal { margin: 24px -22px 8px; }
#detail .ev-gal-t { padding: 0 22px 10px; font-weight: 700; font-size: 1rem; color: #1F3B2E; word-break: keep-all; }
#detail .ev-gal-t small { display: block; font-weight: 400; font-size: .8rem; color: #888; margin-top: 2px; }
#detail .ev-gal-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 22px 6px; scroll-padding: 0 22px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#detail .ev-gal-row::-webkit-scrollbar { display: none; }
#detail .ev-gal-it { position: relative; flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
#detail .ev-gal-it img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; background: #eee; }
#detail .ev-gal-no { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; padding: 2px 8px; border-radius: 10px; }
#detail .ev-gal-it p { font-size: .88rem; color: #444; line-height: 1.5; margin: 8px 2px 0; word-break: keep-all; }
#detail .ev-gal-it p small { display: block; font-size: .72rem; color: #aaa; margin-top: 2px; }
@media (min-width: 769px) { #detail .ev-gal { margin-left: 0; margin-right: 0; } #detail .ev-gal-row, #detail .ev-gal-t { padding-left: 0; padding-right: 0; } #detail .ev-gal-it { flex-basis: 62%; } }
/* 기획 연재 — 바로잡습니다 · AI 주석 (대표 2026-10-26) */
#detail .ev-fix { margin: 22px 0 0; padding: 12px 14px; background: #FFF8E1; border-radius: 10px; font-size: .86rem; color: #5a4a1a; line-height: 1.6; word-break: keep-all; }
#detail .ev-fix b { display: block; margin-bottom: 4px; color: #3A2E00; }
#detail .ev-fix ul { margin: 0; padding-left: 1.2em; }
#detail .ev-sources .ev-ai { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e6e1d6; color: #888; font-size: .78rem; word-break: keep-all; }
/* ── 맨 끝 배너 둘 (대표 2026-10-26): 홈 화면에 두기 · 카톡으로 보내기 — 집안 공식(사진 + 짙은 막 + 흰 글씨), 막은 왼쪽만 ── */
.endb-wrap { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 12px; margin: 22px 0 0; }
@media (min-width: 769px) { .endb-wrap { grid-template-columns: 1fr 1fr; gap: 16px; } }
.endb { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; width: 100%; min-width: 0;
min-height: 120px; padding: 15px 20px; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left; color: #fff;
background-size: cover; background-position: right center; box-shadow: 0 6px 18px rgba(40,30,10,0.10); font: inherit; }
.endb[hidden] { display: none !important; }
.endb-in { background-image: linear-gradient(90deg, rgba(10,45,32,0.82) 0%, rgba(10,45,32,0.55) 45%, rgba(10,45,32,0.05) 78%), url(../img/end-install2.jpg); } /* 보내기(노랑)와 갈라지게 서늘한 초록 (대표 2026-10-26) */
.endb-sh { background-image: linear-gradient(90deg, rgba(74,50,6,0.80) 0%, rgba(74,50,6,0.52) 45%, rgba(74,50,6,0.04) 78%), url(../img/end-share.jpg?v=2); } /* 노란 사진엔 꿀갈색 막 (대표 2026-10-26 카톡 느낌) */
.endb .eb-t { display: flex; flex-direction: column; gap: 2px; max-width: 80%; min-width: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.endb small { font-size: 0.85rem; letter-spacing: 0.04em; color: #F3E7C4; font-weight: 600; }
.endb b { font-family: "Noto Serif KR", serif; font-size: 1.25rem; font-weight: 700; line-height: 1.3; word-break: keep-all; }
.endb em { font-style: normal; font-size: 0.95rem; color: rgba(255,255,255,0.9); line-height: 1.45; word-break: keep-all; }
.endb .eb-go { display: inline-block; padding: 5px 13px; border-radius: 8px; background: #F9E9A8; color: #3A2E00; font-weight: 700; font-size: 0.95rem; text-shadow: none; }
html.big .endb { min-height: 130px; }
html.big .endb .eb-t { max-width: 86%; }
.tk-orn + .endb-wrap { margin-top: 0; }