* { box-sizing: border-box; }
/* 한국어는 어절 중간에서 끊기면 읽기 나쁘다. 단 긴 주소가 넘치므로
   overflow-wrap과 반드시 함께 (2026-07-29 리서치). */
body, p, li, td, th, h1, h2, h3, summary, label, button {
  word-break: keep-all; overflow-wrap: break-word; }
/* 한지 결: 종이 그레인(feTurbulence) + 결 방향 섬유 두 겹.
   바탕색은 그대로 두고 결만 얹는다 (2026-07-29 피드백: 배경이 허전함). */
body { font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  background-color: #faf9f6; color: #191919; margin: 0; line-height: 1.75;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)' opacity='0.085'/%3E%3C/svg%3E"),
    repeating-linear-gradient(94deg, transparent 0 6px,
      rgba(122, 110, 84, .026) 6px 7px),
    repeating-linear-gradient(3deg, transparent 0 11px,
      rgba(122, 110, 84, .019) 11px 12px);
  background-attachment: fixed; }
/* 왼쪽 고정 메뉴 (2026-07-29) — 권장치대로 폭 250px, 항목 높이 44px.
   좁은 화면에서는 숨기고 상단 메뉴가 대신한다. */
/* 모바일 서랍 메뉴 (2026-07-30) */
/* 햄버거 — 좁은 화면에서만, **본문 맨 위 왼쪽**에 (2026-07-30 요청).
   흐름 안에 두어 본문을 가리지 않는다(고정 배치는 첫 줄을 덮는다). */
.burger { display: none; align-items: center; gap: .35rem;
  font: inherit; font-size: .9rem; background: #faf9f6; cursor: pointer;
  border: 1px solid #cfc9ba; border-radius: 999px;
  padding: .4rem .8rem; color: #191919; margin: 0; }
/* 첫 화면은 상단 메뉴가 없어 단추가 홀로 선다 — 그때만 아래 여백 */
.burger.bsolo { margin: 0 0 1.1rem; }
.burger .bars { display: inline-block; width: 15px; }
.burger .bars i { display: block; height: 2px; background: #191919;
  margin: 3px 0; }
.scrim { display: none; position: fixed; inset: 0; z-index: 20;
  background: rgba(28,28,26,.38); }
.sclose { display: none; }
@media (max-width: 1080px) { .sclose { display: flex; } }
/* 2026-07-30: 항목이 늘어 로그아웃이 한 화면에 안 들어왔다.
   높이 44px은 손가락 기준 권장치인데 이 메뉴는 마우스로 쓰는 자리라
   36px로 줄이고 그룹 간격도 좁혔다. 모바일에서는 어차피 숨는다. */
.side { position: fixed; left: 0; top: 0; bottom: 0; width: 250px;
  padding: 1.5rem 1.1rem 1rem; overflow-y: auto; z-index: 2;
  border-right: 1px solid #e3ddcc; background: rgba(250, 249, 246, .82);
  backdrop-filter: blur(2px); }
.sgroup { margin-bottom: .9rem; }
.sgroup h3 { font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif;
  font-size: .66rem; letter-spacing: .16em; color: #6b6659;
  margin: 0 0 .2rem .8rem; font-weight: 700; }
.side a { display: flex; align-items: center; min-height: 36px;
  padding: 0 .8rem; border-radius: 8px; color: #191919;
  text-decoration: none; font-size: .92rem; }
.side a:hover { background: #f0ece1; }
.side a[aria-current="page"] { background: #191919; color: #faf9f6;
  font-weight: 700; }
.swhere { font-size: .76rem; color: #1c5cab; margin-left: .35rem; }
/* 로그인 칸은 맨 아래에 붙여 둔다 — 스크롤해서 찾게 하지 않는다 */
.sme-box { border-top: 1px dotted #c9c4b8; padding-top: .6rem;
  margin-top: .3rem; margin-bottom: 0; }
.sme { font-size: .78rem; color: #6b6659; margin: .15rem .8rem; }
.slink { font-size: .86rem; }
.side a.slink { min-height: 32px; }
/* 본문 열의 자리.
   1차(2026-07-29): 사이드바에 붙여 놓으니 왼쪽으로 기울어 보여서 "남은 폭
   안에서 가운데"로 옮겼다. 2차 지적(같은 날): 그건 **사이드바를 뺀 화면**
   기준이라, 화면 전체로 보면 사이드바 폭의 절반(125px)만큼 오른쪽으로
   밀려 있었다. → **화면 전체 기준으로 가운데.**
   `50vw - 열폭/2`가 그 자리이고, 그 값이 사이드바보다 작아지는 좁은
   화면에서는 사이드바 옆으로 붙인다(밑으로 들어가면 안 되므로 max). */
main.wrap.side-on { padding-left: calc(250px + 1.4rem); }
@media (min-width: 1081px) {
  /* 50vw가 아니라 50% — vw는 스크롤바를 포함해서 그만큼(약 15px) 오른쪽으로
     밀린다. 퍼센트는 body 내용 폭 기준이라 정확히 가운데가 된다. */
  main.wrap.side-on {
    max-width: none;
    padding-left: max(calc(250px + 1.4rem), calc(50% - 360px));
    padding-right: 1.4rem; }
  main.wrap.side-on > * { max-width: 720px; }
  /* 랜딩(1020px 열)은 화면 전체 가운데가 물리적으로 불가능하다 —
     1020 + 사이드바 250이면 여백이 거의 없다. 그래서 **남은 폭 안에서
     좌우를 같게** 둔다: 양쪽 여백 = (화면 - 사이드바 - 열)/2.
     안 그러면 사이드바에 22px까지 붙는다 (2026-07-29 실측). */
  main.wrap.side-on.wide {
    max-width: none;
    padding-left: max(calc(250px + 1.4rem),
                      calc((100% + 250px - 1020px) / 2));
    padding-right: max(1.4rem, calc((100% - 250px - 1020px) / 2)); }
  main.wrap.side-on.wide > * { max-width: 1020px; }
}
@media (max-width: 1080px) {
  /* 모바일: 사이드바를 왼쪽에서 밀어 넣는 서랍으로 (2026-07-30 요청).
     기본은 숨김이고, 상단 햄버거를 누르면 열린다. JS가 꺼져 있으면
     서랍은 안 열리지만 상단 메뉴와 푸터로 모든 화면에 갈 수 있다. */
  .side { display: block; transform: translateX(-105%);
    transition: transform .22s ease; width: 82vw; max-width: 300px;
    box-shadow: 0 0 0 rgba(0,0,0,0); z-index: 30; }
  body.drawer .side { transform: none;
    box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .burger { display: inline-flex; }
  body.drawer .scrim { display: block; }
  main.wrap.side-on { padding-left: 1.4rem; }
}
/* 여백에 세로로 옅게 — 광고가 들어오면 가려도 되는 자리.
   사이드바가 있는 폭에서는 왼쪽 것을 숨긴다 (겹침 방지) */
body:has(.side)::before { display: none; }
body::before, body::after {
  content: "후기의 후기 · 리뷰 신뢰도 판독";
  position: fixed; top: 4.5rem; writing-mode: vertical-rl;
  font-size: .8rem; letter-spacing: .55em; color: rgba(25, 25, 25, .075);
  pointer-events: none; user-select: none; z-index: 0; }
/* 양쪽 다 위에서 아래로 — 180도 돌리면 글자가 뒤집힌다 (실측 확인) */
body::before { left: 1.6rem; }
body::after { right: 1.6rem; }
@media (max-width: 1180px) {
  body::before, body::after { display: none; }
}
main.wrap { position: relative; z-index: 1; }
main.wrap { max-width: 720px; margin: 0 auto; padding: 2.2rem 1.4rem 4rem; }
main.wrap.wide { max-width: 1020px; }
.rule { border-top: 3px solid #191919; margin-bottom: .35rem; }
.rule2 { border-top: 1px solid #191919; margin-bottom: 2rem; }
.topnav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 2.4rem; }
/* 상단 워드마크. 작은 글자에 자간만 넓으면 두 글자가 흩어져 보인다
   (2026-07-29 지적) — 키우고 자간을 좁혀 한 낱말로 읽히게 한다. */
.brand { letter-spacing: .14em; font-size: 1.95rem; font-weight: 900;
  margin-right: auto; color: #191919; text-decoration: none;
  line-height: 1.15; }
.brand-lg { letter-spacing: .45em; font-size: 2.6rem; font-weight: 900;
  margin-bottom: 2rem; }
.masthead { text-align: center; margin-bottom: 2.4rem;
  position: relative; }
.stamp { position: absolute; right: -4px; top: 1.7rem; width: 94px;
  height: 94px; transform: rotate(8deg); opacity: .85; }
.orn { text-align: center; color: #b9b2a1; margin: 1.9rem 0 0;
  letter-spacing: .6em; font-size: .9rem; }
.orn + h2 { margin-top: .5rem; }
.rank { display: inline-flex; width: 1.35rem; height: 1.35rem;
  border: 1.5px solid #191919; border-radius: 50%; align-items: center;
  justify-content: center; font-size: .76rem; margin-right: .5rem;
  font-family: Pretendard, sans-serif; font-weight: 700; }
.picon { display: block; margin-bottom: .55rem; }
.spot { display: block; margin: 1.2rem 0 .4rem; }
.mast-name { display: block; font-size: 3.1rem; font-weight: 900;
  letter-spacing: -.02em; line-height: 1.15; color: #191919;
  text-decoration: none; }
.mast-sub { font-size: .82rem; letter-spacing: .38em; color: #55503f;
  margin-top: .3rem; }
.tag { font-size: 2.1rem; font-weight: 700; margin: .4rem 0 .7rem;
  line-height: 1.35; }
.deck { color: #444; max-width: 34em; margin-bottom: 1.6rem;
  font-size: 1.02rem; }
.searchbox { border: 1.5px solid #191919; border-radius: 12px;
  padding: 1.2rem 1.3rem 1.3rem; background: #fffdf8;
  margin-bottom: 1.6rem; }
.searchbox .modetabs { margin-bottom: .9rem; }
#linkTable td:first-child, #linkTable th { white-space: nowrap; }
#linkTable td:nth-child(3), #linkTable td:nth-child(4) {
  white-space: nowrap; }
/* 협찬 고지는 사실 표기일 뿐 흠이 아니다 — 색으로 도드라지게 하지 않는다 */
#linkTable td.spon { color: #55503f; font-size: .86rem; }
/* "가보셨으면 한마디" 권유 (2026-07-30 요청) — 자료가 적을 때는 위쪽에
   크게, 충분할 때는 요약 아래 한 줄로. 색으로 겁주지 않는다: 권유이지
   경고가 아니다. */
.askbox { border: 1px solid #dcd6c6; border-left: 3px solid #191919;
  border-radius: 10px; background: #fffdf6; padding: .7rem 1rem;
  margin: 1.2rem 0; }
.askbox p { margin: 0; }
.askbox p + p { margin-top: .4rem; }
.askbox-lead { padding: 1rem 1.1rem; margin: 1.4rem 0; }
.askhead { font-size: 1.05rem; font-weight: 700; }
#ureviews { margin-top: 2.6rem; border-top: 2px solid #191919;
  padding-top: .4rem; }
/* 내 주변 — 오른쪽에서 밀려나오는 지도 패널 (2026-07-30 요청) */
.nearmap { background:#fffdf8; border:1px solid #e4e1da; border-radius:10px;
  padding:12px 14px; margin:1.2rem 0; }
.nearmap h2 { margin:.1rem 0 .55rem; font-size:1rem;
  font-family:Pretendard,'Apple SD Gothic Neo',sans-serif;
  letter-spacing:.02em; }
.nearmap .small { margin:.5rem 0 0; line-height:1.5; }
/* 타일 자리. 타일이 안 뜨어도 이 바탕색 위에 핀이 그대로 남는다. */
.mbox { position:relative; overflow:hidden; border-radius:8px;
  background:#e8ebe4; max-width:100%; }
.mtile { position:absolute; display:block; border:0; }
/* 핀은 전부 같은 색·같은 크기 (절대 규칙 1) */
.mpin { position:absolute; width:24px; height:24px; margin:-24px 0 0 -12px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:#1c5cab; border:2px solid #fff; text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.35); }
.mpin span { display:block; transform:rotate(45deg); color:#fff;
  font:700 11px/20px Pretendard,sans-serif; text-align:center; }
.mpin:hover, .mpin:focus-visible { background:#0d3f7d; z-index:2; }
.mme { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:#c2451d; border:2.5px solid #fff;
  box-shadow:0 0 0 4px rgba(194,69,29,.22); }
/* 목록 한 줄 — 이름 줄과 설명 줄로 나눠 숨 쉴 자리를 준다 */
.nrow { display:flex; gap:.5rem; align-items:baseline;
  padding:.5rem 0; border-bottom:1px solid #ece8de; }
.nbody { display:block; }
.nname { font-size:1.02rem; font-weight:600; }
.ndist { margin-left:.5rem; font-size:.82rem; color:#55503f;
  white-space:nowrap; }
.nmeta { display:block; margin-top:.15rem; font-size:.86rem;
  color:#6b6659; line-height:1.5; }
.nnum { color:#8a8577; min-width:1.4rem; text-align:right;
  font-size:.86rem; flex:0 0 auto; }
@media (min-width:1240px) {
  /* 본문 열을 **남은 폭 안에서 가운데**로 — 패널이 열리면 글이 왼쪽으로
     밀리고 왼쪽 탭과의 간격이 줄어든다 (2026-07-30 요청 그대로).
     `50% - 360px`(화면 전체 가운데) 규칙을 여기서만 덮어쓴다. */
  main.wrap.side-on:has(.nearmap) {
    padding-left:calc(250px + 1.4rem); padding-right:412px; }
  main.wrap.side-on:has(.nearmap) > * {
    max-width:720px; margin-left:auto; margin-right:auto; }
  .nearmap { position:fixed; top:88px; right:20px; width:380px; margin:0;
    z-index:3; animation:nslide .42s cubic-bezier(.22,.68,.3,1); }
}
@media (max-width:1239px) {
  /* 좁은 화면에서는 목록 위에 그대로 눕는다 */
  .mbox { margin:0 auto; }
}
@keyframes nslide { from { transform:translateX(46px); opacity:0; }
  to { transform:none; opacity:1; } }
/* 게시판꼴 표 (맛집 공유 갤러리·건의함) */
.tblwrap { overflow-x:auto; }
table.bd { width:100%; border-collapse:collapse; margin:.8rem 0; }
table.bd th, table.bd td { padding:.5rem .55rem; text-align:left;
  border-bottom:1px solid #e4e1da; font-size:.95rem; vertical-align:top; }
table.bd th { color:#6b6659; font-weight:600; font-size:.85rem; }
.tlist { list-style:none; padding:0; }
.tlist li { border-bottom:1px solid #e8e4da; padding:.55rem 0; }
.exlist { list-style:none; padding:0; }
.exlist li { border-bottom:1px solid #e8e4da; padding:.6rem 0; }
/* 게시판 글·댓글 (2026-07-30) */
.tpbody { margin:1rem 0 1.2rem; line-height:1.85; white-space:normal; }
.tpacts { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  border-top:1px dotted #c9c4b8; border-bottom:1px dotted #c9c4b8;
  padding:.5rem 0; margin:1.2rem 0; }
.coms { list-style:none; padding:0; margin:.6rem 0 1.4rem; }
.coms li { border-bottom:1px solid #e8e4da; padding:.7rem 0; }
.coms li > div { margin:.25rem 0 .3rem; line-height:1.7; }
.inl { display:inline; }
.linkish { background:none; border:0; padding:0; font:inherit;
  color:#2a4d80; text-decoration:underline; cursor:pointer; }
.noticebar { border:1px solid #dcd6c6; background:#fffdf6;
  border-radius:8px; padding:.55rem .8rem; margin:0 0 1.2rem;
  font-size:.92rem; }
.noticebar a { color:#191919; }
.exbox { border:1px dashed #c9c4b8; border-radius:10px; padding:.9rem 1rem;
  margin:1rem 0; background:#fcfbf7; }
.ovline { margin:.2rem 0 .1rem; }
/* 월별 그래프 — 좁은 화면에서는 그래프만 좌우로 움직인다 */
.chartwrap { overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; }
.chartwrap svg { min-width:340px; }
/* 자주 묻는 질문 목록 */
.glist { list-style:none; padding:0; }
.glist li { border-bottom:1px solid #e4e1da; padding:.75rem 0; }
.glink { font-size:1.05rem; }
/* 광고 자리 — 랜딩만. 본문과 확실히 구분되게 (오인 금지) */
.adbox { margin:2.5rem 0 .5rem; padding-top:.8rem;
  border-top:1px solid #e4e1da; }
.adlabel { margin:0 0 .3rem; letter-spacing:.08em; }
/* 쪽지함 */
.mlist { list-style:none; padding:0; }
.mlist li { border-bottom:1px solid #e4e1da; padding:.7rem 0; }
.mnew { background:#1c5cab; color:#fff; border-radius:999px;
  font-size:.72rem; padding:.1rem .45rem; margin-left:.3rem; }
.ytl summary { cursor:pointer; color:#1c5cab; font-size:.9rem; }

/* 찜하기 — 눈에 띄되 차분하게 (적색·느낌표 금지) */
.wbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: .9rem 0 1.2rem; }
.wbtn { padding: .5rem 1.1rem; font-size: .9rem; border-radius: 999px;
  border: 1.5px solid #191919; background: #fffdf8; color: #191919;
  cursor: pointer; font-family: inherit; font-weight: 700; }
.wbtn:hover { background: #eef3fa; }
.wbtn.on { background: #191919; color: #fffdf8; }
.wdelta { border: 1px solid #c9c4b8; border-left: 3px solid #191919;
  background: #fbfaf5; padding: .8rem 1.1rem .5rem; margin: 0 0 1.4rem;
  border-radius: 4px; }
.wdelta h2 { margin: 0 0 .4rem; font-size: .95rem; letter-spacing: .12em; }
.wdelta ul { margin: 0 0 .4rem; padding-left: 1.2rem; }
.wsince { margin: -.5rem 0 1.2rem; }
/* 업체 반론 — 우리 문장과 확실히 구분되게, 다만 차분하게 (적색 금지) */
.reb { margin: 1rem 0; padding: .8rem 1.2rem; border-left: 3px solid #b9b2a1;
  background: #f7f5ee; border-radius: 4px; }
.reb p { margin: 0 0 .4rem; white-space: pre-wrap; }
.reb footer { color: #6b6659; }
.rebform { margin: 1.2rem 0 2rem; }
.rebform label { font-size: .88rem; color: #55503f; }
.rebform input[type=text] { width: min(100%, 420px); }
.rebform textarea { width: 100%; max-width: 620px; font: inherit;
  font-size: 1rem; padding: .7rem; border: 1.5px solid #c9c4b8;
  border-radius: 10px; resize: vertical; background: #fffdf8; }
/* 이용자가 만든 목록 */
.llist { list-style: none; padding: 0; margin: 1.2rem 0; }
.llist li { padding: .8rem 0; border-bottom: 1px dotted #c9c4b8; }
.lname { font-size: 1.05rem; font-weight: 700; }
.snapline { color: #55503f; }
/* 지역 표기 — 최대 3개 또는 전국 (2026-07-29 요청) */
.rgnbox { border: 1px solid #c9c4b8; border-radius: 10px;
  padding: .5rem .9rem; background: #fbfaf5; margin: 0 0 1.2rem; }
.rgnbox summary { font-size: .92rem; color: #191919; }
.rgns { display: flex; flex-wrap: wrap; gap: .1rem .9rem;
  margin: .5rem 0 .9rem; }
.rgn { font-size: .92rem; white-space: nowrap; min-width: 4.6rem; }
.rgn.wide { min-width: 0; }
.rgnbox button { padding: .45rem 1.1rem; font-size: .88rem;
  border-radius: 999px; }
.sharebar { display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin: .8rem 0 .4rem; }
.sharebox { width: min(100%, 420px); font-size: .92rem;
  border-bottom: 1.5px solid #b9b2a1; }
.sharebar .wbtn { padding: .45rem 1rem; font-size: .88rem; }
.opform select { font: inherit; font-size: .95rem; padding: .5rem .3rem;
  border: 1.5px solid #c9c4b8; border-radius: 8px; background: #fffdf8; }
.wlist { list-style: none; padding: 0; margin: 1rem 0; }
.wlist li { display: flex; align-items: baseline; gap: .6rem;
  flex-wrap: wrap; padding: .75rem 0; border-bottom: 1px dotted #c9c4b8; }
.wlist .wname { font-size: 1.05rem; font-weight: 700; margin-right: auto; }
.wform { display: inline; }
/* 목록의 '그만보기'는 이름보다 커지면 안 된다 — 글씨처럼 보이게 */
.linkish { background: none; border: none; padding: 0; font: inherit;
  font-size: .84rem; font-weight: 400; color: #6b6659;
  text-decoration: underline; cursor: pointer; border-radius: 0; }
.linkish:hover { color: #191919; }
.rform textarea { width: 100%; font: inherit; font-size: 1rem;
  padding: .7rem; border: 1.5px solid #c9c4b8; border-radius: 10px;
  resize: vertical; margin-bottom: .6rem; background: #fffdf8; }
.vchoices { margin: .6rem 0 .5rem; }
.vchoice { margin-right: 1rem; font-size: .92rem; white-space: nowrap; }
.rform button { padding: .55rem 1.4rem; font-size: .9rem;
  border-radius: 999px; }
.ophead { margin: 2.2rem 0 .2rem; font-size: 1rem; letter-spacing: .1em;
  padding-top: 1rem; border-top: 1px dotted #c9c4b8; }
.opform { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.opform input[type=text] { padding: .5rem .3rem; font-size: .95rem; }
.opform input[name=nick] { width: 7rem; }
.opform input[name=body] { flex: 1; min-width: 12rem; }
.opform textarea { flex: 1 1 100%; padding: .55rem .6rem;
  font: inherit; font-size: .95rem; border: 1px solid #d8d4ca;
  border-radius: 8px; resize: vertical; }
/* 내 정보·건의는 한 줄짜리 입력이 아니라 폭을 넉넉히 준다 */
.opform input#nk, .opform input#cf { flex: 1; min-width: 12rem; }
.opform button { padding: .5rem 1.1rem; font-size: .88rem;
  border-radius: 999px; }
.oerr { color: #a8471f; }
.votes { display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .2rem; }
.inline { display: inline; }
.vbtn { font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif;
  font-size: .78rem; border: 1px solid #d8d2c4; border-radius: 999px;
  padding: .12rem .6rem; color: #55503f; background: #fffdf8;
  cursor: pointer; }
.vbtn:hover { border-color: #191919; }
.linkbtn { font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif;
  background: none; border: none; padding: 0; font-size: .82rem;
  color: #6b6659; text-decoration: underline; cursor: pointer; }
.warnbox { border: 1px solid #e3ddcc; background: #f4f1e8;
  border-left: 4px solid #b9b2a1; border-radius: 8px;
  padding: .7rem 1rem; }
.hot { font-size: .72rem; background: #f3f7fd; color: #1c5cab;
  border: 1px solid #cddcf0; border-radius: 999px; padding: .06rem .5rem;
  margin-right: .3rem; font-family: Pretendard, sans-serif; }
.oplist li { border-top: 1px dotted #e0dace; }
.rlist { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.rlist li { border-top: 1px dotted #c9c4b8; padding: .8rem 0;
  line-height: 1.7; }
.vtag { font-size: .74rem; border: 1px solid #b9b2a1; border-radius: 999px;
  padding: .08rem .55rem; margin-right: .35rem; color: #55503f; }
.rcount { font-size: .76rem; color: #1c5cab; border: 1px solid #cddcf0;
  background: #f3f7fd; border-radius: 999px; padding: .04rem .5rem; }
.src { font-size: .74rem; color: #8a8474; border: 1px solid #d8d2c4;
  border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; }
.wherebox { margin: .2rem 0 1.2rem; font-size: .9rem; }
.wherebox label { color: #55503f; margin-right: .3rem; }
.wherebox input { width: 12rem; font-size: .92rem; padding: .3rem .2rem; }
.wherebox button { padding: .35rem .9rem; font-size: .82rem;
  border-radius: 999px; }
.nearbtn { margin-top: .8rem; padding: 0; background: none; border: none;
  color: #1c5cab; font-size: .88rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif; }
.principles { display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem; margin: .7rem 0 1rem; }
.principles div { border-top: 2px solid #191919; padding-top: .6rem;
  font-size: .95rem; line-height: 1.55; }
.steps { margin-bottom: .4rem; }
@media (max-width: 640px) {
  .principles { grid-template-columns: 1fr; gap: .9rem; }
  .mast-name { font-size: 2.3rem; }
  .stamp { display: none; }
}
@media print {
  .topnav, .navsearch, #linkTabs, #pageTabs, .adslot, form {
    display: none; }
  body { background: #fff; }
  main.wrap { max-width: 100%; padding: 0; }
}
.modetabs { margin-bottom: 1.1rem; }
.modetabs button { padding: .45rem 1.2rem; font-size: .9rem;
  background: transparent; color: #191919; border: 1.5px solid #b9b2a1;
  border-radius: 999px; margin-right: .4rem; }
.modetabs button.on { background: #191919; color: #faf9f6;
  border-color: #191919; }
.adslot { margin-top: 2.6rem; border: 1px dashed #c9c4b8; border-radius: 10px;
  min-height: 90px; display: flex; align-items: center;
  justify-content: center; }
/* 처음 오신 분께 한 번만 — 무엇을 보여주고 무엇을 안 하는지.
   JS가 꺼져 있으면 아예 안 뜬다(그래야 닫을 수 없는 창이 안 생긴다). */
/* 덮개는 `main` **밖**에 둔다 (2026-07-29 실측으로 두 번 걸렸다):
   ① main 안에 두면 본문 열 폭 제한(`> *`)에 걸려 1905px 화면에서 덮개가
      1020px로 잘리고 왼쪽으로 치우친다.
   ② main이 `position:relative; z-index:1`로 쌓임 맥락을 만들어, 안에 있는
      z-index 20이 사이드바(z-index 2)를 못 넘는다 — 사이드바만 안 덮인다. */
/* 첫 안내 띠 — 덮지 않고 위쪽에 눕는다. 핸드폰에서 창이 너무 크다는
   지적(2026-07-30)이 있어 팝업을 걷어내고 이것으로 바꿨다. */
.histrip { position: relative; border: 1px solid #dcd6c6;
  border-left: 3px solid #191919; border-radius: 10px;
  background: #fffdf6; padding: .8rem 2.4rem .8rem 1rem;
  margin: 0 0 1.4rem; }
.hihead { margin: 0 0 .4rem; font-weight: 700; font-size: .98rem; }
.hihead span { font-weight: 400; color: #55503f; }
.histeps { margin: 0 0 .5rem; padding-left: 1.2rem; }
.histeps li { margin-bottom: .2rem; line-height: 1.6; }
.histrip .small { margin: 0; }
.histrip button { position: absolute; top: .5rem; right: .5rem;
  background: none; border: 0; font: inherit; font-size: .8rem;
  color: #6b6659; cursor: pointer; padding: .2rem .35rem; }
@media (max-width: 640px) {
  /* 핸드폰에서는 더 눕힌다 — 검색창이 화면 밖으로 밀리면 안 된다 */
  .histrip { padding: .7rem 2.2rem .7rem .9rem; margin-bottom: 1.1rem; }
  .hihead { font-size: .92rem; }
  .hihead span { display: block; font-size: .86rem; }
  .histeps li { font-size: .9rem; }
}
.navsearch { display: flex; align-items: center; gap: .4rem; }
.navsearch input[type=text] { width: 170px; font-size: .92rem;
  padding: .35rem .2rem; }
.navsearch button { padding: .42rem .95rem; font-size: .82rem;
  border-radius: 999px; }
.navbtn { font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif;
  padding: .3rem .95rem; border: 1.5px solid #191919; border-radius: 999px;
  text-decoration: none; color: #191919; font-size: .82rem; }
.navbtn:hover { background: #191919; color: #faf9f6; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.01em;
  margin: .2rem 0 1.1rem; }
h2 { font-size: .85rem; letter-spacing: .25em; color: #1c5cab;
  margin: 2.6rem 0 .9rem; font-weight: 700; }
table { border-collapse: collapse; }
td, th { border: none; border-bottom: 1px dotted #c9c4b8;
  padding: .45rem .9rem; font-size: .95rem; }
th { font-weight: 700; color: #55503f; font-size: .82rem;
  letter-spacing: .12em; }
tr:last-child td { border-bottom: none; }
.small { color: #6b6659; font-size: .85rem; }
.mobile-only { display: none; }
@media (max-width: 1080px) {
  .mobile-only { display: flex; margin-bottom: 1.4rem; gap: .4rem; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; }
.obs { background: #f4f1e8; border: 1px solid #e3ddcc;
  border-left: 4px solid #1c5cab; border-radius: 10px;
  padding: .2rem 1.2rem .7rem; margin-top: 1.4rem; }
.obs h2 { margin-top: .9rem; letter-spacing: .15em; }
.obs li { margin-bottom: .4rem; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px dotted #c9c4b8;
  padding: .4rem 0; }
.rows li > span:first-child { display: inline-flex; align-items: center;
  gap: .55rem; }
.rows svg { flex: none; }
.rows .num { font-variant-numeric: tabular-nums; color: #555; }
.ttabs { margin-bottom: .55rem; display: flex;
  justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: .3rem .8rem; }
.ttabs.sub { margin-bottom: .8rem; }
/* 기간 탭은 순위 **아래**에 (2026-07-29 요청) — 목록을 먼저 보고
   "언제 기준이지?" 할 때 손이 닿는 자리. 위 컨트롤과 구분되게 선을 얹는다. */
.ttabs.pbar { margin-top: .7rem; padding-top: .55rem;
  border-top: 1px solid #ddd7c7; }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 2.2rem; }
/* 급등할 자료가 아니다 — 눈이 편한 속도로 (2026-07-29 피드백) */
@keyframes rowUp {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
.rows li { animation: rowUp 1.1s cubic-bezier(.25, .6, .25, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .rows li { animation: none; }
}
.tcol h3 { font-size: .82rem; letter-spacing: .22em; font-weight: 700;
  margin: 0 0 .35rem; padding-bottom: .3rem; color: #1c5cab;
  border-bottom: 2px solid #191919; font-family: Pretendard,
  'Apple SD Gothic Neo', sans-serif; }
@media (max-width: 760px) {
  .tgrid { grid-template-columns: 1fr; gap: 1.4rem 0; }
}
.up { color: #1c5cab; font-size: .68rem; margin-left: .35rem; }
.dn { color: #6b6659; font-size: .68rem; margin-left: .35rem; }
.src { color: #6b6659; }
.ttab.sm { padding: .16rem .7rem; font-size: .76rem; }
.ttab { font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif;
  display: inline-block; padding: .28rem .95rem; margin: 0 .35rem .4rem 0;
  border: 1.5px solid #b9b2a1; border-radius: 999px; font-size: .84rem;
  font-weight: 600; color: #191919; text-decoration: none; }
.ttab.on { background: #191919; color: #faf9f6; border-color: #191919; }
input[type=text] { font-family: inherit; padding: .8rem .3rem;
  width: min(60%, 340px); font-size: 1.05rem; border: none;
  border-bottom: 2px solid #191919; background: transparent; }
input[type=text]:focus { border-bottom-color: #1c5cab; }
:focus-visible { outline: 2px solid #1c5cab; outline-offset: 2px; }
button { font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif;
  padding: .9rem 1.5rem; font-size: .96rem; font-weight: 700; border: none;
  border-radius: 14px; background: #191919; color: #faf9f6; cursor: pointer; }
button.ghost { background: transparent; color: #191919;
  border: 2px solid #191919; }
a { color: #1c5cab; }
details { margin: .6rem 0; }
details summary { cursor: pointer; color: #55503f; font-size: .85rem; }
#linkTabs button, #pageTabs button { margin: 0 5px 6px 0;
  padding: .3rem .9rem; font-size: .84rem; font-weight: 600;
  background: transparent; color: #191919; border: 1.5px solid #b9b2a1;
  border-radius: 999px; cursor: pointer; }
#linkTabs button.on, #pageTabs button.on { background: #191919;
  color: #faf9f6; border-color: #191919; }
@media (max-width: 640px) {
  main.wrap { padding: 1.4rem 1rem 3rem; }
  .tag { font-size: 1.9rem; }
  input[type=text] { width: 100%; margin-bottom: .6rem; }
}