/* ============================================================================
   site.css — roondal.co.kr 공개 사이트 (facultydept 스타일 2단 편집형)
   테스트베드 public/testbed-site.html 승격본. 관리자/인증 페이지는 별도 CSS 사용.
   ============================================================================ */

/* ===== 디자인 토큰 ========================================================= */
:root{
  --bg:#FCF9EE;          /* 아이보리 배경 */
  --ink:#171512;         /* 본문 잉크 */
  --muted:#6d675c;       /* 보조 텍스트 */
  --faint:#a49d8e;       /* 번호/미세 라벨 */
  --line:rgba(23,21,18,.13);
  --line-2:rgba(23,21,18,.28);
  --paper:#f4efdf;       /* 살짝 짙은 패널 */
  --sel:#efe8d3;         /* 선택 하이라이트 */
  --header-h:66px;
  /* CI(조랑말 마크)에서 추출한 브랜드 컬러 — 포인트/강조용 */
  --brand:#F03000;       /* 버밀리언 (CI 몸통) */
  --brand-deep:#C42400;  /* 딥 레드 (CI 음영) */
  --brand-umber:#2B0D07; /* 움버 (CI 외곽선) */
  --brand-cream:#FAF3D2; /* 크림 (CI 초승달·양말) */
  /* 영문은 Newsreader/Inter, 한글은 Pretendard 로 폴백(혼용) */
  --serif:'Newsreader','Pretendard Variable','Pretendard',Georgia,'Malgun Gothic',serif;
  --sans:'Inter','Pretendard Variable','Pretendard',system-ui,-apple-system,'Malgun Gothic',sans-serif;
  --maxcol:640px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* 미세 그로테스크 라벨 (번호 · VIEW MORE · 지역 · 날짜) */
.eyebrow,.meta,.nav__link,.btn,.tag{
  font-family:var(--sans);
  letter-spacing:.12em;text-transform:uppercase;
}
.eyebrow{font-size:11px;color:var(--muted);letter-spacing:.16em}

/* ===== 헤더(고정) ========================================================= */
.site__header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,30px);
}
.logo{line-height:1;display:flex;align-items:center;gap:10px}
.logo__mark{width:36px;height:36px;flex:none}
.logo__txt{display:flex;flex-direction:column;gap:2px}
.logo__name{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:.01em}
.logo__sub{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--faint)}
.nav{display:flex;gap:clamp(12px,2vw,26px);align-items:center;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav__link{font-size:12.5px;color:var(--muted);padding:6px 0;white-space:nowrap;border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s}
.nav__link:hover{color:var(--ink)}
.nav__link.is-active{color:var(--ink);border-color:var(--ink)}
/* 관리자 전용 Admin 메뉴 — CI 버밀리언으로 구분 */
.nav__link--admin{color:var(--brand);font-weight:500}
.nav__link--admin:hover{color:var(--brand-deep)}

/* ===== 2단 셸 ============================================================= */
.main{padding-top:var(--header-h)}
.split{
  display:grid;grid-template-columns:1fr 1fr;
  height:calc(100vh - var(--header-h));
}
.col{height:100%;overflow-y:auto;overflow-x:hidden;padding:clamp(20px,3vw,40px)}
.col--left{border-right:1px solid var(--line)}
.col--flush{padding:0;height:calc(100vh - var(--header-h))}
.col::-webkit-scrollbar{width:9px}
.col::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:3px solid var(--bg)}
.col-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.col-head h2{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink);margin:0}
.viewmore{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.viewmore:hover{color:var(--ink);border-color:var(--ink)}
.col-empty{color:var(--muted);font-size:15px;padding:20px 0}

/* ===== 최근 글 목록 (Main 좌) ============================================= */
.post-list{max-width:var(--maxcol)}
.post-row{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line);cursor:pointer}
.post-row:first-child{padding-top:0}
.post-row__no{font-family:var(--sans);font-size:12px;color:var(--faint);padding-top:5px;letter-spacing:.06em}
.post-row__title{font-size:23px;font-weight:500;line-height:1.22;margin:0 0 8px}
.post-row:hover .post-row__title{text-decoration:underline;text-underline-offset:3px}
.post-row__meta{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.post-row__excerpt{color:var(--muted);font-size:15px;line-height:1.55;margin:0}

/* ===== 이미지 갤러리 (Main 우) — 큰 사진 가로 스크롤 + 전체 모음 그리드 ===== */
.col--rail{padding:0;overflow:hidden;display:flex;flex-direction:column}
.rail-head{padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 14px;display:flex;justify-content:space-between;align-items:baseline}
.g-all{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:none;background:none;cursor:pointer;border-bottom:1px solid var(--line-2);padding:0 0 2px}
.g-all:hover{color:var(--ink);border-color:var(--ink)}
.g3d-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--sans);font-size:13px;letter-spacing:.02em}

/* 큰 사진 가로 스크롤 스트립 (기본 보기) */
.g-rail{flex:1;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;user-select:none;
  padding:0 clamp(20px,3vw,40px) clamp(20px,3vw,40px)}
.g-rail::-webkit-scrollbar{height:9px}
.g-rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:3px solid var(--bg)}
.g-slide{flex:0 0 86%;height:100%;border:none;padding:0;margin:0;border-radius:5px;overflow:hidden;cursor:pointer;background:#000;box-shadow:0 5px 16px rgba(23,21,18,.14)}
.g-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

/* 단일 사진 라이트박스 (사진 클릭 시 크게 보기) */
.lb{position:fixed;inset:0;z-index:110;background:rgba(23,21,18,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.lb[hidden]{display:none}
.lb__img{max-width:92vw;max-height:88vh;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.55);touch-action:none;will-change:transform}
.lb__close,.lb__prev,.lb__next{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:none;cursor:pointer;font-family:var(--sans);border-radius:50%;width:48px;height:48px;font-size:20px;line-height:1}
.lb__close{top:20px;right:20px}
.lb__prev{left:16px;top:50%;transform:translateY(-50%)}
.lb__next{right:16px;top:50%;transform:translateY(-50%)}
.lb__close:hover,.lb__prev:hover,.lb__next:hover{background:rgba(255,255,255,.26)}
.lb__cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:var(--sans);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* 전체 모음(그리드) 오버레이 */
.gcoll{position:fixed;inset:0;z-index:100;background:rgba(23,21,18,.93);overflow-y:auto;padding:64px clamp(16px,4vw,40px) 48px}
.gcoll[hidden]{display:none}
.gcoll__close{position:fixed;top:18px;right:20px;z-index:2;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-family:var(--sans);font-size:20px;line-height:1}
.gcoll__close:hover{background:rgba(255,255,255,.26)}
.gcoll__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;max-width:1080px;margin:0 auto;perspective:1000px}
.g3d-card{position:relative;aspect-ratio:3/4;border:none;padding:0;border-radius:6px;overflow:hidden;cursor:pointer;background:#000;
  transform-style:preserve-3d;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.g3d-card img{width:100%;height:100%;object-fit:cover;display:block}
.g3d-card .g3d-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.32),rgba(255,255,255,0) 45%)}
.g3d-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.5)}
.g3d-card:hover .g3d-glare{opacity:1}

/* ===== Blog 마스터-디테일 ================================================= */
.blog-list{max-width:var(--maxcol)}
.blog-item{display:block;padding:16px 12px 16px 14px;border-bottom:1px solid var(--line);cursor:pointer;border-left:2px solid transparent;color:inherit}
.blog-item:hover{background:var(--paper)}
.blog-item.is-active{background:var(--sel);border-left-color:var(--ink)}
.blog-item__title{font-size:18px;font-weight:500;margin:0 0 5px;line-height:1.25}
.blog-item__meta{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.article{max-width:720px}
.article__img{width:100%;aspect-ratio:16/10;border-radius:2px;background-size:cover;background-position:center;margin-bottom:22px}
.article__tag{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.article__title{font-size:34px;line-height:1.15;font-weight:500;margin:0 0 10px}
.article__body{font-size:17px;line-height:1.75;color:#2a2721}
.article__body p{margin:0 0 18px}
.article__body img{border-radius:2px;margin:8px 0}
.article__body figure{margin:0 0 18px}
.article__body figcaption,.landing_browser_detail_caption{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:6px;text-align:center}
.landing_browser_detail_image{width:100%;border-radius:2px}

/* 댓글 */
.comments{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.comments h4{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px}
.comment{padding:12px 0;border-bottom:1px solid var(--line)}
.comment__who{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--muted);margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.comment__del{font-family:var(--sans);font-size:10px;letter-spacing:.06em;color:var(--faint);border:1px solid var(--line);background:none;border-radius:2px;padding:2px 7px;cursor:pointer}
.comment__del:hover{color:var(--ink);border-color:var(--line-2)}
.comment__body{font-size:15px;white-space:pre-wrap}
.comment-form{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.comment-form textarea{font-family:var(--serif);font-size:15px;line-height:1.5;padding:12px 14px;border:1px solid var(--line-2);border-radius:2px;background:#fff;color:var(--ink);resize:vertical;min-height:74px}
.comment-form textarea:focus{outline:none;border-color:var(--ink)}
.comment-form__row{display:flex;justify-content:flex-end}
.comment-login{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:16px}
.comment-login a{border-bottom:1px solid var(--line-2)}

/* Blog 페이저 (모바일 전용 — 기본 숨김) */
.blog-pager{display:none}
.blog-pager__btn,.blog-pager__num{font-family:var(--sans);font-size:12px;letter-spacing:.04em;min-width:36px;padding:9px 11px;border:1px solid var(--line-2);background:none;color:var(--ink);cursor:pointer;border-radius:2px}
.blog-pager__num.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.blog-pager__btn[disabled]{opacity:.35;cursor:default}

/* 관리자: 글 작성 버튼(목록 상단) + 상세 수정/삭제 버튼 */
.blog-new{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);border-radius:2px;padding:7px 12px;white-space:nowrap}
.blog-new:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
/* 여행 등록 버튼 — 장르 색 4종이 흐르는 컬러풀 애니메이션 (참고: 색이 이쁜 멀티 버튼) */
.trip-new{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.03em;color:#fff;border:none;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(120deg,#E4572E,#E8A33D,#2A9D8F,#3D5A80,#E4572E);background-size:300% 100%;
  box-shadow:0 3px 12px rgba(23,21,18,.18);text-shadow:0 1px 2px rgba(0,0,0,.18);
  animation:tripNewFlow 8s linear infinite;transition:transform .18s ease,box-shadow .18s ease}
.trip-new:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(23,21,18,.28);animation-duration:2.8s}
.trip-new:active{transform:translateY(0)}
@keyframes tripNewFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media (prefers-reduced-motion:reduce){.trip-new{animation:none}}
.article-admin{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.article-admin--top{margin-bottom:18px}
.article-admin--bottom{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.article-admin__del{margin:0}
.article-admin__btn{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);background:none;border-radius:2px;padding:8px 14px;cursor:pointer;display:inline-block}
.article-admin__btn:hover{border-color:var(--ink)}
.article-admin__btn--danger{color:#8f2e26;border-color:#c9a49f}
.article-admin__btn--danger:hover{border-color:#8f2e26;background:#8f2e26;color:#fff}

/* ===== Chat (카톡형) ====================================================== */
.chat{display:flex;flex-direction:column;height:100%}
.chat__head{padding:16px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.chat__head h2{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0}
.chat__head p{font-family:var(--sans);font-size:11px;color:var(--muted);margin:4px 0 0;letter-spacing:.04em;text-transform:none}
/* AI 헤더에 참고 토글 인라인 배치(별도 두 줄 바 제거) */
.chat__head--toggle{display:flex;align-items:center;justify-content:space-between;gap:14px}
.chat__head-text{min-width:0}
.chat__head-toggle{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.chat__head-toggle span{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;text-transform:none}
.chat__scroll{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.chat__scroll::-webkit-scrollbar{width:9px}
.chat__scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:3px solid var(--paper)}
.msg{max-width:74%;font-size:15px;line-height:1.45;padding:10px 14px;border-radius:14px;font-family:var(--serif)}
.msg--in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg--out{align-self:flex-end;background:var(--ink);color:#f7f3e7;border-bottom-right-radius:4px}
.msg__time{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.06em;opacity:.6;margin-top:4px;text-transform:none}
.chat__input{flex:0 0 auto;display:flex;gap:8px;padding:14px;border-top:1px solid var(--line);background:var(--bg)}
.chat__input input{flex:1;font-family:var(--serif);font-size:15px;padding:11px 14px;border:1px solid var(--line-2);border-radius:22px;background:#fff;color:var(--ink)}
.chat__input input:focus{outline:none;border-color:var(--ink)}
.chat__send{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--bg);border:none;border-radius:22px;padding:0 18px;cursor:pointer}

/* ===== Profile =========================================================== */
.pmenu{max-width:340px}
.pmenu .eyebrow{display:block;margin-bottom:18px}
.pmenu__item{width:100%;text-align:left;font-family:var(--serif);font-size:22px;font-weight:500;background:none;border:none;border-bottom:1px solid var(--line);padding:18px 4px;cursor:pointer;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.pmenu__item:hover{padding-left:10px}
.pmenu__item.is-active{color:var(--ink)}
.pmenu__item span{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--faint)}
.pmenu__note{font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:24px;letter-spacing:.03em}
.pmenu__note a{border-bottom:1px solid var(--line-2)}
.auth{max-width:400px}
.auth__title{font-size:30px;font-weight:500;margin:0 0 6px}
.auth__sub{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--muted);margin:0 0 30px}
.auth[hidden]{display:none}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;font-family:var(--serif);font-size:17px;padding:8px 2px;border:none;border-bottom:1px solid var(--line-2);background:none;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--ink)}
.btn{display:inline-block;font-size:12px;background:var(--ink);color:var(--bg);border:none;padding:14px 30px;cursor:pointer;letter-spacing:.14em;margin-top:8px}
.btn:hover{opacity:.88}
.auth__err{font-family:var(--sans);font-size:12px;color:#a3382e;margin:0 0 18px;letter-spacing:.02em}
/* 로그인 상태 카드 */
.pcard__hi{font-size:30px;font-weight:500;margin:0 0 6px}
.pcard__role{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--muted);margin:0 0 26px}
.pcard__links{display:flex;flex-direction:column;gap:14px;max-width:320px}
.pcard__link{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding:14px 2px;display:flex;justify-content:space-between}
.pcard__link:hover{border-color:var(--ink)}

/* ===== 스텁 (Trip/Trade) ================================================= */
.stub{height:calc(100vh - var(--header-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:20px}
.stub__big{font-size:64px;font-weight:400;margin:0;letter-spacing:-.01em}
.stub__msg{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ===== 플래시 메시지 ====================================================== */
.site_flash_stack{position:fixed;top:calc(var(--header-h) + 12px);left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px)}
.site_flash{font-family:var(--sans);font-size:13px;letter-spacing:.02em;padding:12px 16px;border-radius:3px;border:1px solid var(--line-2);background:#fff;color:var(--ink);box-shadow:0 6px 20px rgba(23,21,18,.12);transition:opacity .3s}
.site_flash_success{border-color:#5a7d55;color:#3f5c3b}
.site_flash_error{border-color:#a3382e;color:#8f2e26}
.site_flash.is_hiding{opacity:0}

/* ===== 모바일 사이드바 드로어 + Chat FAB/모달 (기본 숨김, ≤860px 노출) ===== */
/* 햄버거 버튼 */
.hamburger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:0;margin-right:-6px}
.hamburger span{display:block;width:22px;height:1.6px;background:var(--ink);transition:transform .28s,opacity .2s}
.hamburger.is-open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
/* 드로어 + 백드롭 */
.drawer-backdrop{display:none;position:fixed;inset:0;z-index:60;background:rgba(23,21,18,.34);opacity:0;transition:opacity .28s;pointer-events:none}
.drawer-backdrop.is-open{opacity:1;pointer-events:auto}
.drawer{display:none;position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(78%,300px);flex-direction:column;padding:18px 0;background:var(--bg);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(23,21,18,.16);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:0 22px 14px;border-bottom:1px solid var(--line)}
.drawer__eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.drawer__close{width:34px;height:34px;background:none;border:none;font-size:20px;color:var(--ink);cursor:pointer;line-height:1;margin-right:-6px}
.drawer__nav{display:flex;flex-direction:column;padding:8px 0}
.drawer__link{font-family:var(--serif);font-size:23px;font-weight:500;color:var(--ink);padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .18s}
.drawer__link:hover{background:var(--sel)}
.drawer__link.is-active::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink);flex:0 0 auto}
.drawer__num{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--faint)}
/* Chat 플로팅 FAB */
.chat-fab{display:none;position:fixed;right:18px;bottom:20px;z-index:55;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;background:var(--ink);color:#f7f3e7;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(23,21,18,.32);transition:transform .2s,opacity .2s}
.chat-fab:active{transform:scale(.92)}
.chat-fab svg{width:25px;height:25px}
.chat-fab.is-hidden{opacity:0;pointer-events:none;transform:scale(.6)}
/* Chat 모달 (실제 /chat 을 iframe 임베드로 로드) */
.chat-modal{display:none;position:fixed;inset:0;z-index:120}
.chat-modal.is-open{display:block}
.chat-modal::before{content:"";position:absolute;inset:0;background:rgba(23,21,18,.5);opacity:0;transition:opacity .3s}
.chat-modal.is-shown::before{opacity:1}
.chat-modal__card{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);opacity:0;
  width:min(760px,94vw);height:min(88vh,900px);height:min(88dvh,900px);display:flex;flex-direction:column;
  background:var(--bg);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(23,21,18,.45);
  will-change:transform,opacity;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s}
.chat-modal.is-shown .chat-modal__card{transform:translate(-50%,-50%);opacity:1}
.chat-modal__bar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;height:44px;padding:0 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.chat-modal__x{width:36px;height:36px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-modal__x:hover{background:var(--sel)}
.chat-modal__frame{flex:1;width:100%;border:none;display:block;background:var(--bg)}
/* 드로어/모달 열림 시 배경 스크롤 잠금 */
body.nav-lock{overflow:hidden}

/* ===== Trip (여행 지도 2단) ============================================== */
.split--trip{grid-template-columns:minmax(300px,400px) 1fr}
.trip-list{max-width:var(--maxcol)}
.trip-item{display:block;width:100%;text-align:left;appearance:none;background:none;border:none;border-bottom:1px solid var(--line);border-left:2px solid transparent;padding:15px 12px 15px 13px;cursor:pointer;color:inherit;font:inherit}
.trip-item:hover{background:var(--paper)}
.trip-item.is-active{background:none}
/* 아코디언: 여행 클릭 시 그 아래로 장소 펼침(목록 유지). 열린 항목은 배경 어둡게 X → 그림자로 부양 */
.trip-acc{position:relative;border-bottom:1px solid var(--line);border-radius:12px;transition:box-shadow .28s ease,margin .28s ease}
.trip-acc .trip-item{border-bottom:none;border-left:none}
.trip-acc:has(.trip-kebab) .trip-item{padding-right:42px}
/* 목록 개별 ⋮ 메뉴(수정/삭제) — 관리자 */
.trip-kebab{position:absolute;top:12px;right:8px;z-index:4;width:30px;height:30px;padding:0;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.trip-kebab:hover{background:var(--paper);color:var(--ink)}
.trip-menu{position:absolute;top:40px;right:8px;z-index:6;display:none;flex-direction:column;min-width:98px;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 6px 20px rgba(23,21,18,.16);overflow:hidden}
.trip-menu.is-open{display:flex}
.trip-menu button{appearance:none;background:none;border:none;text-align:left;padding:10px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer}
.trip-menu button:hover{background:var(--sel)}
.trip-menu button[data-act="del"]{color:#c0564a}
.trip-acc.is-open{border-bottom-color:transparent;background:var(--bg);box-shadow:0 6px 22px rgba(23,21,18,.15);position:relative;z-index:1;margin:8px 0}
.trip-acc__body{overflow:hidden;max-height:0;opacity:0;padding:2px 6px 14px 13px;transition:max-height .34s ease,opacity .28s ease}
.trip-acc.is-open .trip-acc__body{opacity:1}
.trip-acc__body .trip-nav__item{padding-top:4px;padding-bottom:14px}
.trip-item__title{font-size:22px;font-weight:500;margin:0 0 6px;line-height:1.25}
.trip-item__meta{font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.trip-item__dates{font-family:var(--sans);font-size:13px;letter-spacing:.02em;color:var(--faint);margin-top:4px}
/* 우측: 탭 + 지도 (패딩 제거, 세로 플렉스) */
.col--map{padding:0;display:flex;flex-direction:column;overflow:hidden}
/* 좌측 컬럼: 탭(상단 고정) + 목록(스크롤) */
.split--trip .col--left{padding:0;display:flex;flex-direction:column;overflow:hidden}
.split--trip .col--left .trip-tabs{flex:0 0 auto}
.split--trip #tripSide{flex:1;min-height:0;overflow-y:auto;padding:clamp(20px,3vw,34px)}
.trip-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 clamp(18px,2.4vw,30px);background:var(--bg);flex:0 0 auto}
.trip-tab{appearance:none;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:16px 4px;margin-right:26px;border-bottom:2px solid transparent;margin-bottom:-1px}
.trip-tab:hover{color:var(--ink)}
.trip-tab.is-active{color:var(--ink);border-bottom-color:var(--ink)}
.trip-panel{flex:1;position:relative;min-height:0}
.trip-panel[hidden]{display:none}
/* 네이버 Map 생성자가 컨테이너 inline style(position:relative)을 덮어써 absolute/inset 은 높이 0으로 붕괴 → 일반 흐름 100% 로 채움 */
#tripMap{width:100%;height:100%}
.trip-legend{position:absolute;left:14px;bottom:14px;z-index:5;background:rgba(252,249,238,.94);border:1px solid var(--line-2);border-radius:6px;padding:9px 12px;display:flex;gap:14px;flex-wrap:wrap;box-shadow:0 3px 10px rgba(23,21,18,.1);font-family:var(--sans);font-size:12px}
.trip-legend__item{display:flex;align-items:center;gap:6px}
.trip-legend__pin{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;border:1.5px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.trip-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:var(--muted);font-family:var(--sans);font-size:13px;letter-spacing:.02em}
.trip-empty__big{font-family:var(--serif);font-size:48px;color:var(--ink);margin:0;letter-spacing:-.01em}
/* JS 생성 HTML 마커 핀 (위치 보정은 네이버 anchor(13,34)만 사용 — CSS transform 병행 금지: 이중 오프셋으로 줌마다 마커가 어긋남) */
.trip-pin{position:relative;width:26px;height:34px;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.trip-pin__body{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.trip-pin__glyph{transform:rotate(45deg);font-size:12px;line-height:1}
/* InfoWindow 내용 (네이버 오버레이 안에서 렌더) */
.trip-iw{position:relative;font-family:var(--sans);width:230px;padding:13px 15px 15px;color:var(--ink)}
.trip-iw__genre{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:2px 7px;border-radius:10px;margin-bottom:8px}
.trip-iw__name{font-family:var(--serif);font-size:17px;font-weight:500;margin:0 0 4px;padding-right:46px}
.trip-iw__addr{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 6px;padding-right:46px}
.trip-iw__stars{font-size:15px;letter-spacing:2px;margin-bottom:7px;color:#d9cfb6}
.trip-iw__stars b{color:#E8A33D}
.trip-iw__stars em{color:var(--muted);font-size:12px;letter-spacing:0;font-style:normal}
.trip-iw__body{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.trip-iw__edit{position:absolute;top:9px;right:11px;background:none;border:1px solid var(--line-2);border-radius:8px;padding:3px 9px;font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--muted);cursor:pointer}
.trip-iw__edit:hover{border-color:var(--ink);color:var(--ink);background:var(--sel)}

/* ===== Trip 좌측 드릴다운(네비게이션식 장소 목록) ===== */
.trip-item__count{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:6px}
.trip-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:14px}
.trip-back:hover{color:var(--ink)}
.trip-detail__title{font-family:var(--serif);font-size:24px;font-weight:500;margin:0 0 6px;line-height:1.2}
.trip-detail__meta{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trip-detail__dates{font-family:var(--sans);font-size:12px;color:var(--faint);margin-top:3px}
.trip-detail__hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.trip-nav{list-style:none;margin:0;padding:0}
.trip-nav__item{display:flex;gap:12px;width:100%;text-align:left;background:none;border:none;cursor:pointer;color:inherit;font-family:inherit;padding:4px 6px 16px;position:relative}
.trip-nav__item:hover .trip-nav__name{text-decoration:underline}
.trip-nav__item.is-active{background:var(--sel);border-radius:10px}
.trip-nav__rail{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.trip-nav__no{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--sans);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;z-index:1;flex:0 0 auto}
.trip-nav__item:not(:last-child) .trip-nav__rail::after{content:"";position:absolute;top:24px;bottom:-16px;left:50%;width:2px;transform:translateX(-50%);background:var(--line-2)}
.trip-nav__body{flex:1;min-width:0}
.trip-nav__row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trip-nav__pin{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;border:1.5px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.25);flex:0 0 auto}
.trip-nav__name{font-family:var(--serif);font-size:18px;font-weight:500}
.trip-nav__stars{font-family:var(--sans);font-size:13.5px;color:#E8A33D;letter-spacing:1px;margin-left:auto}
.trip-nav__snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:5px}

/* ===== Trip 편집기 모달 (관리자) ===== */
.trip-modal{display:none;position:fixed;inset:0;z-index:120}
.trip-modal.is-open{display:block}
.trip-modal::before{content:"";position:absolute;inset:0;background:rgba(23,21,18,.5);opacity:0;transition:opacity .3s}
.trip-modal.is-shown::before{opacity:1}
.trip-modal__card{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);opacity:0;width:min(680px,94vw);max-height:88vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(23,21,18,.3);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s}
.trip-modal.is-shown .trip-modal__card{transform:translate(-50%,-50%);opacity:1}
.trip-modal__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.trip-modal__title{font-family:var(--serif);font-size:20px;font-weight:500;margin:0}
.trip-modal__x{width:34px;height:34px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.trip-modal__x:hover{background:var(--sel)}
.trip-modal__body{flex:1;overflow-y:auto;padding:18px;font-family:var(--sans)}
.trip-modal__foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.tf-errors{border:1px solid #d08a80;background:#f7e7e2;border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:13px;color:#a3382e}
.tf-errors ul{margin:4px 0 0;padding-left:18px}
.tf-field{display:block;margin-bottom:12px;font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.tf-field input,.tf-field select,.tf-field textarea{display:block;width:100%;margin-top:5px;padding:9px 11px;background:#fff;border:1px solid var(--line-2);border-radius:9px;color:var(--ink);font-family:var(--sans);font-size:14px}
.tf-field textarea{resize:vertical}
.tf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tf-section{font-family:var(--serif);font-size:16px;margin:18px 0 4px;color:var(--ink)}
.tf-hint{font-family:var(--sans);font-size:12px;color:var(--muted);margin:0 0 8px}
.tf-date{display:flex;gap:8px;margin-top:5px}
.tf-date select{flex:1;width:auto;min-width:0;padding:10px 8px;background:#fff;border:1px solid var(--line-2);border-radius:9px;color:var(--ink);font-family:var(--sans);font-size:14px}
/* PC 날짜: 달력 기간 선택기 */
.cal{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px 8px;margin-top:6px}
.cal__body{display:flex;align-items:center;gap:2px}
.cal__months{flex:1;min-width:0;display:flex;gap:16px}
.cal__month{flex:1;min-width:0}
.cal__chips{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.cal__chip{padding:5px 8px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}
.cal__chip.is-set{border-color:var(--ink);color:var(--ink)}
.cal__chip b{font-weight:600}
.cal__arrow{color:var(--faint)}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal__title{font-family:var(--serif);font-size:14.5px;color:var(--ink);text-align:center;margin-bottom:5px}
.cal__nav{width:28px;height:28px;padding:0;border:1px solid var(--line-2);background:#fff;border-radius:8px;cursor:pointer;font-size:15px;color:var(--ink);line-height:1}
.cal__nav:hover{background:var(--sel)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal__wd{text-align:center;font-family:var(--sans);font-size:10.5px;color:var(--muted);padding:3px 0}
.cal__wd--sun{color:#c0564a}
.cal__day{aspect-ratio:1/1;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:12.5px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.cal__day.is-blank{visibility:hidden;cursor:default}
.cal__day:hover:not(.is-blank):not(.is-start):not(.is-end){background:var(--sel);border-radius:8px}
.cal__day.is-today{text-decoration:underline}
.cal__day.in-range{background:var(--sel)}
.cal__day.is-start,.cal__day.is-end{background:var(--ink);color:var(--bg);font-weight:600}
.cal__day.is-start{border-radius:8px 0 0 8px}
.cal__day.is-end{border-radius:0 8px 8px 0}
.cal__day.is-start.is-end{border-radius:8px}
.tf-wheels{display:flex;gap:8px;margin-top:6px}
.wheel{position:relative;flex:1;min-width:0;height:180px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff}
.wheel__scroll{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;perspective:800px;scrollbar-width:none}
.wheel__scroll::-webkit-scrollbar{display:none}
.wheel__list{transform-style:preserve-3d;padding-block:72px}
.wheel__item{height:36px;line-height:36px;text-align:center;scroll-snap-align:center;font-family:var(--sans);font-size:16px;color:var(--ink);backface-visibility:hidden;will-change:transform,opacity;cursor:pointer}
.wheel__band{position:absolute;left:6px;right:6px;top:50%;height:36px;transform:translateY(-50%);pointer-events:none;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:rgba(232,163,61,.10);border-radius:6px}
.ps-search{display:flex;gap:8px;margin:8px 0 10px}
.ps-search input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line-2);border-radius:9px;font-family:var(--sans);font-size:14px;background:#fff}
.ps-search .btn-primary{padding:11px 18px}
.ps-results{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ps-item{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-family:var(--sans)}
.ps-item:hover{border-color:var(--ink);background:var(--sel)}
.ps-item__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ps-item__main{font-size:14.5px;font-weight:500;color:var(--ink)}
.ps-item__cat{font-size:11px;color:var(--muted);font-weight:400;margin-left:6px}
.ps-item__addr{font-size:12px;color:var(--muted)}
.ps-item__add{flex:0 0 auto;font-size:12px;color:var(--muted);border:1px solid var(--line-2);border-radius:8px;padding:5px 9px;white-space:nowrap}
.ps-item.is-added{opacity:.7;cursor:default}
.ps-item.is-added:hover{border-color:var(--line);background:#fff}
.ps-item.is-added .ps-item__add{color:#2A9D8F;border-color:#2A9D8F}
.ps-empty{font-size:13px;color:var(--muted);padding:8px 2px}
.er-rows{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.er-row{border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:8px}
.er-row.is-focus{border-color:#E8A33D;box-shadow:0 0 0 1px #E8A33D inset}
.er-row__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.er-row__no{width:24px;height:24px;border-radius:50%;background:var(--sel);display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:12px;flex:0 0 auto}
.er-genre{padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-family:var(--sans);font-size:13px}
.er-row__del{margin-left:auto;border:1px solid #e2b3ac;background:none;color:#c0564a;border-radius:8px;padding:6px 10px;cursor:pointer;font-family:var(--sans);font-size:12.5px}
.er-row__del:hover{background:#f7e7e2}
.er-name{padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font-family:var(--sans);font-size:14px}
.er-addr{font-family:var(--sans);font-size:12px;color:var(--muted)}
.er-row__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;color:var(--muted)}
.er-row__meta select{padding:5px 8px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-family:var(--sans)}
/* 별점: 별 5개 드래그로 채우기(0.5 단위) */
.er-rate{display:flex;align-items:center;gap:10px}
.er-rate__label{font-family:var(--sans);font-size:13px;color:var(--muted)}
.stars{position:relative;display:inline-block;font-size:26px;line-height:1;cursor:pointer;user-select:none;touch-action:none;color:#d9cfb6}
.stars__base{display:block}
.stars__fill{position:absolute;top:0;left:0;width:0;overflow:hidden;white-space:nowrap;color:#E8A33D;pointer-events:none}
.er-content{padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font-family:var(--sans);font-size:13px;resize:vertical}
.btn-primary{background:var(--ink);color:var(--bg);border:none;border-radius:10px;padding:10px 20px;cursor:pointer;font-family:var(--sans);font-size:14px}
.btn-ghost{background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:14px}
.btn-ghost:hover{color:var(--ink)}
.btn-danger{background:none;border:1px solid #e2b3ac;color:#c0564a;border-radius:10px;padding:9px 14px;cursor:pointer;font-family:var(--sans);font-size:13px}
.btn-danger:hover{background:#f7e7e2}
.foot-spacer{flex:1}

/* ===== Main — 커서 리빌 화면 ==============================================
   아이보리 위에서 커서 원 안쪽만 배경 사진이 드러난다.
   · 사진 : 흑백 원본 위에 컬러 사본을 겹치고 컬러 쪽만 원으로 마스킹
   · 글자 : background-clip:text 로 "평소 색 + 원 안쪽 색"을 글리프에 클립
   mix-blend-mode 는 스태킹 컨텍스트에 따라 조용히 결과가 달라져 쓰지 않는다.
   영문은 이 화면만 Inter(--sans)를 쓴다. (다른 메뉴는 기존 세리프 유지)
   ========================================================================== */
.mainx{
  /* JS 가 갱신하는 커서 좌표·반지름·노출도 */
  --mx:-999px; --my:-999px; --r:230px; --reveal:0; --scrim:0;
}

/* --- 진입 게이트 ---
   사진 디코딩·폰트 로딩으로 첫 화면이 튀는 구간을 덮었다가 양쪽으로 열린다.
   기본값은 "JS 없이도 2.2초 뒤 저절로 열림"(애니메이션). JS 가 살아 있으면
   .is-live 로 그 fallback 을 끄고, 준비되는 즉시 .is-open 으로 바로 연다.
   두 경로가 서로 다른 애니메이션 이름을 쓰므로 중간에 튀지 않는다. */
.gate{position:fixed;inset:0;z-index:120;pointer-events:none;--gate-ease:cubic-bezier(.72,0,.18,1)}
.gate.is-done{display:none}
.gate__leaf{position:absolute;top:0;bottom:0;width:50.5%;background:var(--bg);will-change:transform}
.gate__leaf--l{left:0;box-shadow:2px 0 24px rgba(23,21,18,.10);
  animation:gate-wait-l 1s var(--gate-ease) 2.2s forwards}
.gate__leaf--r{right:0;box-shadow:-2px 0 24px rgba(23,21,18,.10);
  animation:gate-wait-r 1s var(--gate-ease) 2.2s forwards}
/* JS 가 살아 있으면 자동 열림을 끈다 */
.gate.is-live .gate__leaf{animation:none}
/* 준비 완료 → 즉시 연다 (다른 이름이라 0 부터 새로 시작) */
.gate.is-open .gate__leaf--l{animation:gate-open-l 1s var(--gate-ease) forwards}
.gate.is-open .gate__leaf--r{animation:gate-open-r 1s var(--gate-ease) forwards}
@keyframes gate-wait-l{to{transform:translate3d(-100%,0,0)}}
@keyframes gate-wait-r{to{transform:translate3d(100%,0,0)}}
@keyframes gate-open-l{to{transform:translate3d(-100%,0,0)}}
@keyframes gate-open-r{to{transform:translate3d(100%,0,0)}}

.gate__core{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;
  align-items:center;gap:18px;transition:opacity .32s ease}
.gate.is-open .gate__core{opacity:0}
.gate__mark{width:64px;height:64px;animation:gate-bob 1.6s ease-in-out infinite}
@keyframes gate-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.gate__bar{width:132px;height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.gate__bar i{display:block;height:100%;width:0;background:var(--brand);
  animation:gate-fill 2.2s ease-out forwards}
/* JS 가 있으면 실제 진행률로 채운다 */
.gate.is-live .gate__bar i{animation:none;transition:width .25s ease}
@keyframes gate-fill{to{width:100%}}

@media (prefers-reduced-motion:reduce){
  .gate__leaf--l,.gate__leaf--r,.gate.is-open .gate__leaf--l,.gate.is-open .gate__leaf--r{
    animation-duration:.2s;animation-delay:0s}
  .gate__mark{animation:none}
}
.reveal{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:var(--reveal);transition:opacity .4s ease;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
     #000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
     #000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.reveal__photo{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
/* 밝은 사진에서 흰 글씨가 묻히면 관리자에서 이 농도를 올린다. */
.reveal__scrim{position:absolute;inset:0;background:rgba(0,0,0,var(--scrim))}

.lit{
  color:transparent;
  background-image:
    radial-gradient(circle var(--r) at var(--lx,-999px) var(--ly,-999px),
      var(--lit-on) 0%,var(--lit-on) 52%,transparent 78%),
    linear-gradient(var(--lit-off),var(--lit-off));
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
}

/* 페이지는 뷰포트에 고정되고 사진 컬럼만 스크롤한다. */
.mainx{position:relative;z-index:3;height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));
  display:grid;grid-template-columns:1.5fr minmax(300px,470px) .78fr;
  gap:0 clamp(20px,3.4vw,56px);padding-inline:clamp(18px,3vw,30px);overflow:hidden;
  font-family:var(--sans)}

.hero{grid-column:1;align-self:center;padding-bottom:6vh}
.hero__eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;
  --lit-off:#6d675c;--lit-on:#F1F3F8}
.hero__title{font-weight:800;font-size:clamp(40px,6.6vw,92px);line-height:.94;letter-spacing:-.035em;
  margin:0;text-transform:lowercase;--lit-off:#171512;--lit-on:#FFFFFF}
.hero__sub{font-size:clamp(15px,1.5vw,20px);line-height:1.5;margin:18px 0 0;max-width:19em;
  --lit-off:#3a352d;--lit-on:#F1F3F8}
.hero__meta{margin-top:clamp(24px,4.5vh,48px);display:flex;gap:34px;flex-wrap:wrap}
.hero__meta dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 5px;
  --lit-off:#a49d8e;--lit-on:#E2E6EF}
.hero__meta dd{margin:0;font-size:13px;--lit-off:#6d675c;--lit-on:#F1F3F8}

.rail{grid-column:2;height:100%;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail__empty{color:var(--muted);font-size:15px;padding:24px 0}
.shot{position:relative;display:block;width:100%;margin:0 0 clamp(18px,3vh,34px);border:0;padding:0;
  overflow:hidden;background:#EDE8D9;cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:cover}
.shot__bw{filter:grayscale(1) contrast(1.06) brightness(1.02)}
.shot__color{position:absolute;inset:0;opacity:var(--reveal);transition:opacity .4s ease;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--lx,-999px) var(--ly,-999px),
     #000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--lx,-999px) var(--ly,-999px),
     #000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.shot__cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;text-align:left;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.55);opacity:0;transition:opacity .3s ease}
.shot:hover .shot__cap,.shot:focus-visible .shot__cap{opacity:1}

.index{grid-column:3;align-self:center;text-align:right}
.index__t{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;
  --lit-off:#a49d8e;--lit-on:#E2E6EF}
.index a{display:block;font-size:13.5px;font-weight:500;padding:5px 0;transition:opacity .2s ease;
  --lit-off:#171512;--lit-on:#FFFFFF}
.index a:hover{opacity:.55}
.index__more{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;
  display:inline-block;padding-bottom:2px;border-bottom:1px solid var(--line-2);
  --lit-off:#6d675c;--lit-on:#F1F3F8}

.foot{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;
  gap:20px;padding:14px clamp(18px,3vw,30px);font-family:var(--sans);font-size:11px;pointer-events:none}
.foot span{--lit-off:#6d675c;--lit-on:#F1F3F8}

/* 좁은 데스크톱: 우측 인덱스를 접고 2단으로 (한글 제목이 눌려 보이는 폭 방지) */
@media (max-width:1080px){
  .mainx{grid-template-columns:1.2fr minmax(280px,440px)}
  .index{display:none}
}

/* ===== 반응형 ============================================================= */
@media (max-width:860px){
  :root{--header-h:58px}
  /* 상단 가로 nav → 우측 드로어 + 햄버거로 전환, Chat 은 FAB 로 */
  .nav{display:none}
  .hamburger{display:flex}
  .drawer{display:flex}
  .drawer-backdrop{display:block}
  .chat-fab{display:flex}
  /* 모바일: 채팅 모달 = 하단 시트(이전 스타일 — 아래에서 올라오는 86% 높이) */
  /* max-height:100% — 키보드가 오버레이(#chatModal=보이는 영역)를 줄이면 카드도 절대 넘지
     않게 캡을 씌워, 하단 입력창이 항상 보이는 영역 안(=키보드 위)에 남도록 한다. */
  .chat-modal__card{top:auto;bottom:0;left:0;transform:translateY(100%);opacity:1;
    width:100vw;max-width:none;height:86vh;height:86dvh;max-height:100%;border-radius:18px 18px 0 0;
    box-shadow:0 -14px 40px rgba(23,21,18,.22)}
  .chat-modal.is-shown .chat-modal__card{transform:translateY(0)}
  .split{grid-template-columns:1fr;height:auto}
  .col{height:auto;overflow:visible;border-right:none;border-bottom:1px solid var(--line)}
  .col--flush{height:auto}
  /* Blog: 모바일 글 목록 페이저 노출 */
  .blog-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;padding-top:18px;margin-top:6px;border-top:1px solid var(--line)}
  /* Main: 모바일에서 우측 이미지 갤러리를 상단으로 (col--rail 은 Main 전용) */
  .col--rail{height:70vh;overflow:hidden;order:-1}
  /* 전체 모음 그리드: 모바일은 2열로 작게 */
  .gcoll{padding:56px 14px 32px}
  .gcoll__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .chat{height:78vh}
  .logo__name{font-size:19px}
  .logo{gap:8px}
  .logo__mark{width:31px;height:31px}
  /* Main 커서 리빌: 모바일은 히어로 위 / 사진 아래 두 단, 사진 컬럼만 스크롤 */
  .mainx{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:14px 0;padding-bottom:46px}
  .hero{align-self:start;padding-top:clamp(14px,2.5vh,28px);padding-bottom:0}
  .hero__meta{margin-top:16px;gap:22px}
  .rail{grid-column:1;min-height:0}
  .index{display:none}
  /* Trip: 모바일 — 상(목록)·하(지도) 두 섹션 각각 독립 스크롤, 3:2 비율 */
  .split--trip{grid-template-columns:1fr;grid-template-rows:3fr 2fr;height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h))}
  .split--trip .col{height:auto;min-height:0;overflow:hidden}
  .split--trip .col--left{border-right:none;border-bottom:1px solid var(--line-2)}
  .split--trip .col--map{overflow:hidden}
  .trip-legend{font-size:11px;gap:10px;padding:7px 10px}
  /* Trip 편집기 모달 = 하단 바텀시트 */
  .trip-modal__card{top:auto;bottom:0;left:0;transform:translateY(100%);width:100vw;max-width:none;max-height:92vh;border-radius:18px 18px 0 0}
  .trip-modal.is-shown .trip-modal__card{transform:translateY(0)}
}

/* ===== 한글 라벨 자간 정상화 (파일 끝 = 개별 규칙보다 우선) =================
   영문 대문자용 넓은 letter-spacing 이 한글에선 어색하게 벌어지므로, 한글이 섞이는
   라벨의 자간을 최소화한다. 순영문 라벨(nav__link·viewmore·logo__sub)은 그대로 둔다. */
.col-head h2,.post-row__meta,.blog-item__meta,.article__tag,.comment__who,
.chat__head h2,.chat__head p,.field label,.stub__msg,.btn,.eyebrow,
.pmenu__item span,.pcard__role,.pcard__link,.blog-pager__btn,.blog-pager__num{
  letter-spacing:.01em;
}