/* ==============================
   0) 기본
============================== */
@charset "utf-8";
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

@font-face{
  font-family:'Paperlogy-4Regular';
  src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
}

:root{
  --modal-w:1100px;
  --modal-h:629px;
  --gap:10px;
  --card-bg:#f7f1ef;

  /* 확대 제어 */
  --item-scale: 1.03;    /* 카드 전체 확대 */
  --overlay-scale: 1.05; /* 오버레이(이름/한마디) 확대 */
}

*{ box-sizing:border-box }
::-webkit-scrollbar{ display:none }

@media (max-width:768px){
  .gallery-board{ gap:var(--gap) !important }
  .pic-header{ display:none !important }
  .gallery-item{ width:150px !important; height:210px !important }
}

/* ==============================
   1) 리스트(갤러리)
============================== */
.gallery-board{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); max-width:1200px; margin: 0 auto; }
.gallery-grid{ display:flex; flex-direction:column }
.pic-header{ display:flex; gap:5px; align-items:center; justify-content:space-between }
.list-option{ display:flex; flex:1; gap:5px; margin-bottom:3px; opacity:.2; transition:opacity .2s }
.list-option:hover{ opacity:1 }
.gall_chk{ z-index:10 }

.gallery-item{
  position:relative; overflow:hidden; cursor:pointer;
  background:#eeeeee17; transition:transform .3s; transform-origin:center;
}
/* 카드 전체 확대 */
.gallery-item:hover{ transform:scale(var(--item-scale)) }

/* 카테고리/상단 버튼 */
.ico-category{ background:#000; color:#fff; border-radius:10px; padding:0 5px }
.simple-category{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:20px; justify-content:center }
.simple-category li{ background:#fff; color:#444; border-radius:10px; padding:4px 6px; border:1px inset #333; transition:background .2s; white-space:nowrap; text-align:center }
.simple-category li:hover{ background:#dcbfbe; color:#444 }
.simple-category li.selected{ background:#ae5d5c }
.simple-category li.selected a{ color:#fff !important }

#bo_btn_top{ margin:10px 0 }
#bo_btn_top:after,.bo_fx:after,#bo_sch:after{ content:""; display:block; visibility:hidden; clear:both }
.bo_fx{ margin-bottom:5px; float:right }
.bo_fx ul,.btn_bo_user,.btn_bo_adm{ margin:0; padding:0; list-style:none }
.btn_bo_user{ float:right }
.btn_bo_user li{ float:left; margin-left:5px }
.btn_bo_adm{ float:left }
.btn_bo_adm li{ float:left; margin-right:5px }
.btn_bo_adm input{ padding:0 8px; border:0; text-decoration:none; vertical-align:middle }
#bo_btn_top .btn_bo_user{ display:block !important }
#bo_btn_top .btn_bo_user a.ui-btn,#bo_btn_top .btn_bo_user a.point{
  display:inline-block !important; background:#fff !important; color:#222 !important;
  border:1px solid rgba(0,0,0,.15) !important; border-radius:10px !important;
  padding:6px 14px !important; text-decoration:none !important; font-weight:600 !important; line-height:1.2 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.06) !important; vertical-align:middle
}
#bo_btn_top .btn_bo_user a.ui-btn:hover,#bo_btn_top .btn_bo_user a.point:hover{
  background:#f5f5f5 !important; box-shadow:0 2px 6px rgba(0,0,0,.10) !important
}

/* 검색/공지 최소치 */
#bo_sch legend{ position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden }
#bo_sch select{ border:0; height:28px; float:left }
#bo_sch .sch_input{ height:28px; border:0; padding:0 10px; float:left }
#bo_sch .sch_btn{ float:left; margin-top:-1px }
.pg_wrap{ clear:both }
#bo_gall li.empty_list{ padding:85px 0; text-align:center }
#bo_gall li.gall_li.bo_notice .gall_name,#bo_gall li.gall_li.bo_notice .gall_date{ display:none }
#bo_gall li.gall_li.bo_notice,#bo_gall li.gall_li.bo_notice .gall_box,#bo_gall li.gall_li.bo_notice .gall_con{ display:block; width:100%; clear:both }
#bo_gall li.gall_li.bo_notice .bo_tit{ padding:10px; height:auto }
#bo_gall li.gall_li.bo_notice .gall_chk{ left:auto; right:0; top:0; bottom:0 }
#bo_gall li.gall_li.bo_notice .gall_box{ opacity:1 }
#bo_gall .bo_notice .notice_icon{ display:inline-block; width:20px; height:20px; line-height:18px; margin-right:5px; font-style:normal; text-align:center; font-weight:bold }

/* ==============================
   2) LP 썸네일 (정리본: 단일 출처)
   - 하단 패치(7.4 동작) 모두 흡수
   - 중복 셀렉터/규칙 제거
============================== */
.lp-thumb-wrapper{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:10px }
.lp-thumb-wrapper img{ position:absolute; left:0; right:0; display:block; width:100%; height:auto }

/* 뒷판(Backplate) */
.lp-thumb-wrapper .lp-backplate{
  top:0; left:0; width:100%; height:100%;
  z-index:1;
  object-fit:cover;
  border-radius:10px;
  backdrop-filter:blur(2px);
  transform:translateY(16%);
  transition:transform .45s ease; will-change:transform;
}
/* 호버 시 뒷판 상승 */
.gallery-item:hover .lp-backplate{ transform:translateY(0) }

/* 썸네일(앞판 위, 마스크 포함) */
.lp-thumb-wrapper .lp-thumb-image{
  top:15%; left:0; width:100%; height:100%;
  object-fit:cover;
  z-index:5;

  /* 마스크: 7.4 기준 스케일/포지션 */
  -webkit-mask-image:
    url('./img/lp-frontplate.webp'),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
  -webkit-mask-size:contain, contain;
  -webkit-mask-repeat:no-repeat, no-repeat;
  -webkit-mask-position:bottom center, bottom center;
  -webkit-mask-composite:destination-in;

  mask-image:
    url('./img/lp-frontplate.webp'),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
  mask-size:contain, contain;
  mask-repeat:no-repeat, no-repeat;
  mask-position:bottom center, bottom center;
  mask-composite:intersect;
}

/* 앞판(Frontplate) */
.lp-frontplate{
  bottom:0; left:0; width:100%; height:auto;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(1px 1px 3px rgba(0,0,0,.15));
  pointer-events:none;
  z-index:3;
}

/* 바닥 마감 스트립(Frontplate 아래) */
.lp-thumb-wrapper::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:8px;
  background:var(--card-bg); z-index:2; pointer-events:none;
}

/* 오버레이 텍스트/메모 */
.note-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center;
  left:10%; right:10%; width:auto; box-sizing:border-box;
  transform:none; transform-origin:center;
  text-align:center; color:#444; opacity:.77; z-index:6;
  font-size:clamp(.7rem,2vw,.9rem); line-height:1.3;
  text-shadow:-1px -1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff,1px 1px 1px #fff;
  transition:transform .25s, font-weight .25s, text-shadow .25s;
  pointer-events:none; top: 40%;
}
.note-overlay .card-name{ font-size:clamp(.3rem,2vw,.7rem); margin-bottom:.3em }
.note-overlay .card-note{ line-height:1.3 }

/* 출시일: 오버레이와 분리(확대 영향 X) */
.card-release{
  position:absolute; left:0; right:0; bottom:2.5%;
  text-align:center;
  font-size:clamp(.2rem,2vw,.6rem);
  color:#fff; opacity:.9; z-index:6;
  text-shadow:none;
  transform:none; transform-origin:bottom center;
}
/* 오버레이만 확대 */
.lp-thumb-wrapper:hover .note-overlay{
  font-weight:700;
  transform:scale(var(--overlay-scale));
  text-shadow:-1px -1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff,1px 1px 1px #fff,0 0 4px rgba(0,0,0,.15);
}
/* 출시일은 고정 */
.lp-thumb-wrapper:hover .card-release{ transform:none }

/* ===== 레이어 정리: backplate(1) < strip(2) < frontplate(3) < thumbnail(5) < overlay(6) ===== */

/* ==============================
   3) 모달 공통
============================== */
.whis-modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  overflow-y:auto; overflow-x:hidden; backdrop-filter:blur(5px);
  background:rgba(0,0,0,.5); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s, visibility .3s; z-index:1000
}
@media (max-width: 768px) {
  .whis-modal {
    min-height: calc(var(--vh, 1vh) * 100);
  }
  .modal-container.lp-style {
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.whis-modal.show{ opacity:1; visibility:visible; pointer-events:auto }
.modal-container.lp-style{ display:flex; justify-content:center; align-items:center }
.modal-container.lp-style .modal-scaler{ position:relative; width:var(--modal-w); height:var(--modal-h); transform-origin:center }
@media (max-height:629px){ .whis-modal{ align-items:flex-start } }
@media (max-width:768px){ .modal-container.lp-style,.whis-modal{ align-items:center; justify-content:center } }
.whis-modal .close-btn{
  position:absolute; top:1rem; right:1rem; font-size:2.5rem; background:transparent; border:0; cursor:pointer;
  color:#fff; z-index:100; transition:color .2s
}
.whis-modal .close-btn:hover{ color:#ffd }
.whis-modal .arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:none; border:0;
  font-size:3rem; padding:.5rem 1rem; cursor:pointer; display:none; color:#444
}
.whis-modal .arrow:hover{ color:#ae5d5c }
.whis-modal .arrow.prev{ left:1% }
.whis-modal .arrow.next{ right:1% }
.modal-container.lp-style .modal-scaler::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:10px; pointer-events:none;
  background-image:var(--whisper-bg, url('/path/to/default-lp-bg.jpg'));
  background-size:cover; background-position:center; opacity:1
}

/* ==============================
   4) LP 모달
============================== */
.modal-container.lp-style .modal-scaler .lp-body{
  width:100%; height:100%; display:flex; gap:0;
  background:url('./img/LPbackground.webp') no-repeat center/cover;
  border-radius:20px; overflow:hidden; padding:2rem
}
.modal-container.lp-style .lp-left{ position:relative; width:55%; display:flex; align-items:center; justify-content:center }
.modal-container.lp-style .lp-wrapper{ position:relative; width:100%; max-width:420px; aspect-ratio:1/1 }
.modal-container.lp-style .lp-disc-skew{ width:100%; height:100%; transform-style:preserve-3d; perspective:1000px; margin-bottom:15px }
.modal-container.lp-style .lp-disc-wrapper{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  animation:lpSpinEllipse 10s linear infinite; transform-origin:center; transform:scaleY(.9)
}
@keyframes lpSpinEllipse{ 0%{transform:scaleY(.9) rotate(0)} 100%{transform:scaleY(.9) rotate(360deg)} }
.modal-container.lp-style .lp-disc{ position:absolute; width:100%; z-index:1 }
.modal-container.lp-style .lp-center-img{
  position:absolute; width:50%; aspect-ratio:1/1; object-fit:cover; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%); z-index:2
}
.modal-container.lp-style .lp-arm-wrapper{ position:absolute; top:320px; left:110px; width:80%; pointer-events:none; z-index:3 }
.modal-container.lp-style .lp-arm{ position:absolute; width:120%; left:-10%; top:0; z-index:3; pointer-events:none }
.modal-container.lp-style .lp-right{
  flex-grow:1; max-width:368px; padding:1rem 2rem; display:flex; flex-direction:column;
  border-radius:15px; background:linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,.1));
  border:2px solid rgba(255,255,255,.65); height:436px; margin-top:50px; overflow:hidden
}
.modal-container.lp-style .lp-header{ flex-shrink:0; padding-bottom:.5rem }
.modal-container.lp-style .lp-title{
  font-size:1.6rem; margin:45px 0 1rem; text-align:center; line-height:1; color: #7d7469; }
.modal-container.lp-style .lp-summary{
  margin-bottom:.5rem; opacity:.5; font-size:13px; border-bottom:1px solid rgba(0,0,0,.3); padding-bottom:.5em; color: #7d7469;
}
.modal-container.lp-style .lp-scroll{ flex-grow:1; overflow-y:auto; padding-right:4px }
.modal-container.lp-style .lp-content{ font-size:1rem; line-height:1.6; white-space:pre-line; color: #7d7469; }
.modal-container.lp-style .lp-left .footer-memo{ position:absolute; left:-40px; bottom:65px; transform:rotate(10deg); display:flex; flex-wrap:wrap; z-index:10; }
.modal-container.lp-style .footer-memo a{
  background:rgb(255,255,255,.5); padding:4px 8px; border-radius:10px; font-size:.8rem; text-decoration:none; color:#444;
  box-shadow:0 1px 3px rgba(0,0,0,.2); margin: 2.5% 0 0 2.5%; }
.modal-container.lp-style .footer-memo a:hover{ background:#ae5d5c; color:#fff; }
.modal-container.lp-style .close-btn{ top:10px; right:10px; font-size:2.5em; color:#444; opacity:.5 }
.modal-container.lp-style .close-btn:hover{ opacity:1; color:#000 }

/* ==============================
   5) 편지 모달
============================== */
#modal-letter.lp-style .lp-body{
  display:flex; gap:20px; background:url('./img/LETTERbackground.webp') no-repeat center/cover !important;
  padding:20px; border-radius:10px; position:relative
}
#modal-letter.lp-style .lp-left{ width:auto !important; margin-left:180px }
.letter-left{ display:flex; align-items:center; justify-content:center; position:relative; overflow:visible; z-index:1 }
.letter-clip{
  position:absolute; top:48px; left:-128px; width:120px; height:92px;
  background:url('./img/LETTERclip.webp') center/contain no-repeat; z-index:10; pointer-events:none
}
.letter-thumb-box{ width:300px; height:462px; overflow:hidden; border-radius:10px; margin-left:-75px; margin-bottom:22px; display:flex; justify-content:center; align-items:center }
.letter-thumb-box img{ width:100%; height:100%; object-fit:cover; object-position:center }
.letter-right{ margin:115px 140px 100px 20px; display:flex; flex-direction:column; max-height:355px }
.letter-title{ font-size:1.6rem; font-weight:700; text-align:center; }
.letter-summary{ font-size:1.2rem; margin-bottom:1rem; color:#555 }
.letter-scroll-box{ flex-grow:1; overflow-y:auto; margin-top:50px; padding-right:6px }
.letter-content{
  font-size:1rem; line-height:2; color:#333; padding:0 10px; white-space:pre-line;
  background:repeating-linear-gradient(to bottom,transparent,transparent calc(2em - 1px),rgba(0,0,0,.1) calc(2em - 1px),rgba(0,0,0,.1) 2em)
}
#modal-letter .lp-body .footer-memo{ position:absolute; left:130px; bottom:100px; display:flex; flex-wrap:wrap; z-index:10 }
#modal-letter .lp-body .footer-memo a{
  background:#ffffffdd; padding:4px 8px; border-radius:10px; font-size:.8rem; text-decoration:none; color:#444;
  box-shadow:0 1px 3px rgba(0,0,0,.2); }
#modal-letter .lp-body .footer-memo a:hover{ background:#ae5d5c; color:#fff; }

/* ==============================
   6) 속삭임 모달
============================== */
#modal-whisper .close-btn,
#modal-whisper .arrow{
  color:#fff;
  position:relative;
  z-index:10;
  transition: color .2s;
}
#modal-whisper .arrow:hover{
  color:#ae5d5c;
}
.whisper-title{
  padding:0.5% 0 0 3%; color:#fff; opacity:.5; text-align:left;
  position:relative; z-index:9;
  font-size:1.5em;
}
.whisper-scroll-box{
  max-height:480px; overflow-y:auto; padding-right:6px; margin-top:20px;
  position:relative; z-index:9;
}
.whisper-content{
  max-width:600px; margin:0 auto; text-align:center;
  position:relative; z-index:9;
}
.whisper-content p{ margin-bottom:1.5em }
.whisper-content p:last-child{ margin-bottom:0 }
.highlight-line{
  border-radius:4px; padding:2px 30px; color:#fff; font-size:1.1rem;
  background:linear-gradient(to right, rgba(100,150,220,0) 0%, rgba(100,150,220,.6) 50%, rgba(100,150,220,0) 100%);
  text-shadow:0 0 4px rgba(0,0,0,.7);
  position:relative; z-index:9;
}
/* 웨이브 효과: 그라데이션 위 */
.whisper-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
}
/* 그라데이션: 웨이브 아래 */
#modal-whisper .whisper-bubble::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(black, #878caa); opacity:.6;
  z-index:1; pointer-events:none; border-radius:10px;
}
#modal-whisper .modal-scaler{ position:relative !important; }
#modal-whisper .close-btn, #modal-whisper .arrow{ position:absolute !important; z-index:10 !important; }
#modal-whisper .arrow.prev{ left:12px; top:50%; transform:translateY(-50%); }
#modal-whisper .arrow.next{ right:12px; top:50%; transform:translateY(-50%); }

/* ==============================
   7) 공통 태그 모음
============================== */
.footer-memo{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-start; position:relative; z-index:10; }
.footer-memo a.link_hash_tag{
  background:rgba(255,255,255,.1); color:#fff; padding:.2rem .7rem; font-size:.85rem; border-radius:6px; text-decoration:none; transition:background .2s
}

/* ==============================
   8) 정렬 모드 커서
============================== */
.sortable .gallery-grid{ cursor:pointer }
.sortable .ui-sortable-helper{ cursor:grabbing !important }

/* ==============================
   9) 글쓰기 챕터 입력 높이
============================== */
textarea[name="chapter_content[]"]{ height:300px }

/* ==============================
   10) 글쓰기 폼 통일 (폭 700px)
============================== */
#bo_w .board-write{
  --form-max: 800px;
  --label-w : 110px;
  --gap     : 10px;
  max-width: var(--form-max);
  margin: 0 auto;
  padding: 12px 0;
}
#bo_w .board-write dl{
  display:grid;
  grid-template-columns: var(--label-w) 1fr;
  align-items:center;
  gap:var(--gap);
  margin:10px 0;
}
#bo_w .board-write dt{
  margin:0; text-align:right; padding-right:6px; white-space:nowrap;
  font-size:13px; color:#4a4a4a; opacity:.95;
}
#bo_w .board-write dd{ margin:0; }
#bo_w .board-write .frm_input,
#bo_w .board-write .frm_input.full,
#bo_w .board-write .frm_file.full,
#bo_w .board-write textarea,
#bo_w .board-write select{
  width:100%;
  border:1px solid rgba(110,70,50,.25);
  border-radius:10px;
  padding:9px 12px;
  background:#fff;
  font:inherit;
  color:#333;
  outline:none;
}
#bo_w .board-write select{ height:36px; padding:6px 12px; }
#bo_w .board-write input[type="file"]{ padding:6px 8px; }
#bo_w #char_count_desc, #bo_w #char_count_wrap{ font-size:12px; color:#666; }
#bo_w .btn_confirm{ margin-top:16px; text-align:center; }
#bo_w .btn_confirm .ui-btn{
  display:inline-block; background:#fff; color:#222;
  border:1px solid rgba(0,0,0,.15); border-radius:10px;
  padding:8px 16px; text-decoration:none; font-weight:600; line-height:1.2;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
#bo_w .btn_confirm .ui-btn:hover{ background:#f5f5f5; box-shadow:0 2px 6px rgba(0,0,0,.10) }
#bo_w .btn_confirm .ui-btn.point{ background:#ae5d5c; border-color:#ae5d5c; color:#fff }
@media (max-width:768px){
  #bo_w .board-write{ max-width:100%; padding:8px 0; }
  #bo_w .board-write dl{ grid-template-columns:1fr; }
  #bo_w .board-write dt{ text-align:left; padding-right:0; }
}
/* 기본 스킨 고정 폭 해제 */
#bo_w .board-write input[type="text"],
#bo_w .board-write input[type="url"],
#bo_w .board-write input[type="file"],
#bo_w .board-write select,
#bo_w .board-write textarea,
#bo_w .board-write .frm_input,
#bo_w .board-write .frm_input.full,
#bo_w .board-write .frm_file.full,
#bo_w .board-write .wr_content{
  width:100% !important;
  max-width:100% !important;
}
.wr_content { margin: 0 !important; }

/* 관리자 버튼 정렬/룩 */
.list-option.btn{ display:flex; gap:6px; justify-content:flex-end; height: 20px; }
.list-option.btn a{ order:2; }
.list-option.btn a.mod{ order:1; }
.list-option.btn a{
  display:inline-block; background:#fff !important; color:#222 !important;
  border:1px solid rgba(0,0,0,.18) !important; border-radius:5px;
  padding:3px; font-size:.8em; line-height:1.2; text-decoration:none !important;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:background .15s ease, box-shadow .15s ease, transform .02s ease;
}
.list-option.btn a:hover{ background:#f6f7f8 !important; box-shadow:0 2px 8px rgba(0,0,0,.22) }
.list-option.btn a:active{ transform:translateY(.5px) }


/* 커스텀 스크롤바 */
::-webkit-scrollbar-track {
    background: rgba(255,255,255,0);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.1);
    filter: brightness(0.9);
}

* {
    scrollbar-color: rgba(0,0,0,0.1) rgba(255,255,255,0);
}