/* ============================================================
   봉인 기록 #001 - 스타일 (배경이미지 적용판)
   기존 style.css를 이 내용으로 통째로 덮어쓰기.
   index.php와 같은 폴더에 sealed_bg.png 있어야 함.
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --panel:rgba(20,20,23,0.78);
  --panel2:rgba(26,26,31,0.78);
  --line:rgba(60,60,68,0.6);
  --txt:#c8c8cc;
  --txt-dim:#8a8a92;
  --red:#c0392b;
  --red-bright:#e74c3c;
}
body{
  color:var(--txt);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  line-height:1.9;
  font-size:15px;
  position:relative;
  min-height:100vh;
  background:
    linear-gradient(rgba(8,8,10,0.80), rgba(8,8,10,0.88)),
    url('sealed_bg.png') center center / cover no-repeat fixed;
  background-color:#0a0a0c;
}
.bg-noise{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(192,57,43,0.07), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.02), transparent 50%);
}
.layout{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:220px 1fr 300px;
  gap:0;
  max-width:1280px; margin:0 auto;
  min-height:100vh;
}
.sidebar{
  background:var(--panel);
  backdrop-filter:blur(3px);
  border-right:1px solid var(--line);
  padding:28px 22px;
  display:flex; flex-direction:column;
}
.nav-close{ display:none; }
.brand{ margin-bottom:34px; }
.brand-title,.brand-title2{ font-weight:700; letter-spacing:3px; font-size:17px; color:#e8e8ea; }
.brand-sub{ font-size:11px; color:var(--red); letter-spacing:2px; margin-top:6px; }
.menu{ display:flex; flex-direction:column; gap:4px; }
.menu a{ color:var(--txt-dim); text-decoration:none; font-size:13px; padding:10px 12px; border-radius:6px; transition:.15s; }
.menu a:hover{ background:var(--panel2); color:var(--txt); }
.menu a.active{ background:rgba(192,57,43,0.14); color:var(--red-bright); }
.door-img{
  margin:28px 0; height:130px; border-radius:6px;
  background:linear-gradient(180deg,rgba(22,22,24,0.6),rgba(13,13,15,0.6));
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.door-img:after{
  content:"RECORD ONLY FOR THE 100TH OBSERVER";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:9px; letter-spacing:1px; color:#4a4a50; padding:0 20px;
}
.warn-box{ background:rgba(192,57,43,0.08); border:1px solid rgba(192,57,43,0.22); border-radius:6px; padding:14px; margin-top:auto; }
.warn-title{ color:var(--red-bright); font-weight:700; font-size:13px; margin-bottom:8px; }
.warn-box p{ font-size:11px; color:var(--txt-dim); line-height:1.7; }
.copyright{ font-size:10px; color:#55555c; margin-top:20px; line-height:1.6; }

.content{ padding:48px 44px; }
.record-head{ text-align:center; margin-bottom:30px; }
.record-head h1{
  font-size:38px; font-weight:700; letter-spacing:8px; color:#ececee;
  position:relative; display:inline-block; padding:0 30px; text-shadow:0 2px 20px rgba(0,0,0,0.8);
}
.record-head h1:before,.record-head h1:after{ content:""; position:absolute; top:50%; width:24px; height:1px; background:var(--line); }
.record-head h1:before{ left:-10px; } .record-head h1:after{ right:-10px; }
.record-sub{ font-size:13px; color:var(--txt-dim); letter-spacing:4px; margin-top:10px; }
.lead{ text-align:center; font-size:15px; color:var(--txt); margin:24px 0 16px; }
.hl{ color:var(--red-bright); font-weight:600; }
.lock-line{ text-align:center; font-size:12px; color:var(--txt-dim); margin-bottom:30px; }

.record-body{
  max-width:640px; margin:0 auto;
  background:rgba(10,10,12,0.55); backdrop-filter:blur(2px);
  padding:30px 34px; border-radius:8px; border:1px solid var(--line);
}
.record-body p{ margin:18px 0; color:#bcbcc2; }
.dots{ text-align:center; color:#55555c !important; letter-spacing:4px; }
.file-name{
  display:inline-block; background:rgba(28,28,32,0.9); border:1px solid var(--line);
  color:var(--red-bright); font-family:monospace; padding:8px 16px; border-radius:4px; margin:6px 0; font-size:14px;
}
.quote-red{
  border-left:3px solid var(--red); background:rgba(192,57,43,0.08);
  color:var(--red-bright); padding:12px 18px; margin:18px 0; font-style:italic; border-radius:0 4px 4px 0;
}
.sealed-foot{ text-align:center; margin:40px auto; max-width:560px; }
.lock-big{ font-size:15px; color:var(--txt); margin-bottom:12px; }
.sealed-foot p{ font-size:13px; color:var(--txt-dim); }

.reveal-banner{ text-align:center; color:var(--red-bright); font-weight:700; letter-spacing:2px; margin:10px 0 24px; font-size:15px; }
.record-body.reveal p{ color:#c8c8ce; }
.share-cmd{ color:var(--red-bright) !important; font-weight:700; font-size:17px !important; text-align:center; }
.reveal-share{
  max-width:560px; margin:36px auto 0; text-align:center;
  background:rgba(192,57,43,0.08); border:1px solid rgba(192,57,43,0.28); border-radius:8px; padding:24px;
}
.share-title{ color:var(--red-bright); font-weight:700; margin-bottom:16px; }
.share-btn{ background:var(--red); color:#fff; border:none; padding:14px 28px; border-radius:6px; font-size:15px; cursor:pointer; font-weight:600; transition:.15s; }
.share-btn:hover{ background:var(--red-bright); }
.share-note{ font-size:11px; color:var(--txt-dim); margin-top:12px; }

.passed-body{ text-align:center; max-width:520px; margin:30px auto; }
.passed-mark{ color:var(--txt-dim); letter-spacing:6px; font-size:13px; margin-bottom:24px; }
.passed-body p{ margin:18px 0; color:#a0a0a6; }
.passed-fade{ color:#55555c !important; }
.passed-comments{ max-width:480px; margin:30px auto; border-top:1px solid var(--line); padding-top:20px; }
.cmt{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px 14px; margin:8px 0; font-size:13px; color:var(--txt-dim); }
.scroll-hint{ text-align:center; color:#55555c; font-size:12px; margin-top:40px; }

.rightpanel{ padding:36px 24px; display:flex; flex-direction:column; gap:18px; }
.panel-box{ background:var(--panel); backdrop-filter:blur(3px); border:1px solid var(--line); border-radius:8px; padding:18px; }
.panel-title{ font-size:14px; font-weight:700; color:#e0e0e4; margin-bottom:4px; }
.panel-sub{ font-size:11px; color:var(--txt-dim); margin-bottom:14px; }
.panel-sub.center{ text-align:center; margin:14px 0 0; }
.gauge{
  --pct:0; width:120px; height:120px; margin:6px auto; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(closest-side, rgba(20,20,23,0.95) 79%, transparent 80% 100%),
    conic-gradient(var(--red-bright) calc(var(--pct)*1%), rgba(42,42,48,0.8) 0);
}
.gauge-num{ font-size:36px; font-weight:700; color:var(--red-bright); line-height:1; }
.gauge-den{ font-size:13px; color:var(--txt-dim); }
.panel-note{ background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:12px; text-align:center; font-size:12px; color:var(--txt-dim); margin-top:14px; }
.rule{ display:flex; gap:10px; align-items:flex-start; margin:14px 0; }
.rule-ico{ font-size:16px; }
.rule b{ color:var(--txt); font-size:12px; }
.rule small{ color:var(--txt-dim); font-size:11px; }
.panel-p{ font-size:12px; color:var(--txt-dim); margin:8px 0; }
.panel-p.hl{ color:var(--red-bright); font-weight:600; }

.m-header{ display:none; }

@media (max-width:1000px){
  .layout{ grid-template-columns:1fr; }
  .m-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--line);
    background:var(--panel); backdrop-filter:blur(4px); position:sticky; top:0; z-index:20;
  }
  .m-brand .brand-title{ font-size:14px; letter-spacing:2px; }
  .m-brand .brand-sub{ font-size:10px; color:var(--red); }
  .nav-toggle{ background:none; border:none; color:var(--txt); font-size:22px; cursor:pointer; }
  .sidebar{
    position:fixed; top:0; right:-100%; width:80%; max-width:320px; height:100%;
    z-index:50; transition:right .25s; border-left:1px solid var(--line); border-right:none;
    background:rgba(20,20,23,0.96);
  }
  .sidebar.open{ right:0; }
  .nav-close{ display:block; position:absolute; top:16px; right:18px; background:none; border:none; color:var(--txt); font-size:26px; cursor:pointer; }
  .content{ padding:30px 20px; }
  .record-head h1{ font-size:28px; letter-spacing:4px; }
  .record-body{ padding:22px 20px; }
  .rightpanel{ padding:20px; }
}

/* ============================================================
   탭 시스템 (메뉴 작동용) - 추가분
   ============================================================ */
.tab{ display:none; }
.tab.active{ display:block; }

.tab-title{
  font-size:22px; font-weight:700; color:#e8e8ea; letter-spacing:2px;
  text-align:center; margin-bottom:10px; text-shadow:0 2px 14px rgba(0,0,0,0.7);
}
.tab-desc{ text-align:center; color:var(--txt-dim); font-size:13px; margin-bottom:28px; line-height:1.7; }

/* 기록 보관소 */
.archive-item{
  display:flex; align-items:center; gap:16px;
  max-width:600px; margin:12px auto;
  background:rgba(20,20,23,0.7); backdrop-filter:blur(3px);
  border:1px solid var(--line); border-radius:8px; padding:16px 20px;
}
.archive-item.locked{ opacity:0.55; }
.archive-no{ font-family:monospace; font-size:20px; font-weight:700; color:var(--red-bright); min-width:50px; }
.archive-item.locked .archive-no{ color:var(--txt-dim); }
.archive-info{ flex:1; }
.archive-name{ font-size:14px; color:var(--txt); margin-bottom:4px; }
.archive-stat{ font-size:12px; color:var(--txt-dim); }
.archive-btn{
  font-size:12px; padding:8px 16px; border-radius:6px; text-decoration:none;
  background:var(--red); color:#fff; transition:.15s; cursor:pointer;
}
.archive-btn:hover{ background:var(--red-bright); }
.archive-btn.disabled{ background:rgba(60,60,68,0.5); color:var(--txt-dim); cursor:not-allowed; }

/* 이야기 규칙 */
.rule-card{
  display:flex; gap:16px; align-items:flex-start;
  max-width:600px; margin:14px auto;
  background:rgba(20,20,23,0.7); backdrop-filter:blur(3px);
  border:1px solid var(--line); border-radius:8px; padding:18px 22px;
}
.rule-card-ico{ font-size:24px; line-height:1; }
.rule-card b{ color:var(--txt); font-size:14px; display:block; margin-bottom:6px; }
.rule-card small{ color:var(--txt-dim); font-size:12px; line-height:1.7; }

/* 공유하기 */
.share-box{
  max-width:480px; margin:0 auto; text-align:center;
  background:rgba(192,57,43,0.07); border:1px solid rgba(192,57,43,0.25);
  border-radius:10px; padding:28px 24px;
}
.share-url{
  background:rgba(10,10,12,0.7); border:1px solid var(--line); border-radius:6px;
  padding:12px; font-family:monospace; font-size:13px; color:var(--txt); margin-bottom:18px;
  word-break:break-all;
}
.share-box .share-btn{ margin:6px; }
.share-btn.outline{ background:transparent; border:1px solid var(--red); color:var(--red-bright); }
.share-btn.outline:hover{ background:rgba(192,57,43,0.15); }
.share-current{ text-align:center; color:var(--txt-dim); font-size:13px; margin-top:20px; }
.share-current b{ color:var(--red-bright); font-size:16px; }

/* 이야기의 목적 */
.purpose-body{
  max-width:560px; margin:0 auto; text-align:center;
  background:rgba(10,10,12,0.5); backdrop-filter:blur(2px);
  border:1px solid var(--line); border-radius:10px; padding:36px 30px;
}
.purpose-body p{ margin:18px 0; color:#bcbcc2; line-height:1.9; }
.purpose-body .hl{ color:var(--red-bright); font-weight:700; font-size:17px; }
.purpose-small{ color:var(--txt-dim) !important; font-size:12px !important; letter-spacing:2px; margin-top:30px !important; }

/* SNS 공유 버튼 */
.share-sns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.sns-btn{
  flex:1; min-width:90px; text-decoration:none; text-align:center;
  padding:11px 8px; border-radius:6px; font-size:13px; font-weight:600;
  color:#fff; transition:.15s; border:1px solid transparent;
}
.sns-btn:hover{ opacity:0.85; }
.sns-x{ background:#1a1a1a; border-color:#333; }
.sns-fb{ background:#1877f2; }
.sns-band{ background:#03c75a; }

/* 댓글 (관측 기록) */
.cmt-head{ text-align:center; color:var(--txt); font-size:14px; margin-bottom:18px; font-weight:600; }
.cmt-head span{ color:var(--red-bright); }
.cmt-form{
  max-width:480px; margin:0 auto 24px;
  background:rgba(20,20,23,0.7); border:1px solid var(--line); border-radius:8px; padding:16px;
}
.cmt-form input, .cmt-form textarea{
  width:100%; background:rgba(10,10,12,0.7); border:1px solid var(--line); border-radius:5px;
  color:var(--txt); padding:10px 12px; font-size:13px; margin-bottom:8px; font-family:inherit; resize:vertical;
}
.cmt-form input{ height:40px; }
.cmt-form textarea{ min-height:60px; }
.cmt-form input::placeholder, .cmt-form textarea::placeholder{ color:#55555c; }
.cmt-submit{
  width:100%; background:var(--red); color:#fff; border:none; padding:11px; border-radius:5px;
  font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.cmt-submit:hover{ background:var(--red-bright); }
.cmt-list{ max-width:480px; margin:0 auto; }
.cmt{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:10px 14px; margin:8px 0; font-size:13px; color:var(--txt-dim);
}
.cmt.seed{ opacity:0.6; }
.cmt-nick{ color:var(--txt); font-weight:600; font-size:12px; }
.cmt-time{ color:#55555c; font-size:11px; margin-left:8px; }
.cmt-body{ color:#bcbcc2; margin-top:4px; line-height:1.6; }

/* ============================================================
   2편 - 투표(합의) + 1편 연결 배너
   ============================================================ */
/* 1편 passed → 2편 연결 */
.next-record{
  max-width:480px; margin:30px auto 0; text-align:center;
  background:rgba(192,57,43,0.08); border:1px solid rgba(192,57,43,0.3);
  border-radius:10px; padding:24px;
}
.next-label{ color:var(--txt-dim); font-size:12px; letter-spacing:2px; margin-bottom:14px; }
.next-btn{
  display:inline-block; background:var(--red); color:#fff; text-decoration:none;
  padding:14px 28px; border-radius:6px; font-size:15px; font-weight:700; transition:.15s;
}
.next-btn:hover{ background:var(--red-bright); }
.next-note{ color:var(--txt-dim); font-size:11px; margin-top:14px; }

/* 2편 메뉴 */
.menu-link2{ color:var(--txt-dim); text-decoration:none; font-size:13px; padding:10px 12px; border-radius:6px; display:block; transition:.15s; }
.menu-link2:hover{ background:var(--panel2); color:var(--txt); }
.menu-link2.active{ background:rgba(192,57,43,0.14); color:var(--red-bright); }

/* 투표창 */
.vote-box{
  max-width:560px; margin:30px auto; text-align:center;
  background:rgba(10,10,12,0.6); backdrop-filter:blur(3px);
  border:1px solid rgba(192,57,43,0.25); border-radius:10px; padding:28px 26px;
}
.vote-q-label{ color:var(--txt-dim); font-size:12px; letter-spacing:2px; margin-bottom:10px; }
.vote-q{ color:#ececee; font-size:22px; font-weight:700; margin-bottom:24px; }
.vote-options{ display:flex; gap:12px; }
.vote-opt{
  flex:1; padding:18px; border-radius:8px; border:1px solid var(--line);
  background:rgba(20,20,23,0.8); color:var(--txt); font-size:15px; font-weight:600; cursor:pointer; transition:.15s;
}
.vote-opt:hover{ border-color:var(--red); color:#fff; background:rgba(192,57,43,0.15); }
.vote-opt.no:hover{ border-color:#555; background:rgba(60,60,68,0.3); }
.vote-after{ margin-top:10px; }
.vote-done{ color:var(--red-bright); font-weight:600; margin-bottom:18px; }
.vote-bars{ margin:14px 0; }
.vbar{ display:flex; align-items:center; gap:10px; margin:10px 0; font-size:12px; color:var(--txt-dim); }
.vbar span{ width:90px; text-align:right; flex-shrink:0; }
.vbar b{ width:42px; text-align:left; color:var(--txt); flex-shrink:0; }
.vbar-track{ flex:1; height:10px; background:rgba(42,42,48,0.8); border-radius:5px; overflow:hidden; }
.vbar-fill{ height:100%; border-radius:5px; transition:width .8s; }
.vbar-fill.yes{ background:var(--red-bright); }
.vbar-fill.no{ background:#555; }
.vote-meta{ color:var(--txt-dim); font-size:12px; margin-top:18px; line-height:1.8; }
.vote-meta b{ color:var(--red-bright); }
.vote-timer{ margin-top:16px; color:var(--txt); font-size:14px; }
.vote-timer span{ color:var(--red-bright); font-weight:700; font-family:monospace; font-size:18px; }

/* 문의 이메일 */
.contact-mail{ display:inline-block; margin-top:8px; color:var(--red-bright); text-decoration:none; font-size:11px; }
.contact-mail:hover{ text-decoration:underline; }

/* 관리자 프리뷰 버튼 (본인 IP에서만 노출) */
.admin-preview{
  margin-top:18px; padding:12px; border-radius:8px;
  background:rgba(241,196,15,0.06); border:1px dashed rgba(241,196,15,0.4);
}
.admin-label{ font-size:10px; color:#f1c40f; letter-spacing:1px; margin-bottom:8px; font-weight:700; }
.admin-preview a{
  display:block; font-size:11px; color:var(--txt-dim); text-decoration:none;
  padding:6px 8px; border-radius:4px; margin:2px 0; transition:.15s;
}
.admin-preview a:hover{ background:rgba(241,196,15,0.12); color:#f1c40f; }
.admin-preview a.admin-normal{ color:var(--red-bright); margin-top:6px; border-top:1px solid var(--line); padding-top:8px; }

/* 관리자 플로팅 패널 (화면 하단 고정, 본인 IP만) */
.admin-float{
  position:fixed; left:16px; bottom:16px; z-index:9999; width:180px;
  background:rgba(20,18,10,0.95); border:1px solid rgba(241,196,15,0.45);
  border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.6); backdrop-filter:blur(6px);
  font-family:'Pretendard','Malgun Gothic',sans-serif; overflow:hidden;
}
.admin-float-head{
  padding:9px 12px; font-size:11px; font-weight:700; color:#f1c40f; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; letter-spacing:1px;
  background:rgba(241,196,15,0.08);
}
.af-toggle{ transition:transform .2s; }
.admin-float.collapsed .admin-float-body{ display:none; }
.admin-float.collapsed .af-toggle{ transform:rotate(-90deg); }
.admin-float-body{ padding:6px; }
.admin-float-body a{
  display:block; font-size:11px; color:var(--txt-dim); text-decoration:none;
  padding:7px 10px; border-radius:5px; margin:2px 0; transition:.15s;
}
.admin-float-body a:hover{ background:rgba(241,196,15,0.14); color:#f1c40f; }
.admin-float-body a.admin-normal{ color:var(--red-bright); margin-top:4px; border-top:1px solid var(--line); padding-top:8px; }
@media (max-width:1000px){
  .admin-float{ left:auto; right:12px; bottom:12px; width:150px; }
}

/* ============================================================
   3편 - 시간 조건
   ============================================================ */
.time-status{
  max-width:420px; margin:24px auto;
  background:rgba(10,10,12,0.65); border:1px solid var(--line); border-radius:10px;
  padding:24px; text-align:center;
}
.ts-label{ color:var(--txt-dim); font-size:11px; letter-spacing:2px; margin-bottom:8px; }
.ts-now{ font-family:'Courier New',monospace; font-size:48px; font-weight:700; color:var(--red-bright); letter-spacing:4px; line-height:1; }
.ts-now.big{ font-size:64px; margin:30px 0; text-align:center; text-shadow:0 0 20px rgba(231,76,60,0.5); }
.ts-tz{ color:var(--txt-dim); font-size:11px; margin-top:6px; }
.ts-state{ color:var(--txt-dim); margin:14px 0 8px; font-size:13px; }
.ts-countdown{ color:var(--txt); font-size:13px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.ts-countdown span{ color:var(--red-bright); font-family:monospace; font-weight:700; font-size:16px; }
.ts-mini{ text-align:center; margin:10px 0; }
.ts-mini-label{ font-size:11px; color:var(--txt-dim); }
.ts-mini-time{ font-family:monospace; font-size:18px; color:var(--red-bright); font-weight:700; margin-top:4px; }

/* 공개 화면 깜빡 효과 */
.reveal-flash{ animation:revealIn .6s ease-out; }
@keyframes revealIn{
  0%{ opacity:0; filter:blur(8px); }
  20%{ opacity:0.3; }
  30%{ opacity:0; }
  50%{ opacity:0.8; filter:blur(2px); }
  60%{ opacity:0.2; }
  100%{ opacity:1; filter:blur(0); }
}

.af-group{ font-size:9px; color:#f1c40f; letter-spacing:1px; margin:8px 8px 2px; opacity:0.7; font-weight:700; }
.af-group:first-child{ margin-top:2px; }