/* ===========================================================
   Masa Family — "경건한 가족 기념 화보" (liturgical keepsake)
   깊은 숲색 · 앤티크 골드 · 와인 포인트 · 종이 질감 · 인화지 액자
   =========================================================== */
:root{
  --bg:#efe7d6;
  --paper:#fcf8ee;
  --ink:#2b2620; --muted:#8a7e6a;
  --forest:#3f5341; --forest-d:#2c3a2e;
  --gold:#b8923f; --gold-2:#d8b75e; --gold-deep:#9a7830;
  --wine:#7a3b39;
  --line:#e3d8c1; --line-2:#d6c6a6;
  --shadow:0 12px 34px rgba(58,44,18,.16);
  --shadow-sm:0 3px 12px rgba(58,44,18,.10);
  --radius:14px;
  --serif:"Nanum Myeongjo",serif;
  --latin:"Cormorant Garamond",Georgia,serif;
  --sans:Pretendard,system-ui,"Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box} html,body{margin:0}
body{color:var(--ink);font-family:var(--sans);line-height:1.65;
  background:
    radial-gradient(120% 90% at 50% -25%, rgba(184,146,63,.10), transparent 55%),
    radial-gradient(140% 120% at 50% 0%, #f6eede 0%, #efe7d6 55%, #e6dbc4 100%);
  background-attachment:fixed;min-height:100dvh}
/* 한국어 가독성: 단어 안 끊고 줄 균형 */
h1,h2,h3,p,.verse,.trip,.brandtitle,.empty,.login-verse{word-break:keep-all;text-wrap:balance}
img,video{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* 버튼 */
.btn{border:0;border-radius:999px;padding:.78rem 1.5rem;background:var(--forest);color:#f6f1e4;
  font-weight:600;letter-spacing:.01em;box-shadow:0 4px 14px rgba(47,63,49,.25);transition:transform .15s,background .2s,box-shadow .2s}
.btn:hover{background:var(--forest-d);transform:translateY(-1px)}
.btn:active{transform:translateY(0)} .btn:disabled{opacity:.55;cursor:default;transform:none}
.btn-ghost{background:transparent;color:var(--forest);border:1px solid var(--line-2);box-shadow:none}
.btn-ghost:hover{background:rgba(63,83,65,.06)}

/* 금색 얇은 장식 罫선 */
.rule{height:1px;border:0;width:64px;margin:1rem auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ====================== 로그인 ====================== */
.login{min-height:100dvh;display:grid;place-items:center;padding:1.5rem;position:relative;overflow:hidden;
  background:
    radial-gradient(60% 45% at 50% 8%, rgba(216,183,94,.20), transparent 70%),
    radial-gradient(135% 100% at 50% -25%,#fbf4e2 0%,#f1e6cc 48%,#e6d6b4 100%)}
.login::after{content:"✝";position:absolute;top:5%;left:50%;transform:translateX(-50%);
  font-size:10rem;color:rgba(154,120,48,.12);pointer-events:none;line-height:1}
.login-card{position:relative;width:min(430px,100%);background:var(--paper);
  border-radius:20px;box-shadow:var(--shadow);padding:2.8rem 2.1rem 2.3rem;text-align:center;
  border:1px solid var(--line);outline:1px solid rgba(184,146,63,.35);outline-offset:-9px}
.login-card .cross{width:62px;height:62px;margin:0 auto .7rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.8rem;color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold-deep));
  box-shadow:0 6px 18px rgba(184,146,63,.45),inset 0 0 0 4px rgba(255,255,255,.18)}
.login-card h1{font-family:var(--serif);font-weight:800;margin:.4rem 0 .1rem;font-size:1.7rem;letter-spacing:.02em}
.login-card .sub{font-family:var(--latin);color:var(--gold-deep);margin:.1rem 0 1.1rem;
  font-size:1.02rem;letter-spacing:.18em;text-transform:uppercase}
.login-verse{font-family:var(--serif);color:#544d3a;font-size:1.04rem;line-height:1.75;
  margin:0 0 1.6rem;padding:1.1rem 1.1rem;background:linear-gradient(#fbf6ea,#f7efdc);
  border-radius:12px;border:1px solid var(--line-2)}
.login-verse span{display:block;margin-top:.5rem;color:var(--gold-deep);font-size:.82rem;
  font-family:var(--sans);letter-spacing:.04em}
.login-card input{width:100%;padding:.9rem 1rem;border:1px solid var(--line-2);border-radius:12px;
  font-size:1.05rem;text-align:center;margin-bottom:.9rem;background:#fffdf8;color:var(--ink)}
.login-card input:focus{outline:2px solid var(--gold-2);border-color:transparent}
.login-card .err{color:var(--wine);min-height:1.2em;font-size:.9rem;margin-bottom:.4rem}

/* ====================== 상단바 ====================== */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:center;
  gap:1rem;padding:.7rem 1.2rem;background:rgba(252,248,238,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-weight:800;font-size:1.05rem;letter-spacing:.03em}
.brand::before{content:"✝";color:var(--gold);margin-right:.45rem}
.topbar{justify-content:flex-start}
.topbar .spacer{flex:1}
.topbar-up{padding:.5rem 1.1rem;font-size:.9rem}

/* ====================== 성소 헤더 ====================== */
.banner{padding:0;text-align:center}
.sanctuary{position:relative;overflow:hidden;padding:2.8rem 1.2rem 2.4rem;
  background:
    radial-gradient(50% 60% at 50% -8%, rgba(122,59,57,.10), transparent 60%),
    radial-gradient(60% 70% at 50% -10%, rgba(216,183,94,.22), transparent 65%),
    linear-gradient(#fbf4e3,#f3e8cf);
  border-bottom:1px solid var(--line-2)}
.sanctuary::before{content:"✝";position:absolute;top:-1.8rem;left:50%;transform:translateX(-50%);
  font-size:14rem;line-height:1;color:rgba(154,120,48,.08);pointer-events:none}
.sanctuary .cross-mark{position:relative;display:inline-grid;place-items:center;width:50px;height:50px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold-deep));color:#fff;
  font-size:1.45rem;box-shadow:0 6px 16px rgba(184,146,63,.4),inset 0 0 0 4px rgba(255,255,255,.18);margin-bottom:.55rem}
.sanctuary .eyebrow{position:relative;display:block;font-family:var(--latin);color:var(--gold-deep);
  font-size:1rem;letter-spacing:.32em;text-transform:uppercase;margin:.2rem 0 .15rem}
.sanctuary .brandtitle{position:relative;font-family:var(--serif);font-weight:800;font-size:2.1rem;
  margin:.05rem 0 .7rem;letter-spacing:.02em}
.sanctuary .trip{position:relative;display:inline-block;color:var(--forest-d);font-weight:600;letter-spacing:.01em;
  border:1px solid var(--line-2);background:rgba(255,253,248,.66);border-radius:999px;padding:.42rem 1.1rem;font-size:.86rem}
.verse{position:relative;max-width:640px;margin:1.4rem auto 0;font-family:var(--serif);font-style:italic;
  font-size:1.32rem;line-height:1.8;color:#403925}
.verse::before{content:"";display:block;width:50px;height:1px;margin:0 auto 1.1rem;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.verse .ref{display:block;font-style:normal;color:var(--gold-deep);font-size:.92rem;margin-top:.6rem;
  font-family:var(--sans);font-weight:600;letter-spacing:.04em}

/* ====================== 탭 ====================== */
.tabs{display:flex;gap:.5rem;justify-content:center;margin:1.4rem auto 1.1rem;flex-wrap:wrap}
.tab{border:1px solid var(--line-2);background:var(--paper);color:var(--muted);border-radius:999px;
  padding:.5rem 1.3rem;font-size:.95rem;font-weight:600;transition:all .18s}
.tab[aria-selected="true"]{background:var(--forest);color:#f6f1e4;border-color:var(--forest);
  box-shadow:0 4px 12px rgba(47,63,49,.25)}

/* ====================== 사진 그리드 (인화지 액자) ====================== */
.grid{columns:5 230px;column-gap:16px;padding:0 1.4rem 6rem;max-width:1500px;margin:0 auto}
.cell{break-inside:avoid;margin:0 0 16px;position:relative;background:var(--paper);
  padding:9px 9px 11px;border-radius:8px;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  cursor:zoom-in;transition:transform .25s ease,box-shadow .25s ease}
.cell:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:var(--shadow)}
.cell img{width:100%;height:auto;display:block;border-radius:3px;background:var(--line)}
.cell .badge{position:absolute;left:15px;bottom:17px;font-size:.7rem;color:#3a2f12;font-weight:600;
  background:linear-gradient(#f3e2b4,#e7cd86);border:1px solid rgba(154,120,48,.4);
  padding:.16rem .55rem;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.cell .vbadge{position:absolute;top:16px;right:16px;background:rgba(43,38,32,.78);color:#fff;
  border-radius:999px;font-size:.7rem;padding:.18rem .55rem;backdrop-filter:blur(2px)}
.empty{text-align:center;color:var(--muted);padding:3.5rem 1.2rem;font-size:1.02rem;line-height:1.8}

/* ====================== 라이트박스 ====================== */
.lb{position:fixed;inset:0;z-index:50;background:rgba(28,23,16,.95);display:grid;
  grid-template-rows:auto 1fr auto;opacity:0;pointer-events:none;transition:opacity .2s}
.lb.open{opacity:1;pointer-events:auto}
.lb-bar{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;color:#efe6d2}
.lb-bar #lbcap{font-family:var(--serif);font-size:1rem}
.lb-actions{display:flex;align-items:center;gap:.6rem}
.lb-act{background:linear-gradient(#e6cd86,var(--gold));color:#3a2f10;border:0;border-radius:999px;
  padding:.5rem 1.1rem;font-weight:700;font-size:.9rem;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.lb-act:disabled{opacity:.6}
.lb-bar .x{background:transparent;border:0;color:#efe6d2;font-size:1.6rem;line-height:1}
.lb-stage{display:grid;place-items:center;overflow:hidden;padding:0 .5rem}
.lb-stage img{max-height:82dvh;max-width:96vw;border-radius:6px;transition:transform .2s;cursor:grab;
  touch-action:none;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-stage video{max-height:82dvh;max-width:96vw;border-radius:6px;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;
  border:0;border-radius:999px;width:50px;height:50px;font-size:1.5rem;transition:background .2s}
.lb-nav:hover{background:rgba(184,146,63,.7)}
.lb-nav.prev{left:12px}.lb-nav.next{right:12px}
.lb-foot{display:flex;gap:.6rem;justify-content:center;padding:1rem}

/* ====================== 음악 플레이어 ====================== */
.player{position:fixed;right:14px;bottom:14px;z-index:30;display:flex;align-items:center;gap:.55rem;
  background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:.45rem .8rem;box-shadow:var(--shadow)}
.player.hidden{display:none}
.player button{border:0;background:transparent;font-size:1.15rem;color:var(--forest)}
.player .title{font-size:.8rem;color:var(--muted);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player input[type=range]{accent-color:var(--gold)}
/* 볼륨 안내 — 화면 중앙에서 5번 깜빡이고 사라짐 */
@keyframes volblink{0%,100%{opacity:1}50%{opacity:.1}}
.vol-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:70;
  background:linear-gradient(#f3e2b4,#e7cd86);color:#3a2f12;border:1px solid rgba(154,120,48,.55);
  padding:1rem 1.6rem;border-radius:16px;font-size:1.15rem;font-weight:800;text-align:center;
  box-shadow:0 14px 40px rgba(40,30,10,.3);pointer-events:none;white-space:nowrap;
  animation:volblink .55s ease-in-out 3 both}

/* ====================== 업로드 ====================== */
.up-fab{position:fixed;left:14px;bottom:14px;z-index:30;box-shadow:0 6px 18px rgba(47,63,49,.3)}
.up-modal{position:fixed;inset:0;z-index:60;background:rgba(28,23,16,.62);display:none;place-items:center;padding:1rem}
.up-modal.open{display:grid}
.up-card{width:min(460px,100%);background:var(--paper);border-radius:18px;box-shadow:var(--shadow);
  padding:1.6rem 1.5rem;max-height:90dvh;overflow:auto;border:1px solid var(--line);outline:1px solid rgba(184,146,63,.3);outline-offset:-8px}
.up-card h3{font-family:var(--serif);margin:.1rem 0 1rem;font-size:1.3rem}
.up-card label{display:block;margin:.7rem 0 .25rem;font-size:.9rem;color:var(--muted)}
.up-card input[type=text],.up-card input[type=file]{width:100%;padding:.65rem;border:1px solid var(--line-2);border-radius:10px;background:#fffdf8}
.up-row{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.1rem}
.up-prog{margin-top:.9rem;font-size:.85rem;color:var(--forest)}
.up-prog .bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:.35rem}
.up-prog .bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold));width:0;transition:width .2s}

/* ====================== 관리자 ====================== */
.admin{max-width:560px;margin:0 auto;padding:1.6rem 1.2rem}
.admin h2{font-family:var(--serif);font-size:1.4rem}
.admin .field{display:block;margin:.9rem 0}
.admin input{width:100%;padding:.75rem;border:1px solid var(--line-2);border-radius:10px;background:#fffdf8}
.admin .msg{min-height:1.3em;color:var(--forest)}

/* ====================== 모바일 ====================== */
@media (max-width:640px){
  .grid{columns:2 160px;column-gap:11px;padding:0 .8rem 6rem}
  .cell{padding:6px 6px 8px;margin-bottom:11px}
  .cell .badge{left:11px;bottom:13px;font-size:.62rem}
  .sanctuary{padding:2.2rem 1rem 2rem}
  .sanctuary .brandtitle{font-size:1.75rem}
  .sanctuary .eyebrow{font-size:.85rem;letter-spacing:.26em}
  .sanctuary .cross-mark{width:54px;height:54px;font-size:1.55rem}
  .verse{font-size:1.2rem;line-height:1.75;max-width:24rem}
  .tab{padding:.55rem 1.4rem;font-size:1rem}
  .lb-foot .btn{font-size:1.05rem;padding:.85rem 1.7rem}
}