/* =========================================================
   속초피크 커뮤니티 — styles
   ========================================================= */

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:40px; padding:0 18px; border-radius:10px; font-size:14.5px; font-weight:700;
  transition:background .15s, color .15s, transform .05s, box-shadow .15s; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--red{ background:var(--red); color:#fff; box-shadow:0 2px 10px rgba(226,56,46,.28); }
.btn--red:hover{ background:var(--red-strong); }
.btn--ghost{ background:#F1EDE7; color:var(--ink-2); }
.btn--ghost:hover{ background:#E9E4DC; }

/* ---------- 헤더 ---------- */
.hd{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); }
.hd__inner{ max-width:var(--maxw); margin:0 auto; height:70px; padding:0 28px;
  display:flex; align-items:center; gap:26px; }
.hd__logo img{ height:30px; display:block; }
.hd__gnb{ display:flex; align-items:center; gap:8px; }
.gnb{ padding:9px 16px; border-radius:9px; font-size:16px; font-weight:700; color:var(--ink-2);
  transition:background .15s,color .15s; letter-spacing:-.01em; }
.gnb:hover{ background:var(--line-2); color:var(--ink); }
.gnb.is-active{ color:var(--red); font-weight:800; }
.hd__right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.hd__search{ display:flex; align-items:center; gap:8px; height:40px; width:300px; padding:0 14px;
  background:#F4F1EC; border:1px solid transparent; border-radius:10px; color:var(--muted);
  transition:border-color .15s, background .15s; }
.hd__search:focus-within{ background:#fff; border-color:var(--line); }
.hd__search input{ border:none; background:none; outline:none; width:100%; font-size:14px; color:var(--ink); }
.hd__search input::placeholder{ color:var(--muted); }
.hd__write-ico{ font-size:15px; }
.hd__burger{ display:flex; flex-direction:column; gap:4px; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; transition:background .15s; }
.hd__burger:hover{ background:var(--line-2); }
.hd__burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; }

/* ---------- 우측 드로어 (조건부 마운트 + 키프레임 진입) ---------- */
.drawer-root{ position:fixed; inset:0; z-index:70; overflow:hidden; }
.drawer-overlay{ position:absolute; inset:0; background:rgba(28,27,26,.46); animation:drwOv .2s ease both; }
.drawer{ position:absolute; top:0; right:0; height:100%; width:330px; max-width:86vw; background:#fff;
  box-shadow:-12px 0 40px rgba(0,0,0,.16); display:flex; flex-direction:column;
  animation:drwIn .28s cubic-bezier(.3,.8,.3,1) both; }
@keyframes drwOv{ from{opacity:0;} to{opacity:1;} }
@keyframes drwIn{ from{transform:translateX(100%);} to{transform:translateX(0);} }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 14px; }
.drawer__title{ font-size:18px; font-weight:800; }
.drawer__x{ font-size:26px; line-height:1; color:var(--muted); width:32px; height:32px; border-radius:8px; }
.drawer__x:hover{ background:var(--line-2); color:var(--ink); }
.drawer__scroll{ flex:1; overflow-y:auto; padding:6px 14px 16px; }
.drawer__label{ font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.04em; padding:14px 8px 8px; }
.dmenu{ display:flex; align-items:center; gap:13px; padding:13px 12px; border-radius:12px; transition:background .15s; }
.dmenu:hover{ background:var(--line-2); }
.dmenu__ico{ font-size:22px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:var(--line-2); border-radius:11px; flex:none; }
.dmenu__tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dmenu__tx b{ font-size:15.5px; font-weight:800; color:var(--ink); }
.dmenu__tx small{ font-size:12.5px; color:var(--muted); }
.dmenu__arr{ margin-left:auto; font-size:20px; color:#CFC9BF; }
.dmenu--hot{ background:var(--red-tint); }
.dmenu--hot:hover{ background:var(--red-soft); }
.dmenu--hot .dmenu__ico{ background:#fff; box-shadow:inset 0 0 0 1.4px var(--red-soft); }
.dmenu--hot .dmenu__tx b{ color:var(--red-strong); }
.dmenu--hot .dmenu__arr{ color:var(--red); }
.dmenu--nav.is-current{ background:var(--line-2); }
.dmenu--nav.is-current .dmenu__tx b{ color:var(--red); }
.dmenu__now{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.05em; color:#fff;
  background:var(--red); padding:3px 8px; border-radius:999px; flex:none; }
.drawer__foot{ display:flex; flex-direction:column; gap:12px; padding:16px 22px; border-top:1px solid var(--line-2); }
.drawer__login{ display:block; text-align:center; height:42px; line-height:42px; border-radius:10px;
  background:var(--ink); color:#fff; font-size:14px; font-weight:800; transition:background .15s; }
.drawer__login:hover{ background:#000; }
.drawer__brand{ display:flex; justify-content:center; }
.drawer__brand img{ height:18px; opacity:.7; }

/* ---------- 수익화 배너 ---------- */
.promo{ display:flex; align-items:center; gap:15px; padding:16px 18px; border-radius:var(--radius);
  background:linear-gradient(100deg, #FCEFEC 0%, #FBF3F1 60%, #FFFFFF 100%);
  border:1px solid #F3DED9; transition:box-shadow .2s, transform .2s; }
.promo:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.promo__emoji{ font-size:30px; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:14px; flex:none; box-shadow:var(--shadow-sm); }
.promo__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.promo__tag{ font-size:11px; font-weight:800; color:var(--red); letter-spacing:.03em; }
.promo__t{ font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.promo__s{ font-size:13px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.promo__cta{ flex:none; height:38px; padding:0 16px; display:flex; align-items:center; border-radius:10px;
  background:var(--red); color:#fff; font-size:13.5px; font-weight:800; box-shadow:0 2px 10px rgba(226,56,46,.28); }
.promo:hover .promo__cta{ background:var(--red-strong); }
.promo--compact{ background:#fff; border-color:var(--line); }
.promo--compact .promo__emoji{ background:var(--red-tint); box-shadow:none; }

/* ---------- 스켈레톤 ---------- */
.sk{ background:linear-gradient(90deg,#EFEBE5 25%,#F6F3EE 37%,#EFEBE5 63%); background-size:400% 100%;
  animation:skShimmer 1.3s ease infinite; border-radius:7px; }
@keyframes skShimmer{ 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.skcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; padding-bottom:14px; }
.skcard .sk-img{ aspect-ratio:4/3; border-radius:0; }
.skcard .sk-line{ height:14px; margin:13px 14px 0; }
.skcard .sk-short{ width:60%; }
.skcard .sk-foot{ height:22px; margin:14px 14px 0; border-radius:999px; }
.skrow{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; gap:13px; }
.skrow .sk-tag{ width:38px; height:20px; flex:none; }
.skrow__b{ flex:1; }
.skrow .sk-line{ height:16px; }
.skrow .sk-short{ width:45%; margin-top:10px; height:13px; }

/* ---------- 페이지 / 타이틀 ---------- */
.page{ max-width:var(--maxw); margin:0 auto; padding:0 24px 96px; }
.titlebar{ padding:30px 4px 18px; }
.titlebar__h1{ font-size:30px; font-weight:800; letter-spacing:-.02em; }
.titlebar__sub{ margin-top:7px; font-size:15px; color:var(--muted); }

/* ---------- 필터바 ---------- */
.filterbar{ position:sticky; top:70px; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:10px 4px; margin-bottom:8px; background:linear-gradient(var(--bg) 70%, transparent);
  flex-wrap:wrap; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab{ height:36px; padding:0 16px; border-radius:999px; font-size:14.5px; font-weight:700; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); transition:all .15s; }
.tab:hover{ border-color:#DAD4CB; }
.tab.is-active{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 2px 8px rgba(226,56,46,.25); }
.filterbar__right{ display:flex; align-items:center; gap:14px; }
.filterbar__count{ font-size:13px; color:var(--muted); }
.sort{ display:flex; align-items:center; gap:7px; font-size:13.5px; }
.sort__btn{ color:var(--muted); font-weight:600; }
.sort__btn.is-on{ color:var(--ink); font-weight:800; }
.sort__sep{ color:var(--line); }

/* ---------- 레이아웃 ---------- */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 308px; gap:30px; align-items:start; }
.layout__main{ min-width:0; }

/* ---------- 피드 ---------- */
.feed{ display:flex; flex-direction:column; gap:16px; }
.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.empty{ padding:60px 20px; text-align:center; color:var(--muted); background:#fff; border:1px dashed var(--line); border-radius:var(--radius); }

/* ---------- 태그 ---------- */
.tag{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px;
  font-size:11.5px; font-weight:800; line-height:1; flex:none; letter-spacing:.01em; }
.tag--q{ background:var(--red); color:#fff; }                      /* 질문 */
.tag--i{ background:#fff; color:var(--red); box-shadow:inset 0 0 0 1.4px var(--red); } /* 정보 */
.tag--r{ background:var(--red-soft); color:var(--red-strong); }    /* 후기 */
.tag--p{ background:#EFEAE3; color:#8C857A; }                      /* 사진 */
.tag--overlay{ position:absolute; top:10px; left:10px; height:22px; padding:0 9px; font-size:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.18); backdrop-filter:blur(2px); }
.tag--overlay.tag--i{ background:rgba(255,255,255,.92); }
.tag--overlay.tag--p{ background:rgba(255,255,255,.9); }

/* ---------- 아바타 / 바이라인 ---------- */
.avatar{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  color:#fff; font-weight:800; flex:none; }
.byline{ display:flex; align-items:center; gap:7px; min-width:0; }
.byline__name{ font-size:13px; font-weight:700; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.byline__name{ cursor:pointer; transition:color .12s; }
a.byline__name:hover{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.byline__time{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.dot{ color:var(--line); }

/* ---------- 메타 (좋아요/댓글/조회) ---------- */
.meta{ display:flex; align-items:center; gap:14px; }
.meta__btn{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--muted); }
.meta__like{ color:var(--red); transition:transform .1s; }
.meta__like:hover{ transform:scale(1.06); }
.meta__like.is-on{ color:var(--red); }
.meta__like:not(.is-on){ color:#C9A6A2; }
.meta__cmt{ color:var(--red); }
.meta__view{ color:var(--muted); }

/* ---------- 사진 카드 ---------- */
.pcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s; }
.pcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pcard__img{ position:relative; aspect-ratio:4/3; }
.photofill{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.photofill__label{ font-family:'SFMono-Regular',ui-monospace,Menlo,monospace; font-size:12px; font-weight:600; letter-spacing:.04em; }
.pcard__body{ padding:13px 14px 14px; display:flex; flex-direction:column; gap:7px; }
.pcard__title{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; line-height:1.35; }
.pcard__text{ font-size:13.5px; color:var(--ink-2); line-height:1.55; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }

/* ---------- 리스트 행 ---------- */
.lrow{ display:flex; align-items:flex-start; gap:13px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, border-color .2s; }
.lrow:hover{ box-shadow:var(--shadow-md); }
.lrow > .tag{ margin-top:3px; }
.lrow__main{ flex:1; min-width:0; }
.lrow__title{ font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.4; transition:color .15s; cursor:pointer; }
.lrow:hover .lrow__title{ color:var(--red); }
.lrow__excerpt{ margin-top:5px; font-size:13.5px; color:var(--ink-2); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.lrow__byline{ display:flex; align-items:center; gap:7px; margin-top:11px; }
.lrow__meta{ display:flex; align-items:center; flex:none; align-self:center; }

/* ---------- 우측 레일 ---------- */
.rail{ display:flex; flex-direction:column; gap:16px; position:sticky; top:124px; }
.railcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px; }
.railcard__h{ font-size:14px; font-weight:800; margin-bottom:12px; }
.poplist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.poplist__item{ display:flex; align-items:flex-start; gap:9px; }
.poplist__rank{ font-size:14px; font-weight:900; color:var(--red); width:14px; flex:none; line-height:1.45; }
.poplist__txt{ font-size:13.5px; font-weight:600; color:var(--ink-2); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; }
.poplist__item:hover .poplist__txt{ color:var(--red); }
.poplist__cmt{ margin-left:auto; font-size:12px; font-weight:800; color:var(--red); flex:none; }
.tagcloud{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ height:30px; padding:0 12px; border-radius:999px; background:#F4F1EC; color:var(--ink-2);
  font-size:13px; font-weight:600; transition:all .15s; }
.chip:hover{ background:var(--red-soft); color:var(--red-strong); }
.railcard--cta{ background:var(--red-tint); border-color:#F3DED9; }
.railcta__t{ font-size:14.5px; font-weight:800; color:var(--red-strong); }
.railcta__s{ margin-top:6px; font-size:13px; color:#9A7E79; line-height:1.5; }

/* ---------- FAB ---------- */
.fab{ display:none; position:fixed; right:18px; bottom:20px; z-index:35; width:56px; height:56px;
  border-radius:50%; background:var(--red); color:#fff; font-size:24px; box-shadow:0 8px 24px rgba(226,56,46,.4); }
.fab:active{ transform:scale(.95); }

/* ---------- 글쓰기 모달 ---------- */
.wm-overlay{ position:fixed; inset:0; z-index:60; background:rgba(28,27,26,.5);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:wmFade .15s ease; }
@keyframes wmFade{ from{opacity:0;} to{opacity:1;} }
.wm{ width:100%; max-width:520px; max-height:90vh; background:#fff; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.3); animation:wmPop .18s cubic-bezier(.2,.8,.2,1); }
@keyframes wmPop{ from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;} }
.wm-head{ display:flex; align-items:center; gap:8px; padding:16px 18px; border-bottom:1px solid var(--line-2); }
.wm-title{ font-size:16.5px; font-weight:800; }
.wm-back{ font-size:24px; line-height:1; color:var(--ink-2); width:26px; height:26px; }
.wm-x{ margin-left:auto; font-size:24px; line-height:1; color:var(--muted); width:30px; height:30px; border-radius:8px; }
.wm-x:hover{ background:var(--line-2); color:var(--ink); }
.wm-scroll{ overflow-y:auto; padding:20px; }

/* 타입 선택 */
.wm-pick{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wm-pick__card{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:26px 14px; border:1.6px solid var(--line); border-radius:14px; background:#fff; transition:all .15s; }
.wm-pick__card:hover{ border-color:var(--red); background:var(--red-tint); transform:translateY(-2px); }
.wm-pick__emoji{ font-size:30px; }
.wm-pick__t{ font-size:15.5px; font-weight:800; }
.wm-pick__s{ font-size:12.5px; color:var(--muted); line-height:1.5; }

/* 폼 */
.wm-form{ display:flex; flex-direction:column; gap:18px; }
.wm-field{ display:flex; flex-direction:column; gap:8px; }
.wm-label{ font-size:13.5px; font-weight:800; color:var(--ink); }
.wm-req{ font-size:11px; font-weight:800; color:var(--red); margin-left:3px; }
.wm-opt{ font-size:11px; font-weight:600; color:var(--muted); margin-left:3px; }
.wm-input, .wm-textarea{ width:100%; border:1.5px solid var(--line); border-radius:10px; padding:12px 13px;
  font-size:14.5px; color:var(--ink); outline:none; transition:border-color .15s; background:#fff; resize:vertical; }
.wm-input:focus, .wm-textarea:focus{ border-color:var(--red); }
.wm-input.is-err{ border-color:var(--red); background:var(--red-tint); }
.wm-drop{ width:100%; display:flex; flex-direction:column; align-items:center; gap:5px; padding:34px 14px;
  border:1.6px dashed #D8D2C8; border-radius:12px; background:#FBF9F6; transition:all .15s; }
.wm-drop:hover{ border-color:var(--red); background:var(--red-tint); }
.wm-drop__ico{ font-size:28px; color:var(--red); line-height:1; }
.wm-drop__t{ font-size:14.5px; font-weight:800; }
.wm-drop__s{ font-size:12.5px; color:var(--muted); }
.wm-preview{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:#F2EEE8; }
.wm-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.wm-preview__x{ position:absolute; top:10px; right:10px; height:30px; padding:0 12px; border-radius:8px;
  background:rgba(28,27,26,.7); color:#fff; font-size:12.5px; font-weight:700; }
.wm-tags{ display:flex; gap:8px; }
.wm-tag{ height:34px; padding:0 16px; border-radius:999px; border:1.4px solid var(--line);
  font-size:13.5px; font-weight:700; color:var(--ink-2); background:#fff; transition:all .15s; }
.wm-tag:hover{ border-color:#D8D2C8; }
.wm-tag.is-sel{ background:var(--red); color:#fff; border-color:var(--red); }
.wm-err{ font-size:13px; font-weight:600; color:var(--red); margin-top:-4px; }
.wm-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:2px; }
.wm-actions .btn{ min-width:88px; }

/* =========================================================
   게시글 상세페이지
   ========================================================= */
.pcard, .lrow{ cursor:pointer; }
.pcard:focus-visible, .lrow:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.crumb{ display:flex; align-items:center; gap:8px; padding:20px 4px 10px; font-size:13.5px; color:var(--muted); }
.crumb a{ font-weight:600; }
.crumb a:hover{ color:var(--red); }
.crumb__sep{ color:var(--line); }

.dt{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 32px; box-shadow:var(--shadow-sm); }
.dt__head{ border-bottom:1px solid var(--line-2); padding-bottom:20px; margin-bottom:24px; }
.dt__tagrow{ display:flex; align-items:center; gap:9px; }
.dt__type{ font-size:12.5px; font-weight:700; color:var(--muted); }
.dt__title{ font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1.32; margin:14px 0 18px;
  text-wrap:pretty; }
.dt__byline{ display:flex; align-items:center; gap:12px; }
.dt__avatar-link{ flex:none; display:inline-flex; }
.dt__author{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dt__name{ font-size:15px; font-weight:800; color:var(--ink); cursor:pointer; transition:color .12s; }
a.dt__name:hover{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.dt__sub{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.dt__views{ display:inline-flex; align-items:center; gap:4px; }
.dt__follow{ margin-left:auto; height:34px; padding:0 15px; border-radius:999px; font-size:13px; font-weight:800;
  color:var(--red); background:#fff; box-shadow:inset 0 0 0 1.4px var(--red-soft); transition:all .15s; }
.dt__follow:hover{ background:var(--red-soft); }

/* 케밥 메뉴 */
.dt-menu{ position:relative; margin-left:auto; }
.dt-menu__btn{ width:32px; height:32px; border-radius:9px; font-size:20px; color:var(--muted); line-height:1; transition:background .15s; }
.dt-menu__btn:hover{ background:var(--line-2); color:var(--ink); }
.dt-menu__pop{ position:absolute; top:38px; right:0; z-index:20; min-width:130px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md); padding:6px; display:flex; flex-direction:column; }
.dt-menu__item{ display:block; text-align:left; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:700; color:var(--ink-2); transition:background .12s; }
.dt-menu__item:hover{ background:var(--line-2); }
.dt-menu__item--mut{ color:var(--muted); }
.dt-menu__item--danger{ color:#E2382E; }

.dt__figure{ margin:0 0 24px; border-radius:14px; overflow:hidden; position:relative; background:#F0ECE6; }
.dt__figure img{ width:100%; height:auto; display:block; }
.dt__gallery{ display:grid; gap:6px; margin:0 0 24px; }
.dt__gallery:has(.dt__figure--gallery:nth-child(2)) { grid-template-columns:1fr 1fr; }
.dt__gallery:has(.dt__figure--gallery:nth-child(3)) { grid-template-columns:1fr 1fr; }
.dt__gallery:has(.dt__figure--gallery:nth-child(4)) { grid-template-columns:1fr 1fr; }
.dt__gallery:has(.dt__figure--gallery:nth-child(5)) { grid-template-columns:1fr 1fr; }
.dt__figure--gallery{ margin:0; border-radius:10px; aspect-ratio:1/1; overflow:hidden; background:#F0ECE6; }
.dt__figure--gallery:first-child:nth-last-child(1){ grid-column:1/-1; aspect-ratio:auto; }
.dt__figure--gallery:first-child:nth-last-child(3){ grid-column:1/-1; aspect-ratio:16/9; }
.dt__figure--gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.dt__content{ display:flex; flex-direction:column; gap:18px; }
.dt__p{ font-size:16px; line-height:1.78; color:var(--ink-2); white-space:pre-line; text-wrap:pretty; }
.dt__hashrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.dt__hash{ font-size:13.5px; font-weight:700; color:var(--red); }

.dt-actions{ display:flex; align-items:center; gap:10px; margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line-2); flex-wrap:wrap; }
.dt-act{ display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 18px; border-radius:11px;
  background:var(--line-2); color:var(--ink-2); font-size:14px; font-weight:700; transition:all .15s; }
.dt-act:hover{ background:#E9E4DC; }
.dt-act--like{ background:var(--red-soft); color:var(--red-strong); }
.dt-act--like:hover{ background:#F9DAD6; }
.dt-act--like.is-on{ background:var(--red); color:#fff; }
.dt-act.is-on{ background:var(--ink); color:#fff; }

/* 맥락형 수익화 배너 */
.dt-promo{ display:flex; align-items:center; gap:16px; margin-top:18px; padding:18px 20px; border-radius:var(--radius);
  background:linear-gradient(100deg, #FCEFEC 0%, #FBF3F1 55%, #fff 100%); border:1px solid #F3DED9;
  transition:box-shadow .2s, transform .2s; }
.dt-promo:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.dt-promo__emoji{ font-size:30px; width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:14px; flex:none; box-shadow:var(--shadow-sm); }
.dt-promo__body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.dt-promo__label{ font-size:11px; font-weight:800; color:var(--red); letter-spacing:.03em; }
.dt-promo__t{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.dt-promo__s{ font-size:13px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.dt-promo__cta{ flex:none; height:40px; padding:0 17px; display:flex; align-items:center; border-radius:10px;
  background:var(--red); color:#fff; font-size:13.5px; font-weight:800; box-shadow:0 2px 10px rgba(226,56,46,.28); }
.dt-promo:hover .dt-promo__cta{ background:var(--red-strong); }

/* 섹션 헤더 */
.dt-sech{ font-size:18px; font-weight:800; letter-spacing:-.01em; margin-bottom:16px; }
.dt-sech__n{ color:var(--red); margin-left:2px; }
.dt-sech__sub{ color:var(--red); font-weight:800; }

/* 댓글 */
.dt-comments{ margin-top:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; }
.cmt-write{ display:flex; gap:12px; padding-bottom:22px; margin-bottom:8px; border-bottom:1px solid var(--line-2); }
.cmt-write__box{ flex:1; min-width:0; }
.cmt-write__ta{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:12px 13px; font-size:14.5px;
  color:var(--ink); outline:none; resize:vertical; transition:border-color .15s; }
.cmt-write__ta:focus{ border-color:var(--red); }
.cmt-write__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.cmt-write__count{ font-size:12px; color:var(--muted); }
.cmt-write__btn{ height:38px; min-width:74px; }
.cmt-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cmt{ display:flex; gap:12px; padding:18px 0; border-bottom:1px solid var(--line-2); }
.cmt:last-child{ border-bottom:none; }
.cmt__body{ flex:1; min-width:0; }
.cmt__head{ display:flex; align-items:center; gap:8px; }
.cmt__name{ font-size:14px; font-weight:800; cursor:pointer; transition:color .12s; }
a.cmt__name:hover{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.cmt__time{ font-size:12px; color:var(--muted); }
.cmt__text{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin-top:5px; text-wrap:pretty; }
.cmt__foot{ display:flex; align-items:center; gap:14px; margin-top:9px; }
.cmt__like{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--red); }
.cmt__reply{ font-size:12.5px; font-weight:700; color:var(--muted); }
.cmt__reply:hover{ color:var(--ink-2); }

/* 관련 글 */
.dt-related{ margin-top:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; }
.rel-list{ display:flex; flex-direction:column; }
.rel{ display:flex; align-items:center; gap:11px; padding:13px 4px; border-bottom:1px solid var(--line-2); transition:padding .12s; }
.rel:last-child{ border-bottom:none; }
.rel:hover{ padding-left:8px; }
.rel__title{ flex:1; min-width:0; font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.rel:hover .rel__title{ color:var(--red); }
.rel__meta{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--red); flex:none; }

.dt-back{ display:inline-flex; align-items:center; gap:4px; margin-top:24px; font-size:14px; font-weight:700;
  color:var(--ink-2); }
.dt-back:hover{ color:var(--red); }

.dt-404{ text-align:center; padding:80px 20px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.dt-404__t{ font-size:22px; font-weight:800; }
.dt-404__s{ font-size:14px; color:var(--muted); margin-bottom:14px; }

/* =========================================================
   프로필 / 마이페이지
   ========================================================= */
.page--prof{ max-width:780px; }
.phero{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.phero__cover{ height:96px; background:linear-gradient(120deg, #F4C9C3 0%, #F7E0D4 45%, #EBE3D6 100%); }
.phero__main{ padding:0 26px 24px; position:relative; }
.phero__avatar{ margin-top:-44px; width:fit-content; padding:5px; background:#fff; border-radius:50%; box-shadow:var(--shadow-sm); }
.phero__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:12px; flex-wrap:wrap; }
.phero__id{ display:flex; align-items:center; gap:10px; }
.phero__name{ font-size:23px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.phero__me{ font-size:12px; font-weight:800; color:#fff; background:var(--red); padding:2px 8px; border-radius:999px; }
.phero__badge{ font-size:12px; font-weight:800; color:var(--red); background:var(--red-soft); padding:4px 10px; border-radius:999px; }
.phero__act{ display:flex; gap:9px; }
.phero__bio{ margin-top:12px; font-size:14.5px; color:var(--ink-2); line-height:1.6; text-wrap:pretty; }
.phero__stats{ display:flex; align-items:center; gap:18px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2); }
.pstat{ display:flex; flex-direction:column; gap:2px; }
.pstat__n{ font-size:19px; font-weight:800; }
.pstat__n--red{ color:var(--red); }
.pstat__l{ font-size:12.5px; color:var(--muted); font-weight:600; }
.pstat__sep{ width:1px; height:26px; background:var(--line); }

.ptabs{ display:flex; gap:4px; margin:20px 0 16px; border-bottom:1px solid var(--line); }
.ptab{ position:relative; padding:12px 16px; font-size:15px; font-weight:700; color:var(--muted); transition:color .15s; }
.ptab:hover{ color:var(--ink-2); }
.ptab.is-active{ color:var(--ink); font-weight:800; }
.ptab.is-active::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; background:var(--red); border-radius:3px; }
.ptab__n{ margin-left:6px; font-size:12.5px; font-weight:800; color:var(--red); }

.pempty{ text-align:center; padding:60px 20px; background:#fff; border:1px dashed var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; gap:14px; }
.pempty__t{ font-size:15px; color:var(--muted); }

/* 계정 설정 */
.pset{ display:flex; flex-direction:column; gap:16px; }
.pset-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm); }
.pset-h{ font-size:16px; font-weight:800; margin-bottom:16px; }
.pset-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.pset-label{ font-size:13px; font-weight:800; color:var(--ink-2); }
.pset-input{ height:46px; border:1.5px solid var(--line); border-radius:10px; padding:0 13px; font-size:14.5px; color:var(--ink); outline:none; transition:border-color .15s; }
.pset-input:focus{ border-color:var(--red); }
.pset-input--ro{ background:var(--line-2); color:var(--muted); }
.pset-hint{ font-size:12.5px; color:var(--muted); }
.pset-actions{ display:flex; justify-content:flex-end; }
.pset-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line-2); }
.pset-row:last-child{ border-bottom:none; }
.pset-row__l{ font-size:14.5px; font-weight:600; color:var(--ink-2); }
.pset-toggle{ width:46px; height:27px; border-radius:999px; background:#D8D2C8; position:relative; transition:background .18s; flex:none; }
.pset-toggle.is-on{ background:var(--red); }
.pset-toggle span{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.pset-toggle.is-on span{ transform:translateX(19px); }
.pset-links{ display:flex; flex-direction:column; gap:2px; }
.pset-link{ text-align:left; padding:13px 4px; font-size:14.5px; font-weight:700; color:var(--ink-2); border-bottom:1px solid var(--line-2); }
.pset-link:last-child{ border-bottom:none; }
.pset-link:hover{ color:var(--ink); }
.pset-link--danger{ color:var(--red); }

/* =========================================================
   글 수정 페이지
   ========================================================= */
.page--edit{ max-width:680px; }
.ed{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; box-shadow:var(--shadow-sm); }
.ed__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line-2); }
.ed__title{ font-size:22px; font-weight:800; letter-spacing:-.01em; }
.ed__type{ font-size:13px; font-weight:700; color:var(--muted); }
.ed-form{ display:flex; flex-direction:column; gap:20px; }
.ed-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:6px; }
.ed-actions .btn{ min-width:104px; height:44px; }
.ed-photo{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:#F2EEE8; }
.ed-photo__img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.ed-photo__ph{ position:absolute; inset:0; }
.ed-photo__btn{ z-index:2; }

/* =========================================================
   로그인 / 회원가입
   ========================================================= */
.lg{ min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.lg-brand{ position:relative; padding:54px 56px; display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(150deg, #E2382E 0%, #C42A21 55%, #9E2018 100%); color:#fff; overflow:hidden; }
.lg-brand::after{ content:''; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%;
  background:rgba(255,255,255,.07); }
.lg-brand::before{ content:''; position:absolute; right:60px; top:-80px; width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.06); }
.lg-brand__logo img{ height:30px; filter:brightness(0) invert(1); }
.lg-brand__copy{ position:relative; z-index:1; }
.lg-brand__h{ font-size:40px; font-weight:800; line-height:1.28; letter-spacing:-.02em; }
.lg-brand__s{ margin-top:18px; font-size:16px; line-height:1.7; color:rgba(255,255,255,.86); }
.lg-brand__tags{ display:flex; flex-wrap:wrap; gap:9px; position:relative; z-index:1; }
.lg-brand__tags span{ font-size:13.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.16);
  padding:7px 13px; border-radius:999px; backdrop-filter:blur(4px); }

.lg-main{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; gap:18px; }
.lg-card{ width:100%; max-width:380px; }
.lg-home{ display:inline-block; font-size:13.5px; font-weight:700; color:var(--muted); margin-bottom:18px; }
.lg-home:hover{ color:var(--red); }
.lg-title{ font-size:27px; font-weight:800; letter-spacing:-.02em; }
.lg-sub{ margin-top:7px; font-size:14.5px; color:var(--muted); }
.lg-socials{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.lg-social{ display:flex; align-items:center; justify-content:center; height:50px; border-radius:12px; font-size:15px; font-weight:800; text-decoration:none; cursor:pointer; border:none; transition:filter .15s, background .15s; }
.lg-social:hover{ filter:brightness(.96); }
.lg-social--kakao{ background:#FEE500; color:#3C1E1E; }
.lg-social--naver{ background:#03C75A; color:#fff; }
.lg-social--apple{ background:#111; color:#fff; }
.lg-social--google{ background:#fff; color:#1C1B1A; border:1.5px solid #C8C4BE; }
.lg-or{ display:flex; align-items:center; gap:12px; margin:22px 0 18px; color:var(--muted); font-size:12.5px; }
.lg-or::before, .lg-or::after{ content:''; flex:1; height:1px; background:var(--line); }
.lg-form{ display:flex; flex-direction:column; gap:14px; }
.lg-field{ display:flex; flex-direction:column; gap:6px; }
.lg-label{ font-size:13px; font-weight:800; color:var(--ink-2); }
.lg-input{ width:100%; height:48px; border:1.5px solid var(--line); border-radius:11px; padding:0 14px; font-size:15px;
  color:var(--ink); outline:none; transition:border-color .15s; box-sizing:border-box; }
.lg-input:focus{ border-color:var(--red); }
.lg-err{ font-size:13px; font-weight:600; color:var(--red); margin-top:-2px; }
.lg-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.lg-check{ display:flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:600; cursor:pointer; }
.lg-check input{ accent-color:var(--red); width:15px; height:15px; }
.lg-find{ color:var(--muted); font-weight:600; }
.lg-find:hover{ color:var(--red); }
.lg-submit{ height:50px; font-size:15.5px; margin-top:6px; }
.lg-switch{ text-align:center; margin-top:22px; font-size:14px; color:var(--muted); }
.lg-switch button{ font-weight:800; color:var(--red); }
.lg-switch button:hover{ text-decoration:underline; }
.lg-foot{ font-size:12px; color:var(--muted); text-align:center; max-width:380px; line-height:1.6; }
.lg-foot a{ color:var(--ink-2); text-decoration:underline; }

/* =========================================================
   공통 (shop/info 페이지)
   ========================================================= */
.page--narrow{ max-width:820px; }
.page--detail2{ max-width:1000px; }
.sh-head{ padding:26px 4px 16px; }
.sh-h1{ font-size:30px; font-weight:800; letter-spacing:-.02em; }
.sh-sub{ margin-top:8px; font-size:15px; color:var(--muted); }
.sh-promo{ display:flex; align-items:center; gap:12px; padding:15px 20px; border-radius:var(--radius); margin-bottom:18px;
  background:linear-gradient(100deg,#FCEFEC,#FBF3F1); border:1px solid #F3DED9; flex-wrap:wrap; }
.sh-promo__t{ font-size:14.5px; font-weight:800; color:var(--red-strong); }
.sh-promo__s{ font-size:13.5px; color:var(--ink-2); }
.sh-promo--market{ background:linear-gradient(100deg,#EEF6EF,#F4F9F4); border-color:#DCEBDD; }
.sh-promo--market .sh-promo__t{ color:#2C7A3D; }
.sh-filters{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.fchip{ height:36px; padding:0 16px; border-radius:999px; font-size:14px; font-weight:700; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); transition:all .15s; }
.fchip--sm{ height:32px; font-size:13px; padding:0 13px; }
.fchip:hover{ border-color:#DAD4CB; }
.fchip.is-on{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 2px 8px rgba(226,56,46,.22); }
.sh-count{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.stars{ font-size:13px; font-weight:800; color:var(--red); white-space:nowrap; }

/* =========================================================
   속초 PICK
   ========================================================= */
.pk-head{ padding:26px 4px 20px; }
.pk-h1{ font-size:30px; font-weight:800; letter-spacing:-.02em; }
.pk-sub{ margin-top:8px; font-size:15px; color:var(--muted); }
.pk-hero{ position:relative; display:block; border-radius:18px; overflow:hidden; min-height:360px; box-shadow:var(--shadow-sm); }
.pk-hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.5) 100%); }
.pk-hero__body{ position:absolute; left:0; right:0; bottom:0; padding:34px 34px 32px; color:#fff; }
.pk-hero__tag{ font-size:12.5px; font-weight:800; background:var(--red); padding:5px 11px; border-radius:999px; }
.pk-hero__title{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.3; margin:14px 0 10px; text-wrap:pretty; max-width:640px; }
.pk-hero__excerpt{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.9); max-width:560px; }
.pk-hero__meta{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:rgba(255,255,255,.82); font-weight:600; }
.pk-secrow{ display:flex; align-items:baseline; justify-content:space-between; margin:30px 4px 16px; }
.pk-sech{ font-size:20px; font-weight:800; }
.pk-sech__more{ font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; }
.pk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pk-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column; }
.pk-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.pk-card__img{ position:relative; aspect-ratio:16/10; }
.pk-card__tag{ position:absolute; top:12px; left:12px; font-size:11.5px; font-weight:800; color:var(--red); background:#fff; padding:4px 9px; border-radius:999px; }
.pk-card__body{ padding:15px 16px 17px; }
.pk-card__title{ font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.35; }
.pk-card__excerpt{ margin-top:7px; font-size:13.5px; color:var(--ink-2); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pk-card__meta{ display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12.5px; color:var(--muted); font-weight:600; }
.pk-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:34px; padding:24px 28px;
  background:var(--red-tint); border:1px solid #F3DED9; border-radius:var(--radius); flex-wrap:wrap; }
.pk-cta__t{ font-size:17px; font-weight:800; color:var(--red-strong); }
.pk-cta__s{ margin-top:5px; font-size:14px; color:#9A7E79; }

/* =========================================================
   로컬마켓
   ========================================================= */
.mk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mk{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column; }
.mk:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.mk__img{ position:relative; aspect-ratio:4/3; background:#EEE5D2; }
.mk__hot{ position:absolute; top:10px; left:10px; font-size:11px; font-weight:800; color:#fff; background:var(--red); padding:3px 9px; border-radius:999px; letter-spacing:.04em; }
.mk__body{ padding:13px 14px 15px; flex:1; display:flex; flex-direction:column; gap:4px; }
.mk__seller{ font-size:11.5px; color:var(--muted); font-weight:600; }
.mk__name{ font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.3; }
.mk__row{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.mk__sold{ font-size:12px; color:var(--muted); }
.mk__price{ margin-top:auto; padding-top:8px; font-size:13px; color:var(--muted); }
.mk__price b{ font-size:16px; font-weight:800; color:var(--ink); }

/* 마켓 상세 */
.pd{ margin-top:8px; }
.pd__hero{ position:relative; border-radius:18px; aspect-ratio:16/9; max-height:420px; box-shadow:var(--shadow-sm); }
.pd__grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px; margin-top:24px; align-items:start; }
.pd__main{}
.pd__seller{ font-size:13px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.pd__name{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.3; margin-bottom:10px; }
.pd__meta{ display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:13.5px; }
.pd__sold{ color:var(--muted); }
.pd__sech{ font-size:15px; font-weight:800; margin:22px 0 8px; }
.pd__desc{ font-size:14.5px; color:var(--ink-2); line-height:1.7; }
.pd__buy{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:80px; }
.pd__price{ font-size:14px; color:var(--muted); margin-bottom:4px; }
.pd__price b{ font-size:24px; font-weight:800; color:var(--ink); }

/* =========================================================
   숙소 예약
   ========================================================= */
.sc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sc{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column; }
.sc:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.sc__img{ position:relative; aspect-ratio:4/3; }
.sc__badge{ position:absolute; top:12px; left:12px; font-size:11.5px; font-weight:800; color:#fff; background:var(--red); padding:4px 10px; border-radius:999px; }
.sc__type{ position:absolute; top:12px; right:12px; font-size:11.5px; font-weight:800; color:var(--ink-2); background:rgba(255,255,255,.92); padding:4px 10px; border-radius:999px; }
.sc__body{ padding:14px 15px 16px; }
.sc__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.sc__name{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.sc__area{ margin-top:6px; font-size:13px; color:var(--muted); }
.sc__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.sc__tag{ font-size:11.5px; font-weight:700; color:var(--ink-2); background:var(--line-2); padding:4px 9px; border-radius:7px; }
.sc__price{ margin-top:13px; font-size:14px; color:var(--muted); }
.sc__price b{ font-size:18px; font-weight:800; color:var(--ink); }

.sd{ }
.sd__hero{ position:relative; border-radius:18px; aspect-ratio:21/9; box-shadow:var(--shadow-sm); }
.sd__hero .sc__badge{ top:16px; left:16px; }
.sd__grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:30px; margin-top:24px; align-items:start; }
.sd__type{ font-size:13.5px; font-weight:700; color:var(--muted); }
.sd__name{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:8px 0 10px; }
.sd__rate{ font-size:14px; color:var(--ink-2); }
.sd__tags{ margin-top:16px; }
.sd__sech{ font-size:18px; font-weight:800; margin:28px 0 12px; }
.sd__desc{ font-size:15px; line-height:1.75; color:var(--ink-2); text-wrap:pretty; }
.sd__amen{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.sd__amenitem{ font-size:14px; color:var(--ink-2); font-weight:600; }
.sd__book{ position:sticky; top:90px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }
.sd__book .sd__price{ font-size:14px; color:var(--muted); }
.sd__book .sd__price b{ font-size:24px; font-weight:800; color:var(--ink); }
.sd__nights{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:14px; font-weight:700; }
.stepper{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:10px; padding:5px 12px; }
.stepper button{ font-size:18px; font-weight:800; color:var(--red); width:22px; }
.stepper span{ font-size:14.5px; font-weight:800; min-width:34px; text-align:center; }
.sd__total{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2); font-size:14px; font-weight:700; }
.sd__total b{ font-size:19px; color:var(--red); }
.sd__cta{ width:100%; height:50px; margin-top:18px; font-size:15.5px; }
.sd__note{ text-align:center; margin-top:10px; font-size:12.5px; color:var(--muted); }

/* =========================================================
   로컬마켓
   ========================================================= */
.mc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mc{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column; }
.mc:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.mc__img{ position:relative; aspect-ratio:1/1; }
.mc__hot{ position:absolute; top:10px; left:10px; font-size:11px; font-weight:800; color:#fff; background:var(--red); padding:3px 9px; border-radius:7px; letter-spacing:.04em; }
.mc__body{ padding:13px 14px 15px; }
.mc__seller{ font-size:12px; color:var(--muted); font-weight:600; }
.mc__name{ font-size:14.5px; font-weight:700; line-height:1.4; margin:5px 0 9px; min-height:40px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mc__price{ font-size:17px; font-weight:800; }
.mc__unit{ font-size:12px; font-weight:600; color:var(--muted); }
.mc__meta{ margin-top:8px; font-size:12px; color:var(--muted); }
.md{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:start; }
.md__img{ border-radius:18px; aspect-ratio:1/1; position:relative; box-shadow:var(--shadow-sm); }
.md__seller{ font-size:14px; font-weight:700; color:var(--muted); }
.md__name{ font-size:25px; font-weight:800; letter-spacing:-.02em; margin:8px 0 10px; text-wrap:pretty; }
.md__rate{ font-size:14px; color:var(--ink-2); }
.md__price{ font-size:26px; font-weight:800; margin:16px 0; }
.md__ship{ background:var(--line-2); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:7px; font-size:13.5px; color:var(--ink-2); font-weight:600; }
.md__qty{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; font-size:14px; font-weight:700; }
.md__total{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2); font-size:14px; font-weight:700; }
.md__total b{ font-size:22px; color:var(--red); }
.md__btns{ display:flex; gap:10px; margin-top:18px; }
.md__cart{ flex:1; height:50px; }
.md__buy{ flex:1.4; height:50px; }
.md__sec{ margin-top:34px; }

/* =========================================================
   공지사항
   ========================================================= */
.nlist{ list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.nrow{ display:flex; align-items:center; gap:13px; padding:17px 20px; border-bottom:1px solid var(--line-2); transition:background .12s; }
.nlist li:last-child .nrow{ border-bottom:none; }
.nrow:hover{ background:var(--line-2); }
.nrow.is-pinned{ background:var(--red-tint); }
.nrow.is-pinned:hover{ background:var(--red-soft); }
.nrow__pin{ font-size:13px; }
.nbadge{ font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:7px; flex:none; }
.nc--notice{ background:var(--red); color:#fff; }
.nc--event{ background:#fff; color:var(--red); box-shadow:inset 0 0 0 1.4px var(--red); }
.nc--update{ background:#E7F0F7; color:#2E6CA8; }
.nc--check{ background:var(--line-2); color:var(--ink-2); }
.nrow__title{ flex:1; min-width:0; font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nrow:hover .nrow__title{ color:var(--red); }
.nrow__date{ font-size:12.5px; color:var(--muted); flex:none; }
.ndet{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px; box-shadow:var(--shadow-sm); }
.ndet__head{ border-bottom:1px solid var(--line-2); padding-bottom:20px; margin-bottom:22px; }
.ndet__title{ font-size:23px; font-weight:800; letter-spacing:-.01em; line-height:1.4; margin:14px 0 10px; text-wrap:pretty; }
.ndet__date{ font-size:13px; color:var(--muted); }
.ndet__body{ display:flex; flex-direction:column; gap:16px; }
.ndet__body p{ font-size:15.5px; line-height:1.78; color:var(--ink-2); }

/* =========================================================
   고객센터
   ========================================================= */
.sp-sec{ margin-bottom:34px; }
.sp-sech{ font-size:20px; font-weight:800; margin-bottom:14px; }
.faq-list{ margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq{ border-bottom:1px solid var(--line-2); }
.faq:last-child{ border-bottom:none; }
.faq__q{ width:100%; display:flex; align-items:center; gap:12px; padding:17px 20px; text-align:left; transition:background .12s; }
.faq__q:hover{ background:var(--line-2); }
.faq__cat{ font-size:11.5px; font-weight:800; color:var(--red); background:var(--red-soft); padding:4px 9px; border-radius:7px; flex:none; }
.faq__qt{ flex:1; font-size:15px; font-weight:700; }
.faq__arr{ font-size:20px; color:var(--muted); flex:none; }
.faq__a{ padding:2px 20px 20px 79px; font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.sp-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:18px; }
.sp-done{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:40px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.sp-done__t{ font-size:18px; font-weight:800; color:var(--red); }
.sp-done__s{ font-size:14px; color:var(--muted); margin-bottom:12px; }
.sp-contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sp-contact__item{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:5px; }
.sp-contact__item b{ font-size:13px; font-weight:800; color:var(--red); }
.sp-contact__item span{ font-size:13.5px; color:var(--ink-2); }

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:980px){
  .layout{ grid-template-columns:1fr; }
  .rail{ position:static; }
  .railcard--cta{ display:none; }
  .pk-grid{ grid-template-columns:repeat(2,1fr); }
  .sc-grid{ grid-template-columns:repeat(2,1fr); }
  .mc-grid{ grid-template-columns:repeat(3,1fr); }
  .mk-grid{ grid-template-columns:repeat(2,1fr); }
  .pd__grid{ grid-template-columns:1fr; }
  .sd__grid{ grid-template-columns:1fr; }
  .sd__book{ position:static; }
  .md{ grid-template-columns:1fr; }
  .sp-contact{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .hd__inner{ padding:0 14px; gap:10px; height:62px; }
  .hd__gnb{ display:none; }
  .hd__search{ display:none; }
  .hd__write-tx{ display:none; }
  .hd__write{ width:40px; padding:0; }
  .hd__burger{ width:40px; height:40px; }
  .page{ padding:0 16px 96px; }
  .titlebar{ padding:22px 2px 14px; }
  .titlebar__h1{ font-size:25px; }
  .filterbar{ top:62px; }
  .fab{ display:flex; }
  .lrow__meta .meta__view{ display:none; }
  .promo{ gap:12px; padding:14px; }
  .promo__cta{ display:none; }
  .promo__emoji{ width:46px; height:46px; font-size:26px; }
  .dt{ padding:22px 18px; }
  .dt__title{ font-size:22px; }
  .dt__p{ font-size:15px; }
  .dt-comments, .dt-related{ padding:20px 16px; }
  .dt-promo{ padding:14px; gap:12px; }
  .dt-promo__cta{ display:none; }
  .dt-promo__emoji{ width:48px; height:48px; font-size:26px; }
  .crumb{ padding:16px 2px 8px; }
  .phero__main{ padding:0 18px 20px; }
  .phero__stats{ gap:12px; flex-wrap:wrap; }
  .pstat__sep{ display:none; }
  .pstat{ min-width:64px; }
  .phero__top{ margin-top:10px; }
  .phero__act .btn{ height:38px; padding:0 14px; font-size:13.5px; }
  .lg{ grid-template-columns:1fr; }
  .lg-brand{ display:none; }
  .sh-h1, .pk-h1{ font-size:25px; }
  .pk-grid{ grid-template-columns:1fr; }
  .sc-grid{ grid-template-columns:1fr 1fr; }
  .mc-grid{ grid-template-columns:1fr 1fr; }
  .mk-grid{ grid-template-columns:1fr 1fr; }
  .pk-hero{ min-height:300px; }
  .pk-hero__title{ font-size:23px; }
  .pk-hero__body{ padding:24px 22px; }
  .sd__amen{ grid-template-columns:1fr; }
  .faq__a{ padding-left:20px; }
  .nrow__title{ font-size:14px; }
}
@media (max-width:460px){
  .sc-grid, .mc-grid, .mk-grid{ grid-template-columns:1fr; }
  .nrow{ flex-wrap:wrap; gap:8px; padding:14px 16px; }
  .nrow__title{ order:3; flex-basis:100%; white-space:normal; }
}
@media (max-width:460px){
  .pgrid{ gap:12px; }
  .pcard__title{ font-size:14.5px; }
  .pcard__text{ font-size:12.5px; }
  .pcard__body{ padding:11px 12px 12px; }
  .pcard__foot .byline__name{ max-width:64px; }
  .lrow{ padding:14px 14px; }
  .lrow__title{ font-size:15.5px; }
  .wm-pick{ grid-template-columns:1fr; }
}

/* ── 페이지네이션 ──────────────────────────────────── */
.pg-nav{display:flex;flex-direction:column;align-items:center;gap:8px;}
.pg-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.pg-link{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:8px;font-size:.9rem;color:var(--ink-2);border:1px solid var(--line);background:var(--surface);cursor:pointer;text-decoration:none;transition:all .15s;}
.pg-item.active .pg-link{background:var(--red);color:#fff;border-color:var(--red);font-weight:700;}
.pg-item.disabled .pg-link{color:var(--line);cursor:default;border-color:var(--line);}
.pg-item:not(.active):not(.disabled) .pg-link:hover{background:var(--line-2);border-color:var(--ink-2);}
.pg-info{font-size:.8rem;color:var(--muted);}

/* ── 대댓글 ──────────────────────────────────── */
.cmt-replies{list-style:none;margin:4px 0 0;padding:0 0 0 48px;}
.cmt--reply{padding:10px 0;border-bottom:1px solid var(--line-2);}
.cmt--reply:last-child{border-bottom:none;}
.cmt-reply-form{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;background:var(--line-2);border-radius:10px;}

/* ── 알림 벨 / 드롭다운 ──────────────────────────────── */
.hd__bell{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;cursor:pointer;border-radius:8px;color:var(--ink-2);transition:background .15s;position:relative;}
.hd__bell:hover{background:var(--line-2);}
.bell-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;pointer-events:none;}
.bell-pop{position:absolute;top:calc(100% + 8px);right:-8px;width:320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:200;overflow:hidden;}
.bell-pop__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px;border-bottom:1px solid var(--line-2);}
.bell-pop__title{font-size:.9rem;font-weight:700;color:var(--ink);}
.bell-pop__readall{font-size:.78rem;color:var(--muted);background:transparent;border:none;cursor:pointer;padding:2px 6px;border-radius:4px;transition:background .15s;}
.bell-pop__readall:hover{background:var(--line-2);color:var(--ink);}
.bell-pop__list{list-style:none;padding:0;margin:0;max-height:320px;overflow-y:auto;}
.bell-pop__empty{padding:28px 16px;text-align:center;font-size:.85rem;color:var(--muted);}
.bell-pop__item{border-bottom:1px solid var(--line-2);}
.bell-pop__item:last-child{border-bottom:none;}
.bell-pop__item--unread{background:var(--red-tint);}
.bell-pop__link{display:flex;align-items:center;gap:10px;padding:12px 16px;transition:background .15s;text-decoration:none;}
.bell-pop__link:hover{background:var(--line-2);}
.bell-pop__msg{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.45;margin:0;}
.bell-pop__time{font-size:.75rem;color:var(--muted);margin-top:2px;display:block;}
.bell-pop__dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;margin-left:auto;}
.bell-pop__all{display:block;text-align:center;padding:11px 16px;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line-2);transition:background .15s;text-decoration:none;}
.bell-pop__all:hover{background:var(--line-2);color:var(--ink);}

/* ── 알림 목록 페이지 ────────────────────────────────── */
.notif-list{list-style:none;padding:0;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.notif-item{border-bottom:1px solid var(--line-2);}
.notif-item:last-child{border-bottom:none;}
.notif-item--unread{background:var(--red-tint);}
.notif-link{display:flex;align-items:center;gap:14px;padding:16px 20px;transition:background .15s;text-decoration:none;}
.notif-link:hover{background:var(--line-2);}
.notif-avatar{width:40px;height:40px;font-size:18px;flex-shrink:0;}
.notif-body{flex:1;min-width:0;}
.notif-msg{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.45;margin:0;}
.notif-time{font-size:.78rem;color:var(--muted);margin-top:3px;display:block;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;}