/* 2026 리트릿 온라인 핸드북 — 웜 에디토리얼 디자인 시스템 (오프라인 핸드북 톤) 영문 세리프 타이틀(Playfair) + 한글 Pretendard, 크림 베이스, 섹션별 액센트 */ /* 폰트는 각 페이지 에서 preconnect+link로 조기 로드(FOUT 최소화) — @import는 렌더경로에서 늦게 발견되어 제거함 */ :root{ --bg:#F7F2E9; --surface:#FFFDF8; --surface-2:#F1E9DA; --ink:#2B2620; --ink-sub:#635948; --line:#E4D9C6; --line-soft:#EFE7D8; --blue:#1E4B8F; --gold:#E0A32E; --gold-d:#B67E1C; --teal:#2FA99B; --teal-w:#DCF1EE; --teal-d:#1F7A6F; --sage:#6E8B5B; --sage-w:#E4ECDB; --sage-d:#4E6640; --sky:#5B87B5; --sky-w:#DEE9F3; --sky-d:#3E6591; --pink:#E58FA6; --pink-w:#FBE4EB; --pink-d:#C15877; --warn:#C0392B; --warn-w:#FBE7E4; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px; --sh1:0 1px 2px rgba(43,38,32,.05), 0 4px 14px rgba(43,38,32,.05); --sh2:0 3px 10px rgba(43,38,32,.06), 0 12px 30px rgba(43,38,32,.08); --acc:var(--gold); --acc-w:#F7ECD3; --acc-d:var(--gold-d); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} html,body{margin:0} body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic',sans-serif; background:var(--bg);color:var(--ink);line-height:1.82;font-weight:400;letter-spacing:-.005em; max-width:560px;margin:0 auto;padding:0 20px 60px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* ── 페이지 전환: 부드러운 디졸브 (View Transitions, 멀티페이지) ── */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1)} /* 진입 시 콘텐츠가 아래에서 살짝 올라오며 페이드 (고급스러운 로딩) */ @keyframes hbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} main,.hub-img,.opener,.card,.day,.theme,.slot-hd{animation:hbIn .55s cubic-bezier(.22,.61,.36,1) both} @media(prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} main,.hub-img,.opener,.card,.day,.theme,.slot-hd{animation:none} } .serif{font-family:'Playfair Display',Georgia,'Times New Roman',serif} /* 인터랙션 상태 (죽은 화면 방지) + 접근성 */ a,button{transition:transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease} a:active,button:active{transform:translateY(1px)} a:focus-visible,button:focus-visible{outline:2px solid var(--acc-d);outline-offset:2px;border-radius:6px} @media(hover:hover){ .btn-gold:hover{filter:brightness(1.05)} .btn-line:hover,.eat .m:hover{background:var(--acc-w)} .card.pic:hover{box-shadow:var(--sh2)} } @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* 뒤로가기 */ .back{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--gold-d); text-decoration:none;background:var(--acc-w);border-radius:var(--r-pill);padding:9px 15px;margin:16px 0 6px} /* 표지/섹션 히어로 (사진 풀블리드) */ .cover{position:relative;margin:0 -20px 24px;height:78vh;min-height:440px;overflow:hidden; border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)} .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%} .cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,25,21,.15) 0%,rgba(28,25,21,0) 30%,rgba(28,25,21,.68) 100%)} .cover-in{position:absolute;left:24px;right:24px;bottom:30px;z-index:1;color:#F5EFE3} .cover-kick{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--gold);margin-bottom:10px} .cover-title{font-size:44px;line-height:1.04;font-weight:800;letter-spacing:-.5px} .cover-title .g{color:var(--gold)} .cover-title .w{color:#F5EFE3} .cover-meta{margin-top:14px;font-size:15px;font-weight:600;color:rgba(245,239,227,.92)} /* 섹션 오프너 (좌측 골드룰 + 영문세리프 + 한글부제) */ .opener{margin:22px 0 20px;border-left:4px solid var(--acc);padding-left:15px} .opener .en{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:30px;line-height:1.1;color:var(--ink)} .opener .ko{font-size:17px;font-weight:600;color:var(--ink-sub);margin-top:2px;letter-spacing:-.2px} /* 하루 라벨 */ .day{display:flex;align-items:center;gap:10px;margin:32px 2px 16px} .day .d{font-family:'Playfair Display',serif;font-weight:700;font-size:20px;color:var(--ink)} .day .k{font-size:12.5px;font-weight:700;color:var(--acc-d);background:var(--acc-w);padding:3px 10px;border-radius:var(--r-pill)} .day .rule{flex:1;height:1px;background:var(--line)} /* 콘텐츠 카드 */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 18px;box-shadow:var(--sh1);margin-bottom:16px} .card.pic{padding:0;overflow:hidden} .pic-top{height:150px;background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px} .pic-top::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(28,25,21,.6) 0%,rgba(28,25,21,.05) 55%,transparent 100%)} .pic-top .slot{position:relative;z-index:1;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:4px 11px;margin-bottom:7px} .pic-top .t{position:relative;z-index:1;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.3px;text-shadow:0 1px 10px rgba(0,0,0,.5)} .pic-body{padding:18px} /* 소제목 / 본문 / 인용 / 묵상 */ .slot-hd{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--acc-d);background:var(--acc-w);border-radius:var(--r-pill);padding:5px 12px;margin:0 2px 10px} .h3{font-size:18px;font-weight:800;letter-spacing:-.2px;line-height:1.35;margin:0 0 5px} .lead{font-size:15px;color:var(--ink-sub);line-height:1.6;margin:0 0 12px;letter-spacing:-.01em} .body{font-size:16px;line-height:1.8;margin:0 0 12px;letter-spacing:-.01em} .body b{font-weight:800} .wq{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:var(--ink);margin:0 0 10px} .wq.ko{font-family:'Pretendard',sans-serif;font-weight:800;font-size:17px} .worship{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:15px 16px;font-size:14px;color:var(--ink-sub);line-height:1.85} .worship b{color:var(--ink);font-weight:800} .quote{border-left:4px solid var(--gold);padding-left:14px;font-size:15px;line-height:1.7;color:var(--ink);margin:12px 0} .quote .src{color:var(--ink-sub);font-size:13px} .meta{font-size:13px;color:var(--ink-sub);background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 13px;margin-top:10px;line-height:1.6} .meta b{color:var(--ink);font-weight:800} .meta a{color:var(--gold-d);font-weight:700} /* 목록형(코스/영화/자율) */ .rows{display:flex;flex-direction:column;gap:8px;margin-top:10px} .rows .row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:11px 14px} .rows .row b{font-weight:700;color:var(--ink);font-size:14px} .rows .row span{color:var(--ink-sub);font-size:13px;white-space:nowrap} /* 골드 버튼(링크·CTA) */ .btn-gold{display:block;text-align:center;text-decoration:none;background:var(--gold-d);color:#fff;font-weight:800;font-size:14px;border-radius:var(--r-sm);padding:14px;margin-top:8px;box-shadow:0 2px 8px rgba(43,38,32,.12)} .btn-line{display:block;text-align:center;text-decoration:none;border:1px solid var(--gold-d);color:var(--gold-d);font-weight:700;font-size:14px;border-radius:var(--r-sm);padding:12px;margin-top:8px;background:var(--surface)} /* 폴라로이드 사진 */ .polaroid{background:var(--surface);padding:8px 8px 12px;border:1px solid var(--line);box-shadow:var(--sh1);border-radius:6px} .polaroid img{display:block;width:100%;border-radius:3px} /* 허브(목차) — 큐브 패턴 헤더 + BUILD HIS CHURCH + Contents 리스트 */ .hub{margin:0 -20px 10px;padding:calc(env(safe-area-inset-top) + 46px) 24px 32px; border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl); background-color:var(--surface); background-image:repeating-linear-gradient(60deg, rgba(182,126,28,.055) 0 1px, transparent 1px 38px), repeating-linear-gradient(120deg, rgba(182,126,28,.055) 0 1px, transparent 1px 38px); border:1px solid var(--line);border-top:0} .hub .kick{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--gold-d);margin-bottom:13px} .hub-title{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:40px;line-height:1.04;letter-spacing:-.5px} .hub-title .b{color:var(--blue)} .hub-title .g{color:var(--gold-d)} .hub-title .k{color:var(--ink)} .hub .meta{margin-top:15px;font-size:14px;font-weight:600;color:var(--ink-sub)} .toc{margin-top:6px} .toc a{display:flex;align-items:center;gap:13px;padding:17px 6px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);min-height:58px;border-radius:8px} .toc a:last-child{border-bottom:0} .toc .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 auto} .toc .tx{flex:1;min-width:0} .toc .en{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:18px;line-height:1.1;color:var(--ink)} .toc .ko{font-size:13px;color:var(--ink-sub);margin-top:1px} .toc .chev{color:var(--gold-d);font-size:17px;font-weight:700} .toc .soon{font-size:11px;font-weight:700;color:var(--ink-sub);background:var(--surface-2);border-radius:var(--r-pill);padding:4px 10px} .toc a.off{cursor:default} .toc a.off .en{color:var(--ink-sub);opacity:.8} @media(hover:hover){.toc a:not(.off):hover{background:var(--surface-2)}} /* 맛집 리스트 아이템 */ .eat{padding:13px 0;border-bottom:1px solid var(--line-soft)} .eat:last-child{border-bottom:0;padding-bottom:2px} .eat:first-child{padding-top:2px} .eat .n{font-size:15.5px;font-weight:800;color:var(--ink)} .eat .badge{font-size:11px;font-weight:700;color:var(--acc-d);background:var(--acc-w);border-radius:var(--r-pill);padding:2px 9px;margin-left:6px} .eat .d{font-size:13.5px;color:var(--ink-sub);line-height:1.65;margin-top:4px} .eat .m{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:800;color:var(--gold-d);text-decoration:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 14px;background:var(--surface)} .tip{font-size:12.5px;color:var(--ink-sub);background:var(--acc-w);border-radius:var(--r-sm);padding:11px 14px;margin:0 0 12px;line-height:1.6} /* 아코디언 (상세 정보 접기/펼치기) */ details.acc{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-sm);margin-bottom:9px;overflow:hidden} details.acc>summary{list-style:none;cursor:pointer;padding:13px 15px;font-weight:800;font-size:14px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:10px} details.acc>summary::-webkit-details-marker{display:none} details.acc>summary::after{content:'+';color:var(--acc-d);font-weight:800;font-size:18px;line-height:1} details.acc[open]>summary::after{content:'−'} details.acc[open]>summary{border-bottom:1px solid var(--line-soft)} details.acc .ac{padding:13px 15px;font-size:13.5px;line-height:1.78;color:var(--ink-sub)} details.acc .ac b{color:var(--ink);font-weight:800} details.acc .ac .q{display:block;color:var(--acc-d);font-weight:700;margin-bottom:7px} details.acc .ac a{color:var(--gold-d);font-weight:700} /* 영화 항목 */ .movie{display:flex;gap:13px;margin-bottom:14px} .movie:last-child{margin-bottom:0} .movie img{width:84px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:0 0 auto} .movie .mv-t{font-weight:800;font-size:15px;color:var(--ink)} .movie .mv-en{font-size:12px;font-weight:700;color:var(--ink-sub);letter-spacing:.3px} .movie .mv-tm{font-size:12.5px;font-weight:700;color:var(--acc-d);margin:3px 0 6px} .movie .mv-tag{font-size:12.5px;line-height:1.55;color:var(--ink-sub)} .movie .mv-tr{display:inline-block;margin-top:7px;font-size:12px;font-weight:800;color:var(--gold-d);text-decoration:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px} /* 구분선 */ .hr{height:0;border:0;border-top:1px solid var(--line);margin:26px 0} .hr.soft{border-top:1px solid var(--line-soft)} .hr.dash{border-top:1px dashed var(--line)} /* 알약 버튼(프로그램 바로가기) */ .pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} .pill{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:12.5px;font-weight:800; color:var(--acc-d);background:var(--acc-w);border:1px solid var(--acc);border-radius:var(--r-pill);padding:7px 13px} .pill::after{content:'›';font-weight:800} @media(hover:hover){.pill:hover{background:var(--surface)}} /* 📝 상세 링크 */ .mp{text-decoration:none;font-size:15px;margin-left:6px;vertical-align:-1px} /* 접이식 안내문 (자율 일정 소개) */ .intro{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh1);padding:18px;margin:14px 0 0;overflow:hidden;transition:max-height .35s ease} .intro.clip{max-height:210px} .intro.clip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(rgba(255,253,248,0),var(--surface));pointer-events:none} .intro .intro-body{font-size:14.5px;line-height:1.8;color:var(--ink-sub)} .intro .intro-body p{margin:0 0 12px} .intro .intro-body p:last-child{margin-bottom:0} .intro .intro-body b{color:var(--gold-d);font-weight:800} .intro-toggle{display:inline-flex;align-items:center;gap:5px;margin:10px 0 6px;border:1px solid var(--line); background:var(--surface);border-radius:var(--r-pill);padding:9px 17px;font-family:inherit;font-weight:800;font-size:13px;color:var(--gold-d);cursor:pointer} /* 일자 선택 스티키 네비(스케줄) */ .daynav{position:sticky;top:0;z-index:30;display:flex;gap:8px;padding:10px 0;margin:2px 0 8px; background:linear-gradient(var(--bg) 80%, rgba(247,242,233,0))} .daynav a{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:13px;color:var(--ink-sub); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 0} .daynav a.on{background:var(--acc-d);color:#fff;border-color:var(--acc-d);box-shadow:0 2px 8px rgba(43,38,32,.12)} .anchor{scroll-margin-top:64px} /* 페이지 네비(이전/목차/다음) */ .pagenav{display:flex;gap:8px;margin:30px 0 2px} .pagenav a{display:flex;flex-direction:column;justify-content:center;gap:2px;text-decoration:none; border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface);min-height:58px} .pagenav a.p{flex:1;align-items:flex-start} .pagenav a.n{flex:1;align-items:flex-end;text-align:right} .pagenav a.home{flex:0 0 auto;align-items:center;justify-content:center;color:var(--gold-d);font-weight:800;font-size:19px} .pagenav .lb{font-size:11px;font-weight:700;color:var(--ink-sub)} .pagenav .pg{font-size:14px;font-weight:800;color:var(--ink)} @media(hover:hover){.pagenav a:hover{background:var(--surface-2)}} /* 지도 열기 선택 시트(네이버/카카오) */ .mapsheet{position:fixed;inset:0;z-index:130;background:rgba(20,17,13,.5);display:none;align-items:flex-end} .mapsheet.on{display:flex} .mapsheet .ms-card{background:var(--surface);width:100%;max-width:560px;margin:0 auto; border-radius:var(--r-xl) var(--r-xl) 0 0;padding:20px 20px calc(env(safe-area-inset-bottom) + 20px); box-shadow:0 -6px 30px rgba(0,0,0,.22);animation:hbIn .3s ease both} .mapsheet .ms-t{font-size:15px;font-weight:800;color:var(--ink);text-align:center;margin-bottom:15px;word-break:keep-all;line-height:1.4} .mapsheet .ms-btn{display:block;text-align:center;text-decoration:none;font-weight:800;font-size:15px;border-radius:var(--r-sm);padding:14px;margin-bottom:9px} .mapsheet .ms-n{background:#03C75A;color:#fff} .mapsheet .ms-k{background:#FEE500;color:#3A1D1D} .mapsheet .ms-x{display:block;width:100%;border:0;background:transparent;color:var(--ink-sub);font-weight:700;font-size:13px;padding:8px;margin-top:2px;cursor:pointer;font-family:inherit} /* 강원생활도민증 이미지 카드 */ .gwcard{display:block;width:100%;max-width:330px;height:auto;border-radius:14px;box-shadow:var(--sh2);margin:2px auto 6px} .gwcap{text-align:center;font-size:12px;color:var(--ink-sub);margin:0 0 14px} /* 큐레이터 배지 (강원도민증 — 가볍고 위트있게) */ .curator{display:flex;align-items:center;gap:13px;background:var(--sage-w);border:1px solid var(--sage); border-radius:var(--r-md);padding:12px 14px;margin:4px 0 14px;text-decoration:none;box-shadow:var(--sh1)} .curator .gwmini{flex:0 0 auto;width:80px;height:auto;border-radius:7px;border:2px solid #fff; box-shadow:0 3px 10px rgba(43,38,32,.2);transform:rotate(-4deg)} .curator .cur-tx{min-width:0} .cur-badge{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--sage-d);border-radius:var(--r-pill);padding:3px 9px} .cur-badge .q{opacity:.85;font-weight:700} .cur-nm{font-size:13.5px;font-weight:800;color:var(--ink);margin-top:6px} .cur-sub{font-size:12px;color:var(--ink-sub);line-height:1.55;margin-top:3px} .cur-sub b{color:var(--sage-d)} .cur-sub .tap{color:#9aa6b0;font-weight:700;white-space:nowrap} @media(hover:hover){.curator:hover{background:#dfe9d4}} /* 강원도민 카드(속초 맛집 큐레이터) */ .wondo{display:flex;align-items:center;justify-content:space-between;gap:12px; background:linear-gradient(135deg,var(--sage) 0%,var(--sage-d) 100%);color:#fff; border-radius:var(--r-md);padding:15px 18px;box-shadow:var(--sh1);margin:2px 0 14px;position:relative;overflow:hidden} .wondo::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06)} .wondo .wk{font-size:10px;font-weight:800;letter-spacing:1.5px;color:rgba(255,255,255,.82)} .wondo .wn{font-size:19px;font-weight:800;margin-top:3px} .wondo .wt{font-size:12px;color:rgba(255,255,255,.9);margin-top:3px} .wondo .wbadge{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;justify-content:center; font-weight:800;font-size:13px;line-height:1.05;z-index:1} /* 홈 화면에 추가(PWA) */ .a2hs{display:none;width:100%;align-items:center;justify-content:center;gap:7px;margin:14px 0 2px; border:1px solid var(--gold-d);background:var(--surface);color:var(--gold-d);font-family:inherit;font-weight:800;font-size:14px;border-radius:var(--r-sm);padding:13px;cursor:pointer;box-shadow:var(--sh1)} .a2hs.show{display:flex} .ios-guide{position:fixed;inset:0;z-index:120;background:rgba(20,17,13,.55);display:none;align-items:flex-end} .ios-guide.on{display:flex} .ios-card{background:var(--surface);width:100%;max-width:560px;margin:0 auto;border-radius:var(--r-xl) var(--r-xl) 0 0; padding:22px 20px calc(env(safe-area-inset-bottom) + 22px);box-shadow:0 -6px 30px rgba(0,0,0,.2);animation:hbIn .3s ease both} .ios-card h4{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--ink)} .ios-card p{margin:0 0 9px;font-size:14px;color:var(--ink-sub);line-height:1.7} .ios-card b{color:var(--gold-d);font-weight:800} .ios-card .close{margin-top:14px;width:100%;border:0;background:var(--gold-d);color:#fff;font-weight:800;font-size:14px;border-radius:var(--r-sm);padding:13px;font-family:inherit;cursor:pointer} /* 출발장소 팝업 (바텀시트) */ .locbtn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;border:1px solid var(--sky);background:var(--sky-w);color:var(--sky-d);font-family:inherit;font-weight:800;font-size:13px;border-radius:var(--r-pill);padding:9px 15px;cursor:pointer;box-shadow:var(--sh1)} @media(hover:hover){.locbtn:hover{background:#d3e2f1}} .locpop{position:fixed;inset:0;z-index:140;background:rgba(20,17,13,.55);display:none;align-items:flex-end} .locpop.on{display:flex} .loc-card{background:var(--surface);width:100%;max-width:560px;margin:0 auto;border-radius:var(--r-xl) var(--r-xl) 0 0; padding:20px 20px calc(env(safe-area-inset-bottom) + 20px);box-shadow:0 -6px 30px rgba(0,0,0,.22);animation:hbIn .3s ease both;max-height:88vh;overflow-y:auto} .loc-t{font-size:16px;font-weight:800;color:var(--ink);text-align:center;margin-bottom:13px;word-break:keep-all;line-height:1.4} .loc-img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh1)} .loc-cap{font-size:14px;color:var(--ink-sub);line-height:1.72;margin-top:13px} .loc-cap b{color:var(--sky-d);font-weight:800} .loc-x{margin-top:15px;width:100%;border:0;background:var(--gold-d);color:#fff;font-weight:800;font-size:14px;border-radius:var(--r-sm);padding:13px;font-family:inherit;cursor:pointer} /* 러닝풋 */ .foot{text-align:center;padding:26px 0 6px;border-top:1px solid var(--line-soft);margin-top:26px} .foot .lc{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--ink-sub)} /* 허브 헤더 — 표지 로고 밴드 이미지 */ .hub-img{margin:0 -20px 0;overflow:hidden;box-shadow:var(--sh1); border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)} .hub-img img{display:block;width:100%;height:auto} .hub-meta{text-align:center;font-size:14px;font-weight:700;color:var(--ink-sub);margin:16px 0 2px} /* 테마 배너 (Welcome) */ .theme{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 20px;box-shadow:var(--sh1);margin-bottom:10px} .theme .k{font-size:12px;font-weight:800;letter-spacing:.8px;color:var(--gold-d)} .theme .en{font-family:'Playfair Display',serif;font-weight:800;font-size:34px;line-height:1.08;color:var(--ink);margin:13px 0 6px} .theme .ko{font-size:19px;font-weight:800;color:var(--blue)} .theme .by{font-size:13px;color:var(--ink-sub);margin-top:11px} /* 한/영 토글 */ .lang{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;margin:2px 0 16px} .lang button{border:0;background:var(--surface);color:var(--ink-sub);font-weight:800;font-size:13px;padding:9px 20px;cursor:pointer;font-family:inherit} .lang button.on{background:var(--acc-d);color:#fff} .en-blk{display:none} body.show-en .ko-blk{display:none} body.show-en .en-blk{display:block} /* 성경 인용(메시지·인사말) */ .scrip{border-left:4px solid var(--acc);background:var(--bg);padding:13px 15px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15px;line-height:1.72;color:var(--ink);margin:14px 0} .scrip .src{display:block;color:var(--acc-d);font-size:12.5px;font-weight:800;margin-top:7px} /* 층별 안내표 (Location) */ .floor{width:100%;border-collapse:separate;border-spacing:0;margin:6px 0 8px;font-size:14px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .floor th,.floor td{padding:12px 13px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-soft)} .floor tr:last-child th,.floor tr:last-child td{border-bottom:0} .floor th{background:var(--surface-2);font-weight:800;color:var(--ink);width:58px;text-align:center;font-family:'Playfair Display',serif;border-right:1px solid var(--line-soft)} .floor td{background:var(--surface);color:var(--ink-sub)} .floor td b{color:var(--ink);font-weight:800} /* 일자 탭 (메시지) */ .tabs{display:flex;gap:8px;margin:6px 0 18px} .tabs button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink-sub);font-weight:800;font-size:14px;padding:12px;border-radius:var(--r-sm);cursor:pointer;font-family:inherit} .tabs button.on{background:var(--acc-d);color:#fff;border-color:var(--acc-d);box-shadow:0 2px 8px rgba(43,38,32,.12)} .tabpane{display:none;animation:hbIn .45s cubic-bezier(.22,.61,.36,1) both} .tabpane.on{display:block} /* 언어 구분선 (인사말·메시지: 영어 먼저 → 한국어) */ .langdiv{display:flex;align-items:center;gap:12px;margin:26px 0 18px;color:var(--acc-d);font-weight:800;font-size:12px;letter-spacing:1px} .langdiv::before,.langdiv::after{content:'';flex:1;height:1px;background:var(--line)} /* 번호형 준수사항 */ .rules{counter-reset:r;list-style:none;padding:0;margin:0} .rules>li{counter-increment:r;position:relative;padding:17px 0 17px 46px;border-bottom:1px solid var(--line-soft)} .rules>li:last-child{border-bottom:0} .rules>li::before{content:counter(r);position:absolute;left:0;top:15px;width:29px;height:29px;border-radius:50%; background:var(--acc-w);color:var(--acc-d);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif} .rules p{font-size:15px;line-height:1.82;margin:0} .rules b{font-weight:800;color:var(--ink)} .rules u{text-decoration:none;background:linear-gradient(transparent 62%, var(--sky-w) 62%);padding:0 1px} .rules a{color:var(--gold-d);font-weight:800;text-decoration:none} /* 비상 연락처 */ .contacts{display:flex;flex-direction:column} .contacts .c{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line-soft)} .contacts .c:last-child{border-bottom:0} .contacts .who{font-weight:700;color:var(--ink);font-size:15px} .contacts .who small{display:block;font-weight:600;color:var(--ink-sub);font-size:12px;margin-top:1px} .contacts .tel{font-weight:800;color:var(--gold-d);font-size:16px;letter-spacing:.3px;text-decoration:none;white-space:nowrap} .info-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)} .info-row:last-child{border-bottom:0} .info-row b{color:var(--ink);font-weight:800;font-size:14px} .info-row span{color:var(--ink-sub);font-size:14px;text-align:right} /* 지도/위치안내 이미지 */ .map-img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh1);background:var(--surface)} /* 네이버 인터랙티브 지도 */ .nmap-wrap{position:relative;margin:4px 0 8px} .nmap{width:100%;height:360px;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh1);overflow:hidden;background:var(--surface-2)} .nmap-fallback{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink-sub);font-size:14px;font-weight:600;text-align:center;padding:20px} .map-btns{position:absolute;top:10px;right:10px;z-index:5;display:flex;flex-direction:column;gap:6px} .map-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--gold-d); font-weight:800;font-size:12px;font-family:inherit;border-radius:9px;padding:8px 11px;box-shadow:0 2px 8px rgba(43,38,32,.18);cursor:pointer} @media(hover:hover){.map-btn:hover{background:var(--acc-w)}} .map-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;background:rgba(43,38,32,.9);color:#fff; font-size:12px;font-weight:700;padding:8px 14px;border-radius:20px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;max-width:90%} .map-toast.show{opacity:1} /* 악보 라이트박스(확대·넘김·다운로드) */ .lb{position:fixed;inset:0;z-index:100;background:rgba(20,17,13,.92);display:none} .lb.on{display:block} .lb-viewport{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;z-index:1} .lb-btn,.lb-dl,.lb-count{z-index:6} .lb-track{display:flex;height:100%;will-change:transform} .lb-slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 3vw} .lb-slide img{max-width:94vw;max-height:84vh;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);pointer-events:none;user-select:none} .lb-btn{position:absolute;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff; width:46px;height:46px;border-radius:50%;font-size:24px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center} .lb-prev{left:12px;top:50%;transform:translateY(-50%)} .lb-next{right:12px;top:50%;transform:translateY(-50%)} .lb-x{top:calc(env(safe-area-inset-top) + 14px);right:14px;width:42px;height:42px;font-size:20px} .lb-dl{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4); color:#fff;text-decoration:none;font-size:13px;font-weight:800;padding:10px 15px;border-radius:20px} .lb-count{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 16px);left:50%;transform:translateX(-50%);color:rgba(255,255,255,.9);font-size:13px;font-weight:700} /* 일정표 아젠다(캘린더 형태) */ .agn{display:flex;flex-direction:column} .agn .it{display:flex;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line-soft)} .agn .it:last-child{border-bottom:0} .agn .tm{flex:0 0 76px;font-size:12px;font-weight:800;color:var(--acc-d);line-height:1.45;padding-top:2px;letter-spacing:-.02em} .agn .ev{flex:1;font-size:15px;font-weight:700;color:var(--ink);line-height:1.4} .agn .ev em{display:block;font-style:normal;font-weight:600;color:var(--ink-sub);font-size:12.5px;margin-top:2px} .agn .ev .sub{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--ink-sub);background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px;line-height:1.8} .agn .ev .sub b{color:var(--ink)} .agn .it.hi .ev{color:var(--acc-d)} .agn .it.hi .tm{color:var(--acc-d)} .agn .it>.mp{margin-left:auto;align-self:center;flex:0 0 auto;font-size:17px} /* 부서 전용 행 강조(중고등부=파랑) */ .agn .it.mid{background:var(--sky-w);border-radius:10px;padding-left:10px;padding-right:10px;border-bottom:0;margin:2px 0} .agn .it.mid .ev{color:var(--blue)} .agn .it.mid .tm{color:var(--blue)} /* 중고등부 남색 박스(연속 행 묶음) */ .mid-block{background:var(--sky-w);border:1px solid var(--blue);border-radius:var(--r-sm);padding:2px 13px 4px;margin:10px 0} .mid-hd{display:flex;align-items:center;gap:6px;padding:11px 0 2px;font-size:12px;font-weight:800;color:var(--blue)} .mid-block .agn .it{border-bottom:1px solid rgba(30,75,143,.16)} .mid-block .agn .it:last-child{border-bottom:0} .mid-block .agn .ev,.mid-block .agn .tm{color:var(--blue)} .mid-block .agn .ev em{color:var(--blue);opacity:.8} /* 캠퍼스 칩(분당/부산) */ .camp{display:inline-block;font-size:10.5px;font-weight:800;border-radius:var(--r-pill);padding:2px 9px;margin-right:5px;vertical-align:1px} .camp.bd{background:var(--sky-w);color:var(--sky-d)} .camp.bs{background:var(--acc-w);color:var(--gold-d)} /* 부서 칩 + 범례 */ .dept{display:inline-block;font-size:11px;font-weight:800;border-radius:var(--r-pill);padding:2px 9px;margin-right:5px;vertical-align:1px} .dept.mid{background:var(--sky-w);color:var(--blue)} .dept.elem{background:var(--sage-w);color:var(--sage-d)} .dept.pre{background:var(--pink-w);color:var(--pink-d)} .dept-legend{display:flex;gap:7px;flex-wrap:wrap;margin:2px 2px 14px} .note-sm{font-size:12.5px;color:var(--ink-sub);background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;margin:10px 0 2px;line-height:1.65} .note-sm b{color:var(--sky-d)} /* 출발 장소·집합 안내 팝업 (허브 홈 자동 노출) */ @keyframes noticeFade{from{opacity:0}to{opacity:1}} @keyframes noticeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} .departov{position:fixed;inset:0;z-index:130;background:rgba(20,17,13,.5);display:none;align-items:flex-end;justify-content:center} .departov.on{display:flex;animation:noticeFade .18s ease both} .depart-card{background:var(--surface);width:100%;max-width:560px;max-height:88vh;overflow:auto;position:relative; border-radius:var(--r-xl) var(--r-xl) 0 0;padding:22px 20px calc(env(safe-area-inset-bottom) + 20px); box-shadow:0 -6px 30px rgba(0,0,0,.25);animation:noticeUp .28s cubic-bezier(.22,.61,.36,1) both} @media(prefers-reduced-motion:reduce){.departov.on,.depart-card{animation:none}} .depart-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line); background:var(--surface);color:var(--ink-sub);font-size:15px;cursor:pointer;font-family:inherit;z-index:2} .depart-kick{font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--gold-d);background:var(--acc-w);border-radius:var(--r-pill);padding:5px 12px;display:inline-block;margin-bottom:10px} .depart-card h3{margin:0 0 4px;font-size:19px;font-weight:800} .depart-lead{font-size:13px;color:var(--ink-sub);margin:0 0 14px} .depart-block{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:9px} .depart-block .db-t{font-size:14px;font-weight:800;color:var(--gold-d);margin-bottom:4px} .depart-block .db-d{font-size:13.5px;color:var(--ink);line-height:1.7} .depart-block .db-d b{font-weight:800;color:var(--blue)} .depart-imgs img{width:auto;max-width:100%;max-height:38vh;height:auto;border:1px solid var(--line);border-radius:var(--r-sm);display:block;margin:12px auto 0} .depart-cap{font-size:12px;color:var(--ink-sub);text-align:center;margin:9px 0 0;line-height:1.5} .depart-card .notice-btn{display:block;text-align:center;text-decoration:none;background:var(--gold-d);color:#fff;font-weight:800;font-size:14.5px;border-radius:var(--r-sm);padding:13px;margin:14px 0 2px;box-shadow:0 2px 8px rgba(43,38,32,.12)} .depart-card .notice-link{color:var(--blue);text-decoration:underline;word-break:break-all} .depart-close{display:block;width:100%;margin-top:16px;border:0;background:var(--gold-d);color:#fff;font-family:inherit;font-weight:800;font-size:15px;border-radius:var(--r-sm);padding:14px;cursor:pointer} .depart-today{display:block;width:100%;margin-top:8px;border:0;background:transparent;color:var(--ink-sub);font-family:inherit;font-weight:700;font-size:12.5px;padding:6px;cursor:pointer;text-decoration:underline} /* 페이지 공유 버튼 (제목 오른쪽 상단, 은은하게) */ .sharebtn{position:absolute;top:4px;right:0;display:inline-flex;align-items:center;gap:5px; border:1px solid var(--line);background:var(--surface);color:var(--gold-d);font-family:inherit;font-weight:700; font-size:12px;line-height:1;border-radius:var(--r-pill);padding:8px 13px;cursor:pointer;box-shadow:var(--sh1);z-index:5} .sharebtn.on-theme{top:14px;right:14px} .sharebtn svg{display:block} @media(hover:hover){.sharebtn:hover{background:var(--acc-w)}} .share-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(43,38,32,.92);color:#fff; font-size:13px;font-weight:700;padding:11px 18px;border-radius:22px;z-index:200;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap} .share-toast.on{opacity:1} /* Tip 콜아웃 (한 가지 Tip! 형식) */ .tipbox{background:var(--acc-w);border:1px solid var(--acc);border-radius:var(--r-md);padding:16px 16px 14px;box-shadow:var(--sh1);margin-bottom:16px} .tipbox .tip-hd{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.3px;color:#fff;background:var(--acc-d);border-radius:var(--r-pill);padding:5px 13px;margin-bottom:11px} .tipbox .tip-p{font-size:14.5px;line-height:1.72;color:var(--ink);margin:0 0 12px} .tipbox .tip-p:last-child{margin-bottom:0} .tipbox .tip-p b{color:var(--acc-d);font-weight:800} .tipbox .tip-sub{color:var(--ink-sub);font-size:12.5px} .tipbox .map-img{margin:0} /* 카카오톡 인앱 브라우저 안내 배너 */ .browser-tip{background:#FFF4DE;border:1px solid #F0C86A;border-radius:var(--r-md); padding:15px 16px;margin:14px 0 2px;box-shadow:var(--sh1)} .browser-tip .bt-hd{font-size:14.5px;font-weight:800;color:#8A5A00;line-height:1.5} .browser-tip .bt-sub{font-size:13px;color:#6b5836;line-height:1.65;margin-top:5px} .browser-tip .bt-sub b{color:#8A5A00;font-weight:800} .browser-tip .bt-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:7px; margin-top:12px;border:0;background:var(--gold-d);color:#fff;font-family:inherit;font-weight:800; font-size:14.5px;border-radius:var(--r-sm);padding:14px;cursor:pointer;box-shadow:0 2px 8px rgba(43,38,32,.14)} .browser-tip .bt-ios{font-size:12.5px;color:#6b5836;line-height:1.65;margin-top:10px; background:#FFFBF0;border:1px dashed #E7C879;border-radius:10px;padding:10px 12px} .browser-tip .bt-ios b{color:#8A5A00} /* 홈 화면 추가 — 친절한 단계 안내(어르신용) */ .guide-steps{margin:2px 0 0} .guide-tab{display:flex;gap:8px;margin:2px 0 14px} .guide-tab button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink-sub); font-family:inherit;font-weight:800;font-size:14px;padding:11px;border-radius:var(--r-sm);cursor:pointer} .guide-tab button.on{background:var(--gold-d);color:#fff;border-color:var(--gold-d)} .gpane{display:none} .gpane.on{display:block} .gstep{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft)} .gstep:last-child{border-bottom:0} .gstep .gn{flex:0 0 auto;width:27px;height:27px;border-radius:50%;background:var(--acc-w);color:var(--gold-d); font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif} .gstep .gt{font-size:14px;line-height:1.6;color:var(--ink)} .gstep .gt b{color:var(--gold-d);font-weight:800} .guide-rassure{font-size:12.5px;color:var(--ink-sub);line-height:1.7;background:var(--bg); border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;margin-top:12px} .guide-rassure b{color:var(--ink)} /* 간격 유틸 — 섹션 리듬 표준화(인라인 margin 하드코딩 대체) */ .mt-sec{margin-top:24px} /* 새 섹션 제목/오프너 위 */ .mt-2{margin-top:12px} /* 카드 뒤 이어지는 보조 요소 위 */ /* 액센트 스코프 유틸 */ .acc-sky{--acc:var(--sky);--acc-w:var(--sky-w);--acc-d:var(--sky-d)} .acc-pink{--acc:var(--pink);--acc-w:var(--pink-w);--acc-d:var(--pink-d)} .acc-teal{--acc:var(--teal);--acc-w:var(--teal-w);--acc-d:var(--teal-d)} .acc-sage{--acc:var(--sage);--acc-w:var(--sage-w);--acc-d:var(--sage-d)}