/* 홈 '맛보기' 섹션(이달의 밥상 아래): 서브메뉴 아홉 곳을 한 입씩 맛보는 카드. 접두 tz- 로 홈 다른 규칙과 겹치지 않게 한다. */
.tz-band{background:linear-gradient(180deg,var(--paper) 0,#f6f0e3 14%,#f6f0e3 86%,var(--paper) 100%);margin:34px 0 8px;padding:44px 0 52px}
.tz{--tz-brown:#8a5a2b;--tz-cream:#f7f1e4;--tz-edge:#d9d0bd;--tz-tint:#e8f0ea;--tz-tint-edge:#b9d0c3}
.tz-head{text-align:center;margin:0 auto 30px;max-width:640px}
.tz-head .kicker{margin:0 0 6px;color:var(--tz-brown);font-weight:700;letter-spacing:.04em}
.tz-head h2{margin:0;font:400 clamp(1.9rem,5.2vw,2.7rem)/1.3 "Poor Story",cursive;color:var(--point)}
.tz-lead{margin:10px 0 0;color:var(--muted);line-height:1.7}
.tz-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.tz-card{position:relative;display:flex;flex-direction:column;padding:24px 24px 22px;border:1px solid var(--line);border-radius:var(--r-md,12px);background:var(--paper);overflow:hidden;min-width:0}
.tz-no{margin:0 0 8px;font-size:var(--fs-sm,14px);font-weight:700;letter-spacing:.05em;color:var(--tz-brown)}
.tz-no b{display:inline-block;margin-right:7px;padding:1px 8px;border-radius:999px;background:var(--tz-tint);border:1px solid var(--tz-tint-edge);color:var(--point);font-weight:700;letter-spacing:0}
.tz-card h3{margin:0;font:400 clamp(1.7rem,3.4vw,2.2rem)/1.25 "Poor Story",cursive;color:var(--point)}
.tz-sub{margin:6px 0 16px;font-size:var(--fs-sm,14px);line-height:1.65;color:var(--muted)}
.tz-demo{flex:1;min-height:0}
.tz-cta{align-self:flex-start;margin-top:18px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 20px;border-radius:999px;border:1px solid var(--point);background:transparent;color:var(--point);text-decoration:none;font-weight:700;font-size:var(--fs-sm,14px);transition:background .18s ease,color .18s ease}
.tz-cta:visited{color:var(--point)}
.tz-cta:hover,.tz-cta:focus-visible{background:var(--point);color:#fff}
.tz-cta:focus-visible,.tz button:focus-visible,.tz-card a:focus-visible{outline:3px solid #d9a441;outline-offset:2px}
.tz-cta i{font-style:normal;transition:transform .18s ease}.tz-cta:hover i{transform:translateX(3px)}
.tz button{font:inherit;cursor:pointer}
.tz-mini{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 16px;border-radius:999px;border:1px solid var(--point);background:transparent;color:var(--point);font-size:var(--fs-sm,14px);font-weight:700}
.tz-mini:hover{background:var(--tz-cream)}

/* 모든 카드 공통: 종이색 바탕 + 1px 선. 카드 안 상자·버튼·탭은 한 가지 모양(크림 상자 12px · 딥그린 알약)으로 통일 */
.tz-card{background:var(--paper)}
.tz-tabs{display:flex;gap:6px;margin:0 0 12px}
.tz-tab{flex:1;min-height:44px;padding:6px 10px;border:1px solid var(--point);border-radius:999px;background:transparent;color:var(--point);font-weight:700}
.tz-tab[aria-selected="true"]{background:var(--tz-tint);border-color:var(--point);color:var(--point);box-shadow:inset 0 -3px 0 var(--point)}
.tz-box,.tz-steps li,.tz-onestep,.tz-notes li,.tz-type{border:1px solid var(--tz-edge);border-radius:12px;background:var(--tz-cream)}
.tz-pill,.tz-order li,.tz-vague{display:inline-block;padding:2px 12px;border-radius:999px;border:1px solid var(--tz-edge);background:var(--tz-cream);color:var(--ink);font-size:var(--fs-sm,14px);font-weight:700}

/* 01 복음밥 — 다섯 걸음 길 */
.tz-gospel,.tz-malgi,.tz-table,.tz-pilta{grid-column:span 6}
.tz-path{position:relative;display:flex;justify-content:space-between;margin:6px 4px 0;padding-top:10px}
.tz-path::before{content:"";position:absolute;left:18px;right:18px;top:27px;height:2px;background:var(--tz-edge)}
.tz-path::after{content:"";position:absolute;left:18px;top:27px;height:2px;width:calc((100% - 36px) * var(--tz-p,0) / 4);background:var(--point);transition:width .5s ease}
.tz-node{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--muted)}
.tz-node span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--tz-edge);background:var(--paper);color:var(--point);font-weight:700;font-size:var(--fs-sm,14px);transition:all .25s ease}
.tz-node span:last-child{font-size:var(--fs-sm,14px);font-weight:700}
.tz-node[aria-current="true"] span:first-child{background:var(--tz-tint);border-color:var(--point);color:var(--point);transform:scale(1.18)}
.tz-node[aria-current="true"]{color:var(--point)}
.tz-gq{margin:22px 0 0;min-height:4.4em;font:400 clamp(1.45rem,3vw,2rem)/1.4 "Poor Story",cursive;color:var(--point);transition:opacity .25s ease}
.tz-gq.fade{opacity:0}
.tz-gospel .tz-meta{margin:8px 0 0;font-size:var(--fs-sm,14px);color:var(--muted)}

/* 02 말기찬 — 예배 순서 */
.tz-tp{margin:0;min-height:3.6em;font:400 1.35rem/1.5 "Poor Story",cursive;color:var(--ink)}
.tz-order{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 0;padding:0;list-style:none}
.tz-order li.on{background:var(--tz-tint);border-color:var(--point);color:var(--point)}
.tz-time{margin:12px 0 0;font-size:var(--fs-sm,14px);color:var(--muted)}

/* 03 묵상 시작하기 — 네 칸 계단 */
.tz-start,.tz-stepc,.tz-qa{grid-column:span 4}
.tz-steps{margin:0;padding:0;list-style:none;counter-reset:s}
.tz-steps li{position:relative;margin:0 0 6px;padding:9px 12px 9px 46px;font-size:var(--fs-sm,14px);line-height:1.5;transition:transform .2s ease}
.tz-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tz-tint);border:1px solid var(--tz-tint-edge);color:var(--point);font-weight:700;font-size:var(--fs-sm,14px)}
.tz-steps li:nth-child(2){margin-left:10px}.tz-steps li:nth-child(3){margin-left:20px}.tz-steps li:nth-child(4){margin-left:30px;border-color:var(--point)}
.tz-steps li:hover{transform:translateX(4px)}
.tz-quote{margin:12px 0 0;font:400 1.2rem/1.45 "Poor Story",cursive;color:var(--point)}

/* 04 오늘의 한 걸음 — 막연한 마음 → 작은 걸음 */
.tz-vague{margin:0;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(33,75,67,.45)}
.tz-arrow{display:block;margin:6px 0 6px 18px;color:var(--point);font-size:var(--fs-2xl,24px);line-height:1}
.tz-onestep{margin:0;padding:14px 16px;border-color:var(--point);font:400 1.3rem/1.5 "Poor Story",cursive;color:var(--point);transition:opacity .25s ease,transform .25s ease}
.tz-fadeable.fade{opacity:0;transform:translateY(6px)}
.tz-stepc .tz-mini{margin-top:12px}

/* 05 신앙 Q&A — 질문 뽑기 */
.tz-qtext{position:relative;margin:4px 0 0;padding:6px 0 0 4px;min-height:5.6em;font:400 1.45rem/1.45 "Poor Story",cursive;color:var(--ink);transition:opacity .25s ease}
.tz-qtext::before{content:"“";position:absolute;left:-6px;top:-18px;font:400 3.6rem/1 Georgia,serif;color:var(--tz-edge)}
.tz-qa .tz-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.tz-qa .tz-link{font-size:var(--fs-sm,14px);font-weight:700;color:var(--point)}

/* 06 주님의 식탁 — 타임라인 */
.tz-tl{position:relative;display:flex;gap:0;margin:8px 0 0;padding:0 0 12px;scrollbar-width:thin;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.tz-tl::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--tz-edge)}
.tz-tl li{position:relative;flex:1 0 62px;scroll-snap-align:start;padding:34px 2px 0;text-align:center;font-size:var(--fs-sm,14px);line-height:1.4;font-weight:700;color:var(--ink)}
.tz-tl li::before{content:"";position:absolute;left:50%;top:10px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--paper);border:2px solid var(--point);transition:transform .2s ease,background .2s ease}
.tz-tl li:last-child::before{background:var(--tz-tint)}
.tz-tl li:hover::before{transform:scale(1.3);background:var(--tz-tint)}

/* 07 성경필타 — 연한 글씨 위에 먹을 채운다 */
.tz-verse{margin:2px 0 12px;padding:0 2px;font:400 1.35rem/34px "Poor Story",cursive;color:#a8a290;min-height:102px;background:repeating-linear-gradient(180deg,transparent 0,transparent 33px,var(--tz-edge) 33px,var(--tz-edge) 34px);border-radius:var(--r-sm,8px)}
.tz-verse .on{color:var(--ink)}.tz-verse .miss{color:#b4412f;background:rgba(180,65,47,.1)}
.tz-type{width:100%;box-sizing:border-box;min-height:46px;padding:8px 14px;font:inherit;font-size:1rem;background:#fff}
.tz-type:focus{outline:3px solid #d9a441;outline-offset:1px}
.tz-pnote{margin:8px 0 0;font-size:var(--fs-sm,14px);color:var(--muted);min-height:1.5em}
.tz-pnote.done{color:var(--point);font-weight:700}

/* 08 알쓸신성 — 뒤집는 카드 */
.tz-alssul,.tz-fruit{grid-column:span 6}
.tz-flip{perspective:900px;margin:0}
.tz-flipbtn{position:relative;display:block;width:100%;height:190px;padding:0;border:0;background:none;text-align:left;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.tz-flipbtn.on{transform:rotateY(180deg)}
.tz-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:var(--point);background:var(--tz-tint);border:1px solid var(--tz-tint-edge)}
.tz-face .tz-chip{align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--tz-tint-edge);color:var(--point);font-size:var(--fs-sm,14px);font-weight:700}
.tz-face .tz-fq{font:400 1.4rem/1.45 "Poor Story",cursive}
.tz-face .tz-hint{font-size:var(--fs-sm,14px);opacity:.9}
.tz-back{transform:rotateY(180deg);background:var(--paper);color:var(--ink);border:1px solid var(--point)}
.tz-back .tz-chip{background:var(--tz-tint);color:var(--point)}
.tz-back .tz-fq{font-size:var(--fs-xl,20px);color:var(--ink)}
.tz-back .tz-hint{color:var(--muted);opacity:1}
.tz-alssul .tz-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* 09 열매나눔 — 쪽지 */
.tz-notes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tz-notes li{padding:11px 14px;font-size:var(--fs-sm,14px);line-height:1.55}
.tz-notes small{display:block;margin-bottom:2px;font-weight:700;color:var(--muted)}
.tz-notes b{display:block;font-weight:700;color:var(--ink)}

.tz-hintbar{display:none;justify-content:center;gap:6px;margin:6px 0 0;font-size:var(--fs-sm,14px);color:var(--muted)}
.tz-hintbar b{color:var(--point)}
/* 태블릿: 두 칸씩 짝(1·2, 3·4, 5는 혼자, 6·7, 8·9) */
@media(max-width:1000px){
 .tz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tz-gospel,.tz-malgi,.tz-start,.tz-stepc,.tz-table,.tz-pilta,.tz-alssul,.tz-fruit{grid-column:span 1}
 .tz-qa{grid-column:span 2}
}
/* 모바일: 배경은 가장자리까지(밴드가 .page 바깥 형제), 카드는 옆으로 밀어 넘기는 줄 */
@media(max-width:700px){
 .tz-band{margin-top:26px;padding:34px 0 40px}
 .tz-head{padding:0 16px;margin-bottom:20px}
 .tz-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px max(16px,calc((100vw - 560px)/2)) 14px;scroll-padding:0 16px;overscroll-behavior-x:contain}
 .tz-grid::-webkit-scrollbar{height:4px}.tz-grid::-webkit-scrollbar-thumb{background:#d6c9a8;border-radius:var(--r-sm,8px)}
 .tz-card{flex:0 0 min(86vw,420px);scroll-snap-align:center;padding:20px 18px 18px}
 .tz.page{width:100%}
 .tz-hintbar{display:flex}
 .tz-card h3{font-size:1.75rem}
 .tz-flipbtn{height:210px}
 .tz-tl li{flex-basis:84px}
}
@media(prefers-reduced-motion:reduce){
 .tz *,.tz *::before,.tz *::after{transition:none!important;animation:none!important}
 .tz-flipbtn{transform-style:flat}.tz-flipbtn.on .tz-face:not(.tz-back){display:none}.tz-flipbtn:not(.on) .tz-back{display:none}.tz-flipbtn.on{transform:none}.tz-back{transform:none}
}