:root{
  --paper:#f7f4ee;
  --paper-2:#efeae0;
  --ink:#1e2622;
  --ink-soft:#56605a;
  --line:#d9d2c4;
  --green:#2c4636;
  --green-deep:#1f3327;
  --ochre:#a8672f;
  --red:#9b3a2e;
  --serif:"Gowun Batang", "Nanum Myeongjo", serif;
  --sans:"Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.75; word-break:keep-all; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.muted{color:var(--ink-soft)}
.eyebrow{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); margin:0 0 18px}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:20; background:rgba(247,244,238,.94); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:68px; gap:10px}
.bar .brand{order:1; margin-right:auto}
.bar nav{order:2}
.lang-btn{order:3; background:none; border:1px solid var(--line); padding:6px 11px; font:inherit; font-size:13.5px; cursor:pointer; color:var(--ink-soft); white-space:nowrap}
.lang-btn:hover{color:var(--green); border-color:var(--green)}
.bar .menu-btn{order:4}
.brand{text-decoration:none; display:flex; align-items:center; gap:12px}
.brand-mark{width:46px; height:46px; flex:none; display:block; border-radius:12px; background:#fff; object-fit:contain; box-shadow:0 0 0 1px rgba(30,38,34,.06)}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand b{font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:-.02em}
.brand small{font-size:9.5px; color:var(--ink-soft); letter-spacing:.16em; text-transform:uppercase; margin-top:4px}
@media (max-width: 420px){ .brand{gap:10px} .brand b{font-size:17px} .brand small{font-size:8.5px; letter-spacing:.08em} }
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:4px}
nav > ul > li{position:relative}
nav > ul > li > a{display:block; padding:10px 14px; text-decoration:none; font-size:15.5px; font-weight:500}
nav > ul > li > a:hover{color:var(--green)}
nav li.auth > a{border:1px solid var(--line); margin-left:8px; padding:7px 14px; margin-top:3px}
.sub{position:absolute; top:100%; left:6px; min-width:160px; background:#fff; border:1px solid var(--line); padding:8px 0; display:none; flex-direction:column; box-shadow:0 8px 24px rgba(30,38,34,.08)}
nav li.auth .sub{left:auto; right:0}
.sub a, .sub button{display:block; width:100%; text-align:left; padding:7px 18px; font:inherit; font-size:14.5px; text-decoration:none; color:var(--ink-soft); background:none; border:0; cursor:pointer}
.sub a:hover, .sub button:hover{color:var(--green); background:var(--paper)}
nav li:hover > .sub, nav li:focus-within > .sub{display:flex}
.menu-btn{display:none; background:none; border:1px solid var(--line); padding:8px 12px; font:inherit; font-size:14px; cursor:pointer; color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:96px 0 72px; border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:end}
.hero h1{font-family:var(--serif); font-weight:700; font-size:clamp(36px,5.6vw,62px); line-height:1.22; letter-spacing:-.02em; margin:0}
.hero .en{margin:16px 0 0; color:var(--ink-soft); font-size:17px}
.service{background:var(--green); color:#f3efe6; padding:30px 32px}
.service .label{font-size:13px; letter-spacing:.1em; opacity:.75; margin:0}
.service .time{font-family:var(--serif); font-size:34px; margin:6px 0 2px}
.service p{margin:0; font-size:15px; opacity:.85}
.service a{display:inline-block; margin-top:20px; font-size:14.5px; color:#f3efe6; text-underline-offset:4px}

/* ---------- quick links ---------- */
.quick{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line)}
.quick a{padding:30px 24px; text-decoration:none; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px; transition:background .2s}
.quick a:last-child{border-right:0}
.quick a:hover{background:var(--paper-2)}
.quick b{font-size:18px; font-weight:600}
.quick span{font-size:13.5px; color:var(--ink-soft)}
.quick em{font-style:normal; color:var(--ochre); font-size:13px; margin-bottom:8px}

/* ---------- sections ---------- */
section{padding:88px 0; border-bottom:1px solid var(--line)}
.page-top{padding:64px 0 40px; border-bottom:1px solid var(--line)}
.page-top h1{font-family:var(--serif); font-size:clamp(30px,4vw,44px); margin:0; letter-spacing:-.015em}
.head{display:grid; grid-template-columns:220px 1fr; gap:48px}
.head .k{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); padding-top:10px}
h2{font-family:var(--serif); font-weight:700; font-size:clamp(28px,3.4vw,38px); letter-spacing:-.015em; line-height:1.3; margin:0 0 24px}
h3{font-size:19px; font-weight:600; margin:0 0 6px}
.prose p{margin:0 0 18px; max-width:40em}
.prose p.lead{font-family:var(--serif); font-size:21px; line-height:1.7}
.facts{display:flex; flex-wrap:wrap; gap:12px 40px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); font-size:15px}
.facts div span{display:block; color:var(--ink-soft); font-size:13px}
.alt{background:var(--paper-2)}

.schedule{width:100%; border-collapse:collapse; font-size:16px}
.schedule th, .schedule td{text-align:left; padding:16px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.schedule th{font-weight:600; width:38%}
.schedule td.t{font-family:var(--serif); font-size:18px; white-space:nowrap}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.card .ph{aspect-ratio:4/5; background:#e3dccd; display:flex; align-items:flex-end; padding:14px; font-size:13px; color:var(--ink-soft); margin-bottom:14px}
.card img{aspect-ratio:4/5; object-fit:cover; width:100%; margin-bottom:14px}
.card img.photo{aspect-ratio:auto; height:auto; max-width:280px} /* 사진 원래 비율 그대로 */
.card p{margin:0; font-size:15px; color:var(--ink-soft)}
.ministry{padding:26px 0; border-top:1px solid var(--line)}
.ministry:last-child{border-bottom:1px solid var(--line)}
.ministry-grid{display:grid; grid-template-columns:1fr 2fr; gap:24px}
.ministry-grid p{margin:0; color:var(--ink-soft)}
.ministry-grid .prose p{margin:0 0 14px}
section[id], .ministry[id]{scroll-margin-top:90px} /* 메뉴로 이동할 때 위쪽 고정 메뉴에 가려지지 않게 */
.ministry-grid h3 small{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); margin-top:6px; font-family:inherit; font-weight:400}
.ministry-grid h4, .prose h3{margin:22px 0 8px}
.ministry-grid h4:first-child, .prose h2 + h3{margin-top:0}

.sermon{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.video{aspect-ratio:16/9; width:100%; border:0; background:var(--green-deep); color:#cfd8cf; display:flex; align-items:center; justify-content:center; font-size:14px; text-align:center; padding:20px}
iframe.video{padding:0}

.btn{display:inline-block; padding:12px 22px; background:var(--ink); color:var(--paper); text-decoration:none; font:inherit; font-size:15px; border:0; cursor:pointer}
.btn:hover{background:var(--green)}
.btn:disabled{opacity:.5; cursor:default}
.btn.ghost{background:none; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.small{padding:6px 12px; font-size:13.5px}
.btn.danger{background:none; color:var(--red); border:1px solid #d8b6ae}
.btn.danger:hover{background:#f6e9e5}

.posts{list-style:none; margin:0; padding:0}
.posts li{border-top:1px solid var(--line)}
.posts li:last-child{border-bottom:1px solid var(--line)}
.posts a, .posts button.row{display:flex; justify-content:space-between; gap:20px; width:100%; padding:18px 4px; text-decoration:none; font:inherit; font-size:17px; text-align:left; background:none; border:0; color:inherit; cursor:pointer}
.posts a:hover, .posts button.row:hover{color:var(--green)}
.posts span.d{color:var(--ink-soft); font-size:14px; white-space:nowrap}
.posts li.active button.row{color:var(--green); font-weight:600}
.upload-tabs{display:flex; gap:0; border-bottom:2px solid var(--line); margin-bottom:8px}
.upload-tabs button{font:inherit; font-size:17px; font-weight:600; padding:14px 22px; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; color:var(--ink-soft); cursor:pointer}
.upload-tabs button:hover{color:var(--ink)}
.upload-tabs button[aria-selected=true]{color:var(--green-deep); border-bottom-color:var(--green-deep)}
@media (max-width: 600px){ .upload-tabs button{flex:1; font-size:15px; padding:12px 8px} }
.rec-list li{gap:10px}
.batch-table td{vertical-align:middle}
.search-row{display:flex; flex-wrap:wrap; gap:0 14px; align-items:flex-end}
.search-row .field{flex:0 0 auto; min-width:130px}
.search-row .search-main{flex:1 1 300px; max-width:460px}
.search-row .search-reset{min-width:0}
.search-row input, .search-row select{height:48px; padding-top:0; padding-bottom:0; box-sizing:border-box}
.search-row .search-reset .btn{height:48px}
@media (max-width: 600px){ .search-row .field{flex:1 1 40%} .search-row .search-main{flex-basis:100%; max-width:none} }
.sermon-panel{padding:4px 4px 24px}
.sermon-panel .audio{margin-top:10px}
.sermon-panel audio{width:100%}
.sermon-panel .video{max-width:720px}
.posts .empty{padding:18px 4px; color:var(--ink-soft); font-size:15px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:48px}

.map{width:100%; aspect-ratio:16/10; border:0; filter:grayscale(.35)}
.contact dl{margin:0}
.contact dt{font-size:13px; color:var(--ink-soft); margin-top:20px}
.contact dd{margin:2px 0 0; font-size:18px}
.contact dd a{text-underline-offset:4px}

/* ---------- forms ---------- */
.panel{background:#fff; border:1px solid var(--line); padding:32px}
.narrow{max-width:440px; margin:0 auto}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px}
.field label{font-size:14px; font-weight:600}
.field small{font-size:13px; color:var(--ink-soft)}
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=search], select, textarea{
  font:inherit; font-size:16px; padding:11px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:0; width:100%
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--green); outline-offset:-1px; background:#fff}
textarea{min-height:140px; resize:vertical}
.check{display:flex; align-items:center; gap:8px; font-size:15px; margin-bottom:18px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.tabs{display:flex; border-bottom:1px solid var(--line); margin-bottom:28px}
.tabs button{flex:1; font:inherit; font-size:16px; padding:12px; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; color:var(--ink-soft)}
.tabs button[aria-selected=true]{color:var(--ink); border-color:var(--ink); font-weight:600}
.msg{padding:12px 14px; font-size:14.5px; margin-bottom:18px}
.msg.error{background:#f6e9e5; color:var(--red)}
.msg.success{background:#e6eee8; color:var(--green)}
.msg.info{background:var(--paper-2); color:var(--ink-soft)}
.link-btn{background:none; border:0; font:inherit; font-size:14px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:0}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.chips button{font:inherit; font-size:14px; padding:6px 14px; border:1px solid var(--line); background:none; cursor:pointer; color:var(--ink-soft)}
.chips button[aria-pressed=true]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.tag{display:inline-block; font-size:12px; padding:2px 8px; border:1px solid var(--line); color:var(--ink-soft); margin-right:6px; white-space:nowrap}
.tag.lock{border-color:var(--ochre); color:var(--ochre)}
.tag.open{border-color:#7fa58a; color:var(--green)}
.board-bar{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:16px 20px; margin-bottom:24px; background:#fff; border:1px solid var(--line)}
.board-bar p{margin:0; font-size:15px; color:var(--ink-soft)}

.feed article{padding:28px 0; border-top:1px solid var(--line)}
.feed article:last-child{border-bottom:1px solid var(--line)}
.feed h3{font-family:var(--serif); font-size:22px; margin:8px 0 10px}
.feed .body{white-space:pre-wrap; margin:0 0 14px}
.post-view .body{white-space:pre-wrap}
.post-view .media{margin:24px 0}

/* 사진·영상·녹음 */
.media{display:flex; flex-direction:column; gap:14px; margin-bottom:12px}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.gallery a{position:relative; display:block; aspect-ratio:1; overflow:hidden; background:var(--paper-2)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.gallery a:hover img{transform:scale(1.03)}
.gallery.single{grid-template-columns:1fr}
.gallery.single a{aspect-ratio:auto}
.gallery.single img{height:auto; max-height:560px; width:auto; max-width:100%}
.gallery .more{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(31,51,39,.55); color:#fff; font-size:26px; font-family:var(--serif)}
video.clip{width:100%; max-height:560px; background:#000}
audio{width:100%; display:block}
.audio{display:flex; flex-direction:column; gap:6px; margin-top:18px}
.audio a{align-self:flex-end}
.file-list{list-style:none; margin:8px 0 0; padding:0; font-size:13.5px; color:var(--ink-soft)}
.file-list li{display:flex; justify-content:space-between; gap:10px; padding:3px 0}

.admin-table{width:100%; border-collapse:collapse; font-size:15px; background:#fff; border:1px solid var(--line)}
.admin-table th, .admin-table td{text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.admin-table th{font-size:13px; color:var(--ink-soft); font-weight:600; background:var(--paper)}
.perm-list{display:flex; flex-wrap:wrap; gap:4px 14px}
.perm-list label{display:flex; align-items:center; gap:5px; font-size:14px; white-space:nowrap}
.manage-list li{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 4px; border-top:1px solid var(--line)}
.manage-list{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line)}
.manage-list .meta{font-size:13.5px; color:var(--ink-soft)}
.stack{display:flex; flex-direction:column; gap:48px}

footer{background:var(--green-deep); color:#cdd5cd; padding:48px 0; font-size:14.5px}
footer .row{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
footer b{font-family:var(--serif); color:#f3efe6; font-size:17px; display:block; margin-bottom:6px}
footer a{text-decoration:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .menu-btn{display:block}
  nav{position:absolute; top:68px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); display:none; max-height:calc(100vh - 68px); overflow:auto}
  nav.open{display:block}
  nav ul{flex-direction:column; gap:0; padding:8px 16px 16px}
  nav > ul > li > a{padding:12px 4px; font-weight:600; border-bottom:1px solid var(--line)}
  nav li.auth > a{margin:12px 0 0; border:1px solid var(--line); padding:10px 12px}
  .sub{position:static; display:flex; border:0; box-shadow:none; background:none; padding:4px 0 8px 12px}
  .hero{padding:56px 0 48px}
  .hero-grid, .head, .sermon, .two, .ministry-grid, .row-2{grid-template-columns:1fr; gap:28px}
  .row-2{gap:0}
  .head{gap:8px}
  .head .k{padding-top:0}
  .quick{grid-template-columns:1fr 1fr}
  .quick a:nth-child(2){border-right:0}
  .quick a:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cards{grid-template-columns:1fr 1fr; gap:20px}
  section{padding:60px 0}
  .admin-table thead{display:none}
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{display:block; width:100%}
  .admin-table tr{border-bottom:1px solid var(--line); padding:8px 0}
  .admin-table td{border:0; padding:6px 12px}
}
@media (max-width:480px){
  body{font-size:16px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:0 16px}
  .cards{grid-template-columns:1fr}
  .panel{padding:22px 18px}
}

/* ---------- 관리자 "페이지 편집" ---------- */
.staff + .staff{margin-top:48px}
.edit-fab{position:fixed; right:20px; bottom:20px; z-index:60; background:var(--green-deep); color:#fff; border:0; padding:12px 18px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.18)}
.edit-fab:hover{background:var(--green)}
body.editing{padding-bottom:150px}
body.editing [data-edit]{outline:2px dashed var(--ochre); outline-offset:6px; cursor:text}
body.editing [data-edit]:focus{outline-style:solid; outline-color:var(--green)}
body.editing [data-edit] a{cursor:text}
body.editing [data-edit] img{cursor:pointer}
body.editing .edit-current{box-shadow:0 0 0 3px rgba(168,103,47,.35); background:rgba(168,103,47,.06)}
body.editing img.edit-picked{outline:4px solid var(--ochre); outline-offset:2px}
.edit-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--green-deep); color:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 16px; box-shadow:0 -6px 24px rgba(0,0,0,.18); font-size:14px}
.edit-group{display:flex; flex-wrap:wrap; gap:4px; padding-right:14px; border-right:1px solid rgba(255,255,255,.18)}
.edit-group:last-of-type{border-right:0}
.edit-bar button{font:inherit; font-size:14px; padding:7px 11px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); cursor:pointer; white-space:nowrap}
.edit-bar button:hover{background:rgba(255,255,255,.2)}
.edit-bar button.primary{background:var(--ochre); border-color:var(--ochre); font-weight:600}
.edit-bar button.ghost{background:none}
.edit-status{flex:1 1 220px; color:#d9e0d9; font-size:13.5px}
.edit-status[data-type="error"]{color:#ffb4a8}
.edit-status[data-type="success"]{color:#c8e6c0}
.edit-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:70; background:var(--green-deep); color:#fff; padding:12px 20px; font-size:15px; box-shadow:0 6px 20px rgba(0,0,0,.2)}
@media (max-width: 720px){ .edit-group{border-right:0; padding-right:0} body.editing{padding-bottom:260px} }

/* ---------- 휴대폰 화면 다듬기 ---------- */
.bn-1, .bn-2{display:inline}
.l-short{display:none}
.filter-toggle{display:none}
@media (max-width: 600px){
  /* 위쪽 머리: 로고를 두 줄로 깔끔하게 ("뉴라이프" 크게 / "어번한인침례교회" 작게) */
  .bar{height:60px; gap:8px}
  nav{top:60px !important; max-height:calc(100vh - 60px) !important}
  .brand{gap:9px}
  .brand-mark{width:40px; height:40px; border-radius:10px}
  .brand small{display:none}
  .brand b{line-height:1.1; letter-spacing:-.01em}
  .bn-1{display:block; font-size:19px}
  .bn-2{display:block; font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; margin-top:2px}
  .l-long{display:none}
  .l-short{display:inline}
  .lang-btn{padding:7px 9px; font-size:13px; font-weight:600}
  .menu-btn{padding:7px 11px}

  /* 여백 줄이기 */
  section{padding:44px 0}
  .page-top{padding:32px 0 22px}
  .page-top .eyebrow{margin-bottom:8px}
  .hero{padding:36px 0 32px}
  .hero-grid{gap:22px}
  .service{padding:22px 22px}
  .service .time{font-size:30px}
  .quick a{padding:18px 16px}
  .quick b{font-size:16px}
  h2{margin-bottom:18px}
  .prose p.lead{font-size:18.5px}
  .head .k{font-size:12px}
  .stack{gap:32px}
  .feed article{padding:22px 0}
  .feed h3{font-size:20px}

  /* 예배 시간표: 표 대신 줄로 */
  .schedule, .schedule tbody, .schedule tr{display:block; width:100%}
  .schedule tr{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:14px 2px; border-bottom:1px solid var(--line)}
  .schedule th{grid-column:1 / -1; width:auto; padding:0; border:0; font-size:15px}
  .schedule td{padding:0; border:0}
  .schedule td.t{font-size:17px; white-space:normal}
  .schedule td:last-child{color:var(--ink-soft); font-size:14.5px; text-align:right; align-self:end}

  /* 목록: 날짜를 위에 작게, 제목은 아래에 넓게 */
  .posts a, .posts button.row{flex-direction:column-reverse; align-items:flex-start; gap:2px; padding:14px 2px; font-size:16px}
  .posts span.d{font-size:12.5px}

  /* 분야 버튼: 한 줄로, 옆으로 밀어서 보기 */
  .chips{flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 20px; padding:0 16px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none; white-space:nowrap}

  /* 검색 필터: "필터" 버튼을 눌러야 펼쳐짐 */
  .filter-toggle{display:inline-flex; align-items:center; gap:6px; margin:-6px 0 14px; padding:8px 14px; background:none; border:1px solid var(--line); font:inherit; font-size:14px; color:var(--ink); cursor:pointer}
  .filter-toggle b{display:inline-block; min-width:18px; padding:0 5px; background:var(--green); color:#fff; font-size:12px; font-weight:600; border-radius:9px; text-align:center}
  .search-row:not(.open) > .field:not(.search-main){display:none}

  /* 사진: 한 줄에 3장 */
  .gallery{grid-template-columns:repeat(3,1fr); gap:4px}
  .gallery.single{grid-template-columns:1fr}

  footer{padding:36px 0}
}

/* ---------- 글씨 크기 (위쪽 "글씨 크게" 버튼) ---------- */
/* 본문과 아래쪽 정보만 키움. zoom 은 글자와 간격을 함께 키우고 화면 폭에 맞게 다시 배치해 줌 */
html[data-font="2"] main, html[data-font="2"] footer{zoom:1.15}
html[data-font="3"] main, html[data-font="3"] footer{zoom:1.3}
/* 넓은 화면에서 본문 폭이 위쪽 메뉴와 같게 (글씨만 커지고 가운데 정렬 유지) */
html[data-font="2"] main .wrap, html[data-font="2"] footer .wrap{max-width:calc(var(--wrap) / 1.15)}
html[data-font="3"] main .wrap, html[data-font="3"] footer .wrap{max-width:calc(var(--wrap) / 1.3)}
.font-btn{font-weight:600; color:var(--ink)}
html[data-font="2"] .font-btn, html[data-font="3"] .font-btn{border-color:var(--green); color:var(--green)}

/* =====================================================================
   디자인 다듬기: 깔끔한 카드형 화면 + 차분한 움직임
   (주 대상: 50대 이상 교인 → 큰 글씨, 넉넉한 간격, 누르기 쉬운 버튼, 과하지 않은 움직임)
   ===================================================================== */
:root{
  --card:#fff;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(30,38,34,.05), 0 6px 18px rgba(30,38,34,.06);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* 모서리를 부드럽게 (전체 화면 공통) */
.btn, .lang-btn, .menu-btn, .filter-toggle, .link-btn, .msg,
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=search], select, textarea{border-radius:var(--radius-sm)}
.panel, .service, .map, .video, .board-bar, .admin-table{border-radius:var(--radius)}
.admin-table{overflow:hidden}
.tag, .chips button{border-radius:999px}
.card img, .card .ph{border-radius:var(--radius)}
.gallery a{border-radius:8px}
header{transition:box-shadow .3s}
header.scrolled{box-shadow:0 2px 14px rgba(30,38,34,.08)}

/* 바로가기 아이콘 */
.quick a::before{content:""; display:block; width:28px; height:28px; margin-bottom:10px; background:var(--green);
  -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat}
.quick a{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203v4M10%205h4'%2F%3E%3Cpath%20d%3D'M5%2021V11l7-4%207%204v10'%2F%3E%3Cpath%20d%3D'M10%2021v-5h4v5'%2F%3E%3C%2Fsvg%3E")}
.quick a:nth-child(2){--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8.5'%2F%3E%3Cpath%20d%3D'M12%207.5V12l3%202'%2F%3E%3C%2Fsvg%3E")}
.quick a:nth-child(3){--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8.5'%2F%3E%3Cpath%20d%3D'M10.2%208.8v6.4l5.3-3.2z'%2F%3E%3C%2Fsvg%3E")}
.quick a:nth-child(4){--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021s-6.5-5.6-6.5-10.5a6.5%206.5%200%200%201%2013%200C18.5%2015.4%2012%2021%2012%2021z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10.5'%20r%3D'2.3'%2F%3E%3C%2Fsvg%3E")}

/* 긴 글 접기 (휴대폰) */
.fold-btn{display:block; width:100%; margin:14px 0 0; padding:13px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; font-size:15.5px; font-weight:600; color:var(--green); cursor:pointer}
.foldable{position:relative}
.foldable.folded{max-height:var(--fold-h, 380px); overflow:hidden}
.foldable.folded::after{content:""; position:absolute; left:0; right:0; bottom:0; height:96px; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0), var(--fold-bg, #fff))}
body.editing .foldable.folded{max-height:none}
body.editing .foldable.folded::after, body.editing .fold-btn{display:none}

@media (max-width: 600px){
  body{font-size:17px; line-height:1.8}
  section, .hero, .page-top{border-bottom:0}
  section{padding:40px 0}
  .alt{background:var(--paper-2)}

  /* 바로가기: 큼직한 아이콘 버튼 4개 */
  .quick{display:grid; grid-template-columns:1fr 1fr; gap:10px; border:0; padding:4px 0 6px}
  .quick a{border:0 !important; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 16px 16px; gap:0}
  .quick em{display:none}
  .quick b{font-size:17px}
  .quick span{font-size:13.5px; margin-top:2px}

  /* 각 구역 내용은 흰 카드 안에 */
  .head{gap:10px}
  .head > .k{margin:0 0 2px 4px}
  .head > .k + *{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 20px}
  #news .two > div, .contact > div{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 18px}
  .contact .map{box-shadow:var(--shadow)}
  .two{gap:16px}
  h2{font-size:27px}
  .prose p.lead{font-size:18.5px}
  .facts{gap:10px 28px}

  /* 카드 안 목록은 선을 가볍게 */
  .head .posts li:last-child, #news .posts li:last-child{border-bottom:0}
  .ministry{padding:22px 0}
  .ministry:first-of-type{border-top:0; padding-top:4px}
  .ministry:last-child{border-bottom:0; padding-bottom:0}
  .schedule tr:last-child{border-bottom:0}
  .staff + .staff{margin-top:32px; padding-top:32px; border-top:1px solid var(--line)}

  /* 소식·설교 목록 */
  .feed article{background:var(--card); border:0 !important; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 16px; margin-bottom:12px}
  .sermon-list{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:0 14px}
  .sermon-list li:first-child{border-top:0}
  .sermon-list li:last-child{border-bottom:0}
  .posts span.d{font-size:13.5px}
  .tag{font-size:12.5px; padding:2px 9px}
  .sermon .video, .sermon iframe{box-shadow:var(--shadow)}

  /* 누르기 쉽게 */
  .btn{padding:13px 22px; font-size:16px}
  .btn.small{padding:9px 14px; font-size:14.5px}
  .chips button{padding:8px 16px; font-size:15px}
}

/* ---------- 움직임 (차분하게, 한 번만) ---------- */
@media (prefers-reduced-motion: no-preference){
  /* 처음 화면: 제목과 예배 시간이 살짝 올라오며 나타남 */
  html.motion .hero-grid > *, html.motion .page-top .wrap > *{animation:nl-rise .8s var(--ease) both}
  html.motion .hero-grid > *:nth-child(2), html.motion .page-top .wrap > *:nth-child(2){animation-delay:.12s}
  html.motion .quick a{animation:nl-rise .7s var(--ease) both}
  html.motion .quick a:nth-child(1){animation-delay:.18s}
  html.motion .quick a:nth-child(2){animation-delay:.24s}
  html.motion .quick a:nth-child(3){animation-delay:.30s}
  html.motion .quick a:nth-child(4){animation-delay:.36s}

  /* 아래로 내리면 각 구역이 부드럽게 나타남 (app.js 가 .reveal / .in 을 붙임) */
  html.motion .reveal{opacity:0; transform:translateY(16px); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d, 0s)}
  html.motion .reveal.in{opacity:1; transform:none}
  body.editing .reveal{opacity:1 !important; transform:none !important}

  /* 새로 나타나는 목록·펼친 설교 */
  .feed article, .sermon-panel:not([hidden]), .board-bar{animation:nl-rise .5s var(--ease) both}

  /* 로고 새싹: 방문할 때 한 번, 줄기가 자라고 잎이 펼쳐짐 */
  html.sprout .brand-mark{animation:nl-logo .9s var(--ease) both .1s}

  /* 누를 때 살짝 들어가는 느낌 */
  .btn, .quick a, .chips button, .lang-btn, .menu-btn, .fold-btn, .filter-toggle, .posts button.row{transition:background-color .2s, color .2s, border-color .2s, box-shadow .25s, transform .15s}
  .btn:active, .quick a:active, .chips button:active, .lang-btn:active, .fold-btn:active{transform:scale(.97)}
  @media (hover: hover){
    .quick a:hover{transform:translateY(-2px)}
  }
  /* 휴대폰 메뉴 열릴 때 */
  nav.open{animation:nl-drop .25s var(--ease) both}
}
@keyframes nl-rise{from{opacity:0; transform:translateY(12px)}}
@keyframes nl-stem{from{transform:scaleY(0)}}
@keyframes nl-logo{from{opacity:0; transform:scale(.85) rotate(-6deg)}}
@keyframes nl-leaf{from{transform:scale(0) rotate(-8deg); opacity:0}}
@keyframes nl-drop{from{opacity:0; transform:translateY(-6px)}}

/* ---------- 관리자: 방문 통계 ---------- */
.stat-tiles{display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:16px}
.stat-tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:2px}
.stat-tile span{font-size:14px; color:var(--ink-soft)}
.stat-tile strong{font-family:var(--serif); font-size:32px; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums}
.stat-tile small{font-size:12.5px; color:var(--ink-soft)}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px}
.stat-card h3{font-size:17px; margin:0 0 14px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0}
.stat-grid .stat-card{margin-bottom:0}
.stat-grid + .stat-card{margin-top:16px}
.stat-list{list-style:none; margin:0; padding:0; counter-reset:n}
.stat-list li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:15px}
.stat-list li:first-child{border-top:0}
.stat-list .sl-main{display:flex; flex-direction:column; min-width:0}
.stat-list .sl-main a{text-decoration:none}
.stat-list .sl-main a:hover{text-decoration:underline}
.stat-list small{font-size:12.5px; color:var(--ink-soft)}
.stat-list b{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.stat-table{margin-top:12px; font-size:14px}
.stat-table summary{cursor:pointer; color:var(--ink-soft)}
.stat-table table{margin-top:8px}
/* 막대그래프 (위쪽 메뉴의 .bar 와 이름이 겹치지 않게 vbar 사용): 한 가지 색(교회 초록), 가는 막대, 위쪽만 둥글게, 막대 사이 2px 간격, 흐린 기준선 */
.bar-chart{display:flex; gap:10px; height:200px}
.bar-axis{display:flex; flex-direction:column; justify-content:space-between; font-size:12px; color:var(--ink-soft); padding-bottom:22px; text-align:right; min-width:36px}
.bar-plot{position:relative; flex:1; display:flex; flex-direction:column}
.bars{flex:1; display:flex; align-items:flex-end; gap:2px; border-bottom:1px solid var(--line); background:linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat}
.bar-hit{flex:1; height:100%; display:flex; align-items:flex-end; cursor:pointer; outline:none}
.vbar{width:100%; max-width:28px; margin:0 auto; background:var(--green); border-radius:4px 4px 0 0; transition:opacity .15s}
.bars:hover .vbar{opacity:.55}
.bar-hit:hover .vbar, .bar-hit:focus .vbar{opacity:1}
.bar-dates{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); padding-top:4px}
.bar-tip{position:absolute; top:-6px; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:13px; padding:6px 10px; border-radius:8px; white-space:nowrap; pointer-events:none; display:flex; flex-direction:column; line-height:1.4}
@media (max-width: 900px){ .stat-tiles{grid-template-columns:repeat(2, 1fr)} .stat-grid{grid-template-columns:1fr} }

/* ---------- 어르신 편의: 녹음 플레이어 ---------- */
.player{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px 14px; gap:0}
.player audio{display:none}
.pl-main{display:flex; align-items:center; gap:14px}
.pl-play{flex:none; width:58px; height:58px; border-radius:50%; border:0; background:var(--green); cursor:pointer; position:relative}
.pl-play::before{content:""; position:absolute; left:23px; top:18px; border-left:17px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent}
.pl-play.on::before{left:20px; top:19px; width:6px; height:20px; border:0; background:#fff; box-shadow:12px 0 0 #fff}
.pl-play:hover{background:var(--green-deep)}
.pl-track{flex:1; min-width:0}
.pl-seek{-webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; cursor:pointer; margin:0}
.pl-seek::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:linear-gradient(var(--green), var(--green)) 0 / var(--pct, 0%) 100% no-repeat, var(--line)}
.pl-seek::-moz-range-track{height:6px; border-radius:3px; background:var(--line)}
.pl-seek::-moz-range-progress{height:6px; border-radius:3px; background:var(--green)}
.pl-seek::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:#fff; border:2px solid var(--green); box-shadow:0 1px 3px rgba(0,0,0,.15)}
.pl-seek::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--green)}
.pl-times{display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.pl-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.pl-skip, .pl-speed{font:inherit; font-size:15px; font-weight:600; padding:9px 14px; min-height:44px; background:#fff; border:1px solid var(--line); border-radius:999px; color:var(--ink); cursor:pointer}
.pl-skip:hover, .pl-speed:hover{border-color:var(--green); color:var(--green)}
.pl-dl{margin-left:auto; font-size:14px; color:var(--ink-soft); align-self:center}
.pl-resume{margin:10px 0 0; font-size:14.5px; color:var(--green)}
.audio.player a.pl-dl{align-self:center}

/* ---------- 소리로 듣기 · 공유하기 · 연락 버튼 ---------- */
.item-actions{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px}
.read-btn.on{border-color:var(--green); color:var(--green); background:#eef3ee}
.head .k .read-btn{display:block; margin-top:12px; letter-spacing:0; text-transform:none; font-size:14px; color:var(--ink)}
.contact-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.contact-actions .btn{flex:1 1 auto; text-align:center; min-height:48px}

/* ---------- 맨 위로 ---------- */
.to-top{position:fixed; right:16px; bottom:18px; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  width:56px; height:56px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.96); color:var(--green);
  font:inherit; font-size:20px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(30,38,34,.12);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s, transform .25s, visibility .25s}
.to-top span{font-size:11px; font-weight:600; margin-top:2px}
.to-top.show{opacity:1; visibility:visible; transform:none}
body:has(.edit-fab:not([hidden])) .to-top{bottom:84px}
body.editing .to-top{display:none}

/* ---------- 알림, 안내 창 ---------- */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:80; max-width:calc(100% - 32px); background:var(--green-deep); color:#fff;
  padding:13px 20px; border-radius:var(--radius-sm); font-size:15.5px; box-shadow:0 8px 24px rgba(0,0,0,.2); animation:nl-rise .3s var(--ease) both}
.modal{position:fixed; inset:0; z-index:90; background:rgba(20,28,24,.45); display:flex; align-items:flex-end; justify-content:center; padding:16px}
.modal-card{background:#fff; border-radius:18px; padding:26px 22px 20px; width:100%; max-width:460px; max-height:calc(100vh - 32px); overflow:auto; animation:nl-rise .3s var(--ease) both}
.modal-card h2{font-size:24px; margin:0 0 8px}
.modal-card .guide{border-top:1px solid var(--line); padding-top:14px; margin-top:14px}
.modal-card .guide h3{font-size:17px; margin:0 0 6px}
.modal-card ol{margin:0; padding-left:20px; font-size:16px; line-height:1.75}
@media (min-width: 601px){ .modal{align-items:center} }
nav li.install-li a{color:var(--green)}
@media (min-width: 901px){ nav li.install-li{display:none} } /* 컴퓨터에서는 숨김 (휴대폰 메뉴에서만) */

/* ---------- 움직임 2: 은은한 효과 더하기 (동작 줄이기 설정한 기기에서는 모두 꺼짐) ---------- */
.read-progress{position:fixed; left:0; top:0; height:3px; width:100%; z-index:70; background:var(--green); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; opacity:.85}
@media (prefers-reduced-motion: no-preference){
  /* 첫 화면 뒤로 아주 옅은 빛이 천천히 움직임 */
  html.motion .hero{position:relative; overflow:hidden}
  html.motion .hero::before{content:""; position:absolute; inset:-30% -10% auto auto; width:70vmax; height:70vmax; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side, rgba(126,160,120,.16), rgba(126,160,120,0)); animation:nl-glow 18s ease-in-out infinite alternate}
  html.motion .hero-grid{position:relative}
  /* 예배 시간 카드: 빛이 한 번 스쳐 지나감 */
  html.motion .service{position:relative; overflow:hidden}
  html.motion .service::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
    background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0)); animation:nl-shine 1.6s var(--ease) 1s both}

  /* 구역 이름표(Greeting 등) 아래 짧은 선이 그어짐 */
  html.motion .head > .k{display:flex; flex-direction:column; align-items:flex-start}
  html.motion .head > .k .read-btn{order:2}
  html.motion .head > .k::after{content:""; display:block; width:28px; height:2px; margin-top:10px; background:var(--green); opacity:.55;
    transform-origin:0 50%; order:1; animation:nl-line .9s var(--ease) both .2s}
  html.motion .head > .k.reveal::after{animation:none; transform:scaleX(0); transition:transform .9s var(--ease) .25s}
  html.motion .head > .k.reveal.in::after{transform:none}

  /* 사진: 살짝 커져 있다가 제자리로 */
  html.motion img.reveal, html.motion .reveal img{transform:scale(1.035); transition:transform 1.4s var(--ease)}
  html.motion img.reveal.in, html.motion .reveal.in img{transform:none}

  /* 목록이 위에서부터 차례로 나타남 (처음 10개까지만) */
  .posts li, .sermon-list li{animation:nl-rise .45s var(--ease) both}
  .posts li:nth-child(2), .sermon-list li:nth-child(2){animation-delay:.04s}
  .posts li:nth-child(3), .sermon-list li:nth-child(3){animation-delay:.08s}
  .posts li:nth-child(4), .sermon-list li:nth-child(4){animation-delay:.12s}
  .posts li:nth-child(5), .sermon-list li:nth-child(5){animation-delay:.16s}
  .posts li:nth-child(6), .sermon-list li:nth-child(6){animation-delay:.2s}
  .posts li:nth-child(7), .sermon-list li:nth-child(7){animation-delay:.24s}
  .posts li:nth-child(8), .sermon-list li:nth-child(8){animation-delay:.28s}
  .posts li:nth-child(9), .sermon-list li:nth-child(9){animation-delay:.32s}
  .posts li:nth-child(n+10), .sermon-list li:nth-child(n+10){animation-delay:.36s}
  .sermon-list.quiet li{animation:none}
  .feed article:nth-child(2){animation-delay:.06s}
  .feed article:nth-child(3){animation-delay:.12s}
  .feed article:nth-child(n+4){animation-delay:.18s}

  /* 재생 중: 재생 버튼 둘레로 잔잔한 물결 */
  .pl-play.on{animation:nl-pulse 2.4s ease-out infinite}
  /* 소리로 듣기 중: 작은 소리 막대 */
  .read-btn.on::after{content:""; display:inline-block; width:3px; height:12px; margin-left:8px; vertical-align:-1px; background:currentColor; border-radius:2px;
    box-shadow:5px 0 0 currentColor, 10px 0 0 currentColor; animation:nl-eq .9s ease-in-out infinite alternate; transform-origin:50% 100%}
  .read-btn.on{padding-right:20px}

  /* 마우스를 올리면 살짝 떠오름 (컴퓨터) */
  @media (hover: hover){
    .feed article, .card img.photo, .gallery a{transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
    .feed article:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(30,38,34,.1)}
    .gallery a:hover{transform:translateY(-2px)}
    .quick a::before{transition:transform .3s var(--ease)}
    .quick a:hover::before{transform:translateY(-2px) scale(1.06)}
    .posts button.row:hover, .posts a:hover{color:var(--green)}
  }

  /* 전체 읽기: 부드럽게 펼쳐짐 */
  .foldable{transition:max-height .6s var(--ease)}
}
@keyframes nl-glow{from{transform:translate(0,0)} to{transform:translate(-14%, 10%)}}
@keyframes nl-shine{to{left:130%}}
@keyframes nl-line{from{transform:scaleX(0)}}
@keyframes nl-pulse{0%{box-shadow:0 0 0 0 rgba(44,70,54,.35)} 70%{box-shadow:0 0 0 14px rgba(44,70,54,0)} 100%{box-shadow:0 0 0 0 rgba(44,70,54,0)}}
@keyframes nl-eq{from{transform:scaleY(.45)} to{transform:scaleY(1)}}

/* 설교 듣기 빠르기 고르기 (0.5배 ~ 2배) */
.pl-speed.changed{border-color:var(--green); color:var(--green); background:#eef3ee}
.pl-speeds{margin-top:12px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); animation:nl-drop .2s var(--ease) both}
.pl-speeds p{margin:0 0 10px; font-size:14.5px; color:var(--ink-soft)}
.pl-speeds > div{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px}
.pl-speeds button{font:inherit; min-height:52px; padding:6px 4px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1.25}
.pl-speeds button b{font-size:16.5px}
.pl-speeds button small{font-size:12px; color:var(--ink-soft)}
.pl-speeds button:hover{border-color:var(--green)}
.pl-speeds button[aria-pressed=true]{background:var(--green); border-color:var(--green); color:#fff}
.pl-speeds button[aria-pressed=true] small{color:#dfe8df}
@media (max-width: 600px){ .pl-speeds > div{grid-template-columns:repeat(3, 1fr)} }
/* ---------- 첫 화면 꾸밈: 인사·예배 남은 시간 / 오늘의 말씀 / 계절 효과 (js/delight.js) ---------- */
.hero-note{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:36px; font-size:15.5px; color:var(--ink-soft)}
.hero-note .hn-hello{color:var(--ink); font-weight:600}
.hero-note .hn-dot{opacity:.5}
.hero-note.live .hn-left{color:var(--green); font-weight:600}

.verse-band{padding:40px 0 8px; border-bottom:0}
.verse{position:relative; margin:0; padding:30px 34px 24px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.verse::before{content:"\201C"; position:absolute; right:22px; top:4px; font-family:var(--serif); font-size:120px; line-height:1; color:var(--green); opacity:.07; pointer-events:none}
.verse-head{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--green)}
.verse-mark{width:18px; height:18px; background:var(--green); opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8 4.5 4 4.5v13c4 0 6.5.5 8 2 1.5-1.5 4-2 8-2v-13c-4 0-6.5.5-8 2z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10.5 5 8 4.5 4 4.5v13c4 0 6.5.5 8 2 1.5-1.5 4-2 8-2v-13c-4 0-6.5.5-8 2z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E") center / contain no-repeat}
.verse-date{margin-left:auto; font-weight:400; letter-spacing:0; color:var(--ink-soft)}
.verse-body{transition:opacity .28s ease, transform .28s ease}
.verse-body.out{opacity:0; transform:translateY(6px)}
.verse-text{margin:16px 0 10px; font-family:var(--serif); font-size:clamp(20px, 2.3vw, 25px); line-height:1.7; color:var(--ink); word-break:keep-all}
.verse-ref{display:block; font-style:normal; font-size:15px; color:var(--ink-soft)}
.verse-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.verse-actions .read-btn{margin:0}
@media (max-width: 600px){
  .hero-note{margin-top:22px; font-size:15px; flex-direction:column; align-items:flex-start}
  .hero-note .hn-dot{display:none}
  .verse-band{padding:28px 0 0}
  .verse{padding:22px 20px 18px}
  .verse-date{margin-left:0; width:100%}
  .verse-actions .btn{flex:1 1 auto}
}

/* 계절 효과: 첫 화면 위로 몇 개만 천천히 떨어짐 */
.hero{position:relative; overflow:hidden}
.season{position:absolute; inset:0; overflow:hidden; pointer-events:none; transition:opacity 1.5s}
.season.done{opacity:0}
.hero > .wrap{position:relative; z-index:1}
.season i{position:absolute; top:-20px; width:var(--s); height:var(--s); opacity:0;
  animation:nl-fall var(--dur) linear var(--delay) 2 both}
.season.leaf i{border-radius:0 70% 0 70%; background:hsl(calc(22 + var(--hue) * 12) 62% 52%)}
.season.petal i{border-radius:70% 0 70% 0; background:hsl(calc(345 - var(--hue) * 8) 70% 84%)}
.season.snow i{border-radius:50%; background:#c9d6dc}
@keyframes nl-fall{
  0%{transform:translate(0, 0) rotate(var(--rot)); opacity:0}
  10%{opacity:.7}
  50%{transform:translate(var(--sway), 300px) rotate(calc(var(--rot) + 140deg))}
  85%{opacity:.6}
  100%{transform:translate(calc(var(--sway) * -.4), 620px) rotate(calc(var(--rot) + 280deg)); opacity:0}
}
@media (prefers-reduced-motion: reduce){ .season{display:none} .verse-body{transition:none} }
/* ---------- 실용 기능: 끄기 예약 / 이어 듣기 / 달력에 넣기 / 인쇄 ---------- */
.pl-sleeps > div{grid-template-columns:repeat(auto-fill, minmax(104px, 1fr))}
.pl-sleeps button{min-height:48px}

.cc-wrap{padding-top:28px}
.continue-card{position:relative; display:flex; align-items:center; gap:14px; margin:0 0 16px; padding:16px 44px 16px 18px; background:#eef3ee; border:1px solid #d3e0d4; border-radius:var(--radius);
  animation:nl-rise .5s var(--ease) both}
.cc-icon{font-size:26px; line-height:1}
.cc-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.cc-k{font-size:13px; font-weight:600; color:var(--green); letter-spacing:.02em}
.cc-body b{font-size:16.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cc-bar{display:block; height:5px; margin:6px 0 2px; border-radius:3px; background:linear-gradient(var(--green), var(--green)) 0 / var(--pct) 100% no-repeat, #d3e0d4}
.cc-body small{font-size:13.5px; color:var(--ink-soft)}
.continue-card .btn{flex:none}
.cc-x{position:absolute; right:8px; top:8px; width:32px; height:32px; border:0; background:none; font-size:22px; line-height:1; color:var(--ink-soft); cursor:pointer; border-radius:50%}
.cc-x:hover{background:rgba(0,0,0,.05)}
@media (max-width: 600px){
  .continue-card{flex-wrap:wrap; padding:16px 40px 16px 16px}
  .continue-card .btn{width:100%; text-align:center}
}

.hn-cal{font:inherit; font-size:14.5px; font-weight:600; color:var(--green); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px; min-height:40px; cursor:pointer; margin-left:6px}
.hn-cal:hover{border-color:var(--green)}
@media (max-width: 600px){ .hn-cal{margin:8px 0 0} }
.cal-choices{display:flex; flex-direction:column; gap:10px}
.cal-choices .btn{text-align:center; width:100%}

/* 인쇄할 때: 메뉴·버튼은 빼고 글만 크고 깔끔하게 */
@media print{
  header, footer, nav, .to-top, .toast, .read-progress, .item-actions, .edit-fab, .edit-bar, .season, .hero-note,
  .verse-band, .continue-card, .fold-btn, .chips, .search-row, .filter-toggle, .board-bar, .pl-tools, .pl-speeds, .lang-btn, .menu-btn{display:none !important}
  body{background:#fff !important; color:#000; font-size:13pt; line-height:1.7}
  main{zoom:1 !important}
  .reveal{opacity:1 !important; transform:none !important}
  .foldable.folded{max-height:none !important}
  .foldable.folded::after{display:none}
  a{color:#000; text-decoration:none}
  img{max-width:100% !important; break-inside:avoid}
  .panel, .verse, .feed article{box-shadow:none !important; border:1px solid #ccc}
  *{animation:none !important; transition:none !important}
}
/* ---------- 선으로 그린 풍경 · 시간대 하늘 · 한 낱말씩 나타나는 말씀 ---------- */
.hero.has-land{padding-bottom:150px}
.land{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:140px; pointer-events:none; overflow:visible}
.land path, .land circle{fill:none; stroke:var(--green); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.land .l-back path{opacity:.22}
.land .l-front > *{opacity:.42}
.land .l-sun{stroke:#c9893a; opacity:.55}
.land .l-sky.evening .l-sun{stroke:#c96a4a}
.land .l-moon{stroke:#7d8aa8; opacity:.6}
.land .l-stars path{stroke:#9aa6c0; stroke-width:1.3; opacity:.55}
.land .l-birds{opacity:0}
.land .l-birds path{stroke:var(--ink-soft); stroke-width:1.3}
.land .l-back, .land .l-sky{transition:transform .1s linear}

@media (prefers-reduced-motion: no-preference){
  /* 펜으로 그리듯: 선 길이(1)만큼 비워 두었다가 채움 */
  .land.draw path, .land.draw circle{stroke-dasharray:1; stroke-dashoffset:1; animation:nl-draw 1.6s var(--ease) forwards; animation-delay:var(--o, .2s)}
  .land.draw .l-back path{animation-duration:3.2s; --o:0s}
  .land.draw .l-front > path:first-child{animation-duration:3s; --o:.2s}
  .land.draw .l-sun{stroke-dasharray:none; stroke-dashoffset:0; animation:nl-sunrise 3s var(--ease) both .6s}
  .land.draw .l-moon{animation:nl-draw 1.8s var(--ease) forwards .6s}
  .land.draw .l-stars path{stroke-dasharray:none; stroke-dashoffset:0; animation:nl-twinkle 3.2s ease-in-out infinite; animation-delay:calc(var(--o, 0s) + 1s)}
  .land.draw .l-stars path:nth-child(2){animation-delay:1.8s}
  .land.draw .l-stars path:nth-child(3){animation-delay:2.6s}
  .land.draw .l-stars path:nth-child(4){animation-delay:1.3s}
  .land.draw .l-stars path:nth-child(5){animation-delay:2.2s}
  .land.draw .l-birds path{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
  .land.draw .l-birds{animation:nl-birds 26s linear 2.5s 1 both}

  /* 말씀이 한 낱말씩 써 내려가듯 */
  .verse-text.wait .w{opacity:0}
  .verse-text.writing .w{display:inline-block; animation:nl-word .7s var(--ease) both; animation-delay:calc(var(--i) * 70ms + .1s)}
}
@keyframes nl-draw{to{stroke-dashoffset:0}}
@keyframes nl-sunrise{from{transform:translateY(26px); opacity:0}}
@keyframes nl-twinkle{0%, 100%{opacity:.15} 50%{opacity:.7}}
@keyframes nl-birds{0%{transform:translate(-60px, 40px); opacity:0} 8%{opacity:.6} 85%{opacity:.6} 100%{transform:translate(1260px, 4px); opacity:0}}
@keyframes nl-word{from{opacity:0; transform:translateY(5px); filter:blur(3px)}}
.land .l-sun, .land .l-moon{transform-box:fill-box}

/* 시간대에 따라 첫 화면 빛깔이 살짝 달라짐 */
html.motion .hero.tod-morning::before{background:radial-gradient(closest-side, rgba(235,190,110,.2), rgba(235,190,110,0))}
html.motion .hero.tod-evening::before{background:radial-gradient(closest-side, rgba(225,140,110,.18), rgba(225,140,110,0))}
html.motion .hero.tod-night::before{background:radial-gradient(closest-side, rgba(120,140,185,.16), rgba(120,140,185,0))}

@media (max-width: 600px){
  .hero.has-land{padding-bottom:110px}
  .land{height:100px}
  .land path, .land circle{stroke-width:2.2}
}
@media print{ .land{display:none} .hero.has-land{padding-bottom:0} }
/* ---------- 교회 사진 ---------- */
/* 홈: 천천히 바뀌는 사진 */
.showcase{padding:40px 0 8px; border-bottom:0}
.show{position:relative; aspect-ratio:16/8; border-radius:var(--radius); overflow:hidden; background:#2c3a33; box-shadow:var(--shadow)}
.show .slide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.4s ease}
.show .slide.on{opacity:1}
.show .slide img{width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block}
.show::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(20,28,24,.72) 0%, rgba(20,28,24,.35) 32%, rgba(20,28,24,0) 58%)}
.show-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px 34px 30px; color:#fff}
.show-cap .eyebrow{color:#f0dcc0; margin:0 0 6px}
.show-title{font-family:var(--serif); font-size:clamp(22px, 2.8vw, 32px); line-height:1.35; margin:0; text-shadow:0 1px 12px rgba(0,0,0,.25)}
.show-sub{margin:6px 0 0; font-size:15.5px; opacity:.9; transition:opacity .3s}
.show-sub.out{opacity:0}
.show-dots{position:absolute; right:26px; bottom:30px; z-index:3; display:flex; gap:4px}
.show-dots button{width:30px; height:30px; border:0; padding:0; background:none; cursor:pointer; position:relative}
.show-dots button::before{content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:rgba(255,255,255,.5); transition:all .3s}
.show-dots button[aria-current=true]::before{background:#fff; width:22px; margin-left:-11px; border-radius:5px}
@media (prefers-reduced-motion: no-preference){
  .show .slide.on img{animation:nl-kenburns 9s ease-out both}
}
@keyframes nl-kenburns{from{transform:scale(1.07)} to{transform:scale(1)}}
@media (max-width: 600px){
  .showcase{padding:28px 0 0}
  .show{aspect-ratio:4/3.6}
  .show-cap{padding:18px 18px 52px}
  .show::after{background:linear-gradient(0deg, rgba(20,28,24,.82) 0%, rgba(20,28,24,.55) 40%, rgba(20,28,24,0) 72%)}
  .show-sub{font-size:14.5px}
  .show-dots{left:12px; right:auto; bottom:10px}
}

/* 오시는 길: 예배당 입구 사진 */
.contact-photo{display:block; width:100%; max-width:440px; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); margin-top:28px; box-shadow:var(--shadow)}

/* 설교 · 소식 페이지 머리: 오른쪽에 교회 사진이 은은하게 번져 나옴 */
.page-top.photo{position:relative; overflow:hidden; padding:84px 0 56px}
.page-top.photo::before{content:""; position:absolute; top:0; right:0; bottom:0; width:58%; z-index:0; background:50% 72% / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 70%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 70%)}
.page-top.photo.night::before{background-image:url(../images/church-night.jpg); background-position:50% 62%}
.page-top.photo.sun::before{background-image:url(../images/church-day.jpg); background-position:50% 55%}
.page-top.photo .wrap{position:relative; z-index:1}
@media (max-width: 600px){
  .page-top.photo{padding:56px 0 36px}
  .page-top.photo::before{width:100%; opacity:.35; -webkit-mask-image:linear-gradient(90deg, transparent 10%, #000 90%); mask-image:linear-gradient(90deg, transparent 10%, #000 90%)}
  .page-top.photo.night::before{background-image:url(../images/church-night-sm.jpg)}
  .page-top.photo.sun::before{background-image:url(../images/church-day-sm.jpg)}
}@media print{ .showcase{display:none} .page-top.photo::before, .page-top.photo::after{display:none} }
/* ---------- 첫 화면 예배 시간 카드: 교회 사진이 천천히 움직이며 바뀜 ---------- */
.service{position:relative; overflow:hidden; isolation:isolate; background:var(--green-deep)}
.service::before{content:""; position:absolute; inset:-6%; z-index:-1;
  background:linear-gradient(135deg, rgba(22,36,28,.86) 0%, rgba(22,36,28,.62) 55%, rgba(22,36,28,.38) 100%), url(../images/church-night-sm.jpg) 50% 60% / cover no-repeat}
.service > *{position:relative}
.service .time, .service .label, .service p, .service a{text-shadow:0 1px 10px rgba(0,0,0,.35)}
@media (prefers-reduced-motion: no-preference){
  /* 아주 천천히 다가가고 옆으로 흐르며, 밤 → 낮 → 저녁 사진이 부드럽게 바뀜 */
  html.motion .service::before{animation:nl-svc-move 14s ease-in-out infinite alternate; will-change:transform}
}
@keyframes nl-svc-move{
  from{transform:scale(1.04) translate(3%, 2%)}
  to{transform:scale(1.28) translate(-5%, -3%)}
}
@keyframes nl-svc-photos{
  0%, 28%{background-image:linear-gradient(135deg, rgba(22,36,28,.86) 0%, rgba(22,36,28,.62) 55%, rgba(22,36,28,.38) 100%), url(../images/church-night-sm.jpg)}
  34%, 61%{background-image:linear-gradient(135deg, rgba(22,36,28,.88) 0%, rgba(22,36,28,.7) 55%, rgba(22,36,28,.5) 100%), url(../images/church-day-sm.jpg)}
  67%, 94%{background-image:linear-gradient(135deg, rgba(22,36,28,.86) 0%, rgba(22,36,28,.62) 55%, rgba(22,36,28,.38) 100%), url(../images/church-dusk-sm.jpg)}
  100%{background-image:linear-gradient(135deg, rgba(22,36,28,.86) 0%, rgba(22,36,28,.62) 55%, rgba(22,36,28,.38) 100%), url(../images/church-night-sm.jpg)}
}
@media print{ .service::before{display:none} }
/* 홈 사진 슬라이드의 영상 장면 (불이 켜지는 예배당) */
.show .slide video{width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block; background:#141c2c}
.show .video-slide.on video{animation:none}
@media (prefers-reduced-motion: no-preference){
}
@keyframes nl-vidzoom{from{transform:scale(1)} to{transform:scale(1.06)}}
/* 예배 카드 두 번째 사진(낮): 첫 사진 위에 겹쳐 천천히 나타났다 사라짐 — 투명도·크기만 바꿔 화면이 버벅이지 않음 */
@media (prefers-reduced-motion: no-preference){
  html.motion .service::after{content:""; position:absolute; top:-6%; right:-6%; bottom:-6%; left:-6%; width:auto; z-index:-1; pointer-events:none;
    background:linear-gradient(135deg, rgba(22,36,28,.9) 0%, rgba(22,36,28,.72) 55%, rgba(22,36,28,.52) 100%), url(../images/church-day-sm.jpg) 50% 55% / cover no-repeat;
    opacity:0; will-change:opacity, transform;
    animation:nl-svc-fade 20s ease-in-out infinite, nl-svc-move 14s ease-in-out infinite alternate-reverse}
}
@keyframes nl-svc-fade{0%, 38%{opacity:0} 50%, 88%{opacity:1} 100%{opacity:0}}
.show .slide{will-change:opacity}
.show .slide video{transform:translateZ(0)}
/* ---------- 첫 화면 교회 이름: 고급스럽게 ---------- */
.hero h1.lux{position:relative}
@media (prefers-reduced-motion: no-preference){
  /* 이름이 담긴 칸 자체의 떠오름은 끄고, 글자 하나하나가 움직이게 */
  html.motion .hero-grid > [data-edit="home-hero"]{animation:none}
  .hero h1.lux-in .ch{display:inline-block; animation:nl-char 1.3s cubic-bezier(.16,.84,.24,1) both; animation-delay:calc(var(--i) * 55ms + .35s)}
  /* 가는 금빛이 글자 위를 스치고 지나감 (처음 한 번, 그 뒤로 12초마다 은은하게) */
  .hero h1.lux::after{content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:38%; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(100deg, rgba(232,190,110,0) 0%, rgba(236,196,120,.75) 50%, rgba(232,190,110,0) 100%);
    transform:translateX(-120%) skewX(-12deg); opacity:0;
    animation:nl-glint 12s cubic-bezier(.45,0,.25,1) 1.9s infinite}
  /* 영어 이름·지역 이름도 한 박자 늦게 차분히 */
  html.motion .hero .eyebrow{animation:nl-fadein 1.2s ease both .1s}
  html.motion .hero h1 + .en{animation:nl-rise-soft 1.2s cubic-bezier(.16,.84,.24,1) both 1.3s}
}
@keyframes nl-char{
  0%{opacity:0; transform:translateY(.5em) scale(.96); filter:blur(10px)}
  55%{filter:blur(0)}
  100%{opacity:1; transform:none; filter:blur(0)}
}
@keyframes nl-glint{
  0%{transform:translateX(-120%) skewX(-12deg); opacity:0}
  2%{opacity:1}
  16%{transform:translateX(300%) skewX(-12deg); opacity:1}
  18%, 100%{transform:translateX(300%) skewX(-12deg); opacity:0}
}
@keyframes nl-fadein{from{opacity:0}}
@keyframes nl-rise-soft{from{opacity:0; transform:translateY(8px); letter-spacing:.06em}}@media (prefers-reduced-motion: no-preference){
  /* 글자 움직임이 준비되기 전에 이름이 먼저 보였다 사라지는 깜빡임 방지 (혹시 준비가 늦어도 2.5초 뒤엔 그냥 보임) */
  html.motion .hero h1:not(.lux){opacity:0; animation:nl-show .6s ease 2.5s forwards}
}
@keyframes nl-show{to{opacity:1}}
/* ---------- 배경 찬송가 버튼 (왼쪽 아래) ----------
   작게: 초록 이름표 "♪ 찬송가" (소리 막대가 움직임) → 누르면 펼쳐짐
   크게: 재생/멈춤 · 곡 제목 · 다음 곡 · × 닫기 */
.hymn-bar{position:fixed; left:14px; bottom:16px; z-index:45; display:flex; align-items:center; gap:8px; max-width:min(380px, calc(100vw - 96px));
  padding:6px 6px 6px 6px; background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:999px; box-shadow:0 6px 22px rgba(30,38,34,.14);
  animation:nl-rise .5s var(--ease) both .6s}
.hb-tab{display:none}
.hb-play{flex:none; width:40px; height:40px; border-radius:50%; border:0; background:var(--green); color:#fff; font-size:13px; cursor:pointer; letter-spacing:-1px}
.hb-play:hover{background:var(--green-deep)}
.hb-text{display:flex; flex-direction:column; min-width:0; line-height:1.25; padding-right:2px}
.hb-text small{font-size:11px; color:var(--ink-soft); letter-spacing:.02em}
.hb-title{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hb-next, .hb-close{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink-soft); font-size:13px; cursor:pointer; line-height:1}
.hb-close{font-size:20px; border-color:transparent; background:var(--paper)}
.hb-next:hover, .hb-close:hover{border-color:var(--green); color:var(--green)}

/* 작게 접힌 모양: 초록 이름표 하나만 */
.hymn-bar.mini{padding:0; gap:0; border:0; background:var(--green); box-shadow:0 4px 14px rgba(31,51,39,.28)}
.hymn-bar.mini > :not(.hb-tab){display:none}
.hymn-bar.mini .hb-tab{display:flex; align-items:center; gap:7px; height:38px; padding:0 14px 0 12px; border:0; background:none; color:#fff; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; border-radius:999px}
.hymn-bar.mini .hb-tab:hover{background:rgba(255,255,255,.08)}
/* 소리 막대 3개: 노래가 나오면 춤추듯, 멈추면 가만히 */
.hb-eq{display:inline-flex; align-items:flex-end; gap:2px; height:13px}
.hb-eq i{display:block; width:3px; height:5px; background:#fff; border-radius:2px; opacity:.9}
.hb-eq i:nth-child(2){height:9px}
.hb-eq i:nth-child(3){height:6px}
@media (prefers-reduced-motion: no-preference){
  .hymn-bar.on .hb-eq i{animation:nl-eqbar .9s ease-in-out infinite alternate}
  .hymn-bar.on .hb-eq i:nth-child(2){animation-duration:.7s; animation-delay:-.3s}
  .hymn-bar.on .hb-eq i:nth-child(3){animation-duration:1.1s; animation-delay:-.6s}
  /* 접힐 때 "여기 있어요" 하고 잠깐 반짝 */
  .hymn-bar.found{animation:nl-found 1.4s ease-out 2}
  /* 아직 시작 전(화면을 누르면 시작): 은은하게 숨 쉬기 */
  .hymn-bar.mini.waiting{animation:nl-breathe 2.4s ease-in-out infinite}
  .hymn-bar:not(.mini){animation:nl-rise .3s var(--ease) both}
}
@keyframes nl-eqbar{from{height:3px} to{height:13px}}
@keyframes nl-found{0%{box-shadow:0 0 0 0 rgba(44,70,54,.45), 0 4px 14px rgba(31,51,39,.28)} 100%{box-shadow:0 0 0 14px rgba(44,70,54,0), 0 4px 14px rgba(31,51,39,.28)}}
@keyframes nl-breathe{50%{transform:scale(1.06)}}
@media (max-width: 600px){
  .hymn-bar{left:10px; bottom:12px; max-width:calc(100vw - 88px)}
  .hb-title{font-size:13.5px}
}
@media print{ .hymn-bar{display:none} }
/* 교회 이름 금빛: 배경이 아니라 글자 안에서만 빛이 지나가도록 (글자 모양으로 오려 낸 그라데이션) */
.hero h1.lux::after{content:none !important; display:none !important}
@media (prefers-reduced-motion: no-preference){
  .hero h1.lux:not(.lux-in){
    background-image:linear-gradient(100deg, var(--ink) 0%, var(--ink) 42%, #b98a3e 48%, #e2c27f 50%, #b98a3e 52%, var(--ink) 58%, var(--ink) 100%);
    background-size:300% 100%; background-position:100% 0;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:nl-glint-text 12s cubic-bezier(.45,0,.25,1) 1s infinite}
}
@keyframes nl-glint-text{0%{background-position:100% 0} 18%, 100%{background-position:0% 0}}