/* 수아·연아 사이트 공통 스타일.
   모든 페이지가 이 파일 하나를 공유함 — 디자인을 바꿀 땐 여기만 고치면 됨. */

:root{
  --sky:#8ec9ee; --sky-soft:#bfe4f7; --cream:#fffaf2; --paper:#fff6e9;
  --ink:#2f2a24; --ink-soft:#6f6558;
  --coral:#ff7f8a; --mint:#6cc7b3; --lemon:#ffd979; --grass:#6fb567;
  --px:4px;                    /* 도트 한 칸 크기(테두리/그림자용) */
  --header-h:61px;
}
*, *::before, *::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:'Pretendard', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, canvas{display:block;}
.pixel{font-family:'Galmuri11', 'Pretendard', sans-serif; letter-spacing:.5px;}

/* ===== 도트 느낌 공통 부품 ===== */
.dot-card{
  background:var(--paper);
  border:var(--px) solid var(--ink);
  box-shadow:var(--px) var(--px) 0 rgba(47,42,36,.28);
  transition:transform .18s steps(3), box-shadow .18s steps(3);
}
a.dot-card:hover, .dot-card.hoverable:hover{
  transform:translate(calc(var(--px) * -1), calc(var(--px) * -1));
  box-shadow:calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(47,42,36,.28);
}
.dot-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border:var(--px) solid var(--ink);
  background:var(--cream); color:var(--ink); text-decoration:none;
  font-weight:800; font-size:14px; cursor:pointer; font-family:inherit;
  box-shadow:var(--px) var(--px) 0 var(--ink);
  transition:transform .12s steps(2), box-shadow .12s steps(2);
}
.dot-btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink);}
.dot-btn:active{transform:translate(var(--px),var(--px)); box-shadow:0 0 0 var(--ink);}
.dot-btn:disabled{opacity:.55; cursor:default; transform:none; box-shadow:var(--px) var(--px) 0 var(--ink);}
.dot-btn.primary{background:var(--coral); color:#fff;}
.dot-btn.mint{background:var(--mint); color:#fff;}
.dot-btn.small{padding:7px 14px; font-size:12.5px; box-shadow:2px 2px 0 var(--ink);}
.dot-btn.danger{background:#fff; color:#c0392b; border-color:#c0392b; box-shadow:var(--px) var(--px) 0 #c0392b;}

input, textarea, select{
  width:100%; padding:11px 13px; font-size:14px; font-family:inherit;
  color:var(--ink); background:#fff;
  border:var(--px) solid var(--ink); border-radius:0;
}
input:focus, textarea:focus, select:focus{outline:none; box-shadow:inset 0 0 0 2px var(--lemon);}
textarea{resize:vertical; min-height:120px; line-height:1.7;}
label.field{display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin:14px 0 6px;}
label.field:first-of-type{margin-top:0;}

/* ===== 헤더 ===== */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:rgba(255,250,242,.9);
  backdrop-filter:blur(6px);
  border-bottom:var(--px) solid var(--ink);
  transform:translateY(0); transition:transform .3s ease;
}
header.site.hidden{transform:translateY(-100%);}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.logo canvas{width:36px; height:36px;}
.logo-text{font-size:17px; font-weight:700;}
header.site nav{display:flex; gap:4px;}
header.site nav a{
  padding:8px 12px; font-size:13px; font-weight:700; color:var(--ink-soft);
  text-decoration:none; border:var(--px) solid transparent; white-space:nowrap;
}
header.site nav a:hover{color:var(--ink); border-color:var(--ink); background:var(--lemon);}
header.site nav a.active{color:var(--ink); background:var(--lemon); border-color:var(--ink);}
.menu-toggle{display:none; background:none; border:var(--px) solid var(--ink); padding:6px 10px; cursor:pointer; font-size:16px;}

@media (max-width:860px){
  header.site nav{
    position:fixed; top:var(--header-h); left:0; right:0; flex-direction:column; gap:0;
    background:var(--cream); border-bottom:var(--px) solid var(--ink);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  header.site nav.open{max-height:360px;}
  header.site nav a{padding:14px 20px; border:none; border-top:2px solid rgba(47,42,36,.12); font-size:14px;}
  .menu-toggle{display:block;}
}

/* ===== 페이지 공통 레이아웃 ===== */
.wrap{max-width:960px; margin:0 auto; padding:0 20px;}
.section-pad{padding:72px 0;}
.page-top{padding-top:calc(var(--header-h) + 40px);}
.section-head{text-align:center; margin-bottom:38px;}
.section-head .eyebrow{
  display:inline-block; font-size:11px; padding:5px 12px; margin-bottom:12px;
  background:var(--mint); color:#fff; border:var(--px) solid var(--ink);
}
.section-head h2{margin:0 0 8px; font-size:clamp(24px,5.5vw,34px); font-weight:800;}
.section-head p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.7;}

/* 스크롤 등장 */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ===== 푸터 ===== */
footer.site{
  background:var(--ink); color:#e9e2d6; padding:34px 20px; text-align:center;
  font-size:12.5px; line-height:1.9;
}
footer.site a{color:var(--lemon); text-decoration:none;}
footer.site canvas{display:inline-block; vertical-align:middle;}

/* ===== 관리자(로그인) 영역 ===== */
.admin-bar{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-bottom:26px; font-size:12.5px; color:var(--ink-soft);
}
.login-box{max-width:340px; margin:0 auto 26px;}
.login-box .inner{padding:22px;}
.msg{font-size:12.5px; margin-top:10px; min-height:1em; color:var(--ink-soft);}
.msg.ok{color:#2a8a4a;}
.msg.err{color:#c0392b;}
.empty-msg{text-align:center; padding:44px 10px; color:var(--ink-soft); font-size:13.5px;}

/* ===== 갤러리 격자 (포트폴리오) ===== */
.gal-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px;}
.gal-item{position:relative; padding:10px; background:var(--paper); cursor:pointer;}
.gal-thumb{position:relative; aspect-ratio:1; overflow:hidden; background:#000; border:2px solid var(--ink);}
.gal-thumb img, .gal-thumb video{width:100%; height:100%; object-fit:cover;}
.gal-cap{margin-top:8px; font-size:12.5px; font-weight:700; line-height:1.45;}
.gal-sub{margin-top:2px; font-size:11px; color:var(--ink-soft);}
.gal-del{
  position:absolute; top:4px; right:4px; width:26px; height:26px; z-index:2;
  border:2px solid var(--ink); background:#fff; color:#c0392b; cursor:pointer;
  font-size:13px; line-height:1; font-weight:800;
}
.tag{
  display:inline-block; font-size:10.5px; padding:3px 8px; margin-right:4px;
  border:2px solid var(--ink); background:var(--lemon);
}
.tag.sua{background:var(--coral); color:#fff;}
.tag.yona{background:var(--mint); color:#fff;}
.tag.private{background:var(--ink); color:#fff;}

/* 필터 버튼 줄 */
.filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:26px;}

/* ===== 라이트박스 ===== */
/* 사진을 화면 가로에 꽉 채우고, 세로로 긴 사진은 웹툰처럼 스크롤해서 봄 */
.lightbox{
  display:none; position:fixed; inset:0; z-index:100; background:rgba(30,26,22,.95);
  align-items:center; justify-content:flex-start; flex-direction:column; padding:0;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}
.lightbox.open{display:flex;}
/* 라이트박스가 열려 있는 동안엔 고정 헤더를 숨겨서 사진에 집중되게 함 */
body.lb-open header.site{opacity:0; pointer-events:none;}
/* width:auto + max-width:100% → 화면보다 큰 사진은 가로에 꽉 채우되,
   작은 사진은 원본 크기를 넘겨 늘리지 않음 */
.lightbox img, .lightbox video{width:auto; max-width:100%; height:auto; max-height:none; border:none;}
.lightbox-cap{color:#fff; font-size:13px; padding:14px 20px 30px; width:100%; text-align:center; opacity:.9;}
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:101;
  width:44px; height:44px; border:var(--px) solid #fff; background:rgba(255,255,255,.14);
  color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav.prev{left:12px;} .lightbox-nav.next{right:12px;}
.lightbox-nav[hidden]{display:none;}
.lightbox-close{position:fixed; top:16px; right:16px; z-index:101;}
@media (max-width:520px){
  .lightbox-nav{width:38px; height:38px; font-size:19px;}
  .lightbox-nav.prev{left:6px;} .lightbox-nav.next{right:6px;}
}

/* ===== 게시판 ===== */
.post{padding:20px 22px; margin-bottom:14px;}
.post h3{margin:0 0 6px; font-size:17px; font-weight:800;}
.post .meta{font-size:11.5px; color:var(--ink-soft); margin-bottom:10px;}
.post .body{font-size:14px; line-height:1.8; white-space:pre-line; color:var(--ink);}
.post .post-img{
  width:100%; margin-top:12px; border:2px solid var(--ink);
  cursor:zoom-in; transition:transform .15s steps(2);
}
.post .post-img:hover{transform:translate(-2px,-2px);}
.post .actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
/* 글 안에서 바로 여는 수정 폼 */
.edit-form .field{margin-top:12px;}
.edit-form .field:first-of-type{margin-top:0;}
.edit-form textarea{min-height:110px;}