/* 런트립코리아 독자 시각 토큰. 참고 서비스의 색·로고·화면 자산은 쓰지 않는다. */
:root {
  --rtk-ink: #10261d;
  --rtk-green: #146b45;
  --rtk-green-deep: #0e5c3d;
  --rtk-mint: #e7f5ed;
  --rtk-lime: #c9f079;
  --rtk-cream: #f1f5f2;
  --rtk-amber-ink: #6b5310;
  --rtk-radius: 3px;
  --rtk-shadow: 0 8px 20px rgba(16, 38, 29, .06);

  --ink: #14231c;
  --muted: #66766d;
  --accent: var(--rtk-green);
  --accent-dark: var(--rtk-ink);
  --accent-soft: #eff9f3;
  --line: #dfe7e2;
  --paper: #fff;
  --tap: 44px; /* 상시 조작 요소의 최소 터치 크기 */

  /* 코스 공유 카드뉴스 색: 딥그린·크림·민트 셋뿐이다. */
  --course-green: #0e5c3d;
  --course-cream: #f6f1e4;
  --course-mint: #cfe8dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rtk-cream);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  overflow-wrap: anywhere; /* 긴 URL이 320px에서 가로로 넘치지 않게 */
}

h1, h2, h3, h4 { margin: 0; }
h2 { font-size: 1rem; }
h3 { font-size: 1.05rem; margin: 12px 3px 8px; }
h4 { font-size: .95rem; margin: 18px 0 6px; color: var(--accent); }
p { margin: 0 0 8px; }
a { color: #075f47; }
img { max-width: 100%; }
.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;
}

/* ── 셸: 상단 메뉴 ─────────────────────────────────────────── */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 10px max(16px, calc((100% - 1380px) / 2));
}
.brand {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-height: var(--tap);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.brand b { color: var(--rtk-green); }

.nav { display: flex; gap: 4px; }
.nav [data-page] {
  width: auto;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-weight: 800;
  color: #405047;
  text-decoration: none;
  cursor: pointer;
}
.nav [data-page]:hover { background: var(--accent-soft); }
.nav [data-page].on { background: var(--rtk-mint); color: var(--rtk-green-deep); }
@media (max-width: 499px) {
  .topbar { justify-content: center; padding-inline: 8px; }
  .nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 0; }
  .nav [data-page] { padding-inline: 2px; font-size: .78rem; white-space: nowrap; }
}

.page { width: min(1380px, 100%); margin: 0 auto; padding: 16px; }
.page-view { display: grid; gap: 16px; }
/* hidden 속성이 레이아웃 display에 지지 않게 한다: 숨은 화면은 접근성 트리에서도 빠진다. */
[hidden] { display: none !important; }
.lede { color: var(--muted); margin: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: flex-end;
  justify-content: space-between;
}
.section-head h2 { font-size: 1.4rem; letter-spacing: -.03em; }
.eyebrow--light { color: #a6d68a; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: var(--tap);
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--rtk-green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

/* ── 홈: 접수 중인 대회 카드 ───────────────────────────────── */
/* 최소 폭 280px + 12px 간격은 1280 데스크톱 본문(1224px)에서 정확히 네 열이고,
   좁아지면 열이 하나씩 줄어 320px에서 한 열이 된다. 폭은 auto-fill 하나가 정한다. */
.ecards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.ecard {
  display: grid;
  /* 남는 높이는 제목·요약 줄(3행)이 흡수한다: 태그와 CTA 사이 빈칸이 카드마다 같아진다. */
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px;
  min-width: 0;
}
.ecards .empty { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; }
.ecard-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
/* 날짜는 오른쪽 아래 모서리를 잘라낸 각진 딱지다. */
.ecard .date { width: 58px; order: 2; margin: -24px 0 0 auto; position: relative; z-index: 1; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); }
/* 코스와 접수 상태는 알약이 아니라 네모난 라벨이다(상태 색은 글자가 그대로 말한다). */
.ecard .tags i, .ecard-top .badge { border: 1px solid #aabcb2; border-radius: 0; padding: 3px 8px; }
.ecard .tags i { background: #f7faf8; }
.ecard .media { border-radius: 2px; }
.ecard-open {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: var(--tap);
  padding: 4px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.card-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 8px 행 간격 + 12px = 태그와 공식 접수 CTA 사이 빈칸 20px. */
.ecard > .tags { margin-bottom: 12px; }
/* 공식 접수는 카드 아래 한 줄이다: 면을 비우고 윗 구분선·초록 글씨·바깥 화살표만 남긴다. */
.ecard > .official {
  margin-top: auto;
  width: 100%;
  justify-content: space-between;
  padding: 12px 0 0;
  border-top: 1px solid #b9c8c0;
  border-radius: 0;
  background: none;
  color: var(--rtk-green-deep);
  font-weight: 800;
}
.ecard > .official::after { content: "↗"; font-size: 1.1rem; }

/* 사용권이 확인된 사진과 자체 그래픽이 같은 자리를 쓴다. */
.media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--rtk-radius);
  object-fit: cover;
  background: var(--rtk-mint);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
}
/* KOGL 제3유형은 변경금지다: 잘라내지 않고 원본 비율 그대로 담는다. */
.media--exact { object-fit: contain; background: var(--rtk-ink); }
.media--graphic { padding: 6px; background: hsl(var(--hue) 34% 30%); }
.media--row {
  aspect-ratio: 1;
  border-radius: var(--rtk-radius);
  align-self: start;
  padding: 4px;
  font-size: .48rem;
  line-height: 1.2;
}
.media--row.media--graphic { align-content: center; gap: 2px; }
.media--row.media--graphic > span { width: 100%; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.media--row.media--graphic > span:last-child { word-break: keep-all; overflow-wrap: normal; }
.media--gallery { aspect-ratio: 4 / 3; border-radius: var(--rtk-radius); }
/* 포스터는 대회가 만든 그림이다: 비율을 바꾸지 않고 원본 그대로 담는다. */
.media--poster { aspect-ratio: auto; object-fit: contain; background: var(--rtk-ink); margin: 8px 0; }
/* 홈에서는 실제 포스터와 임시 포스터가 같은 정사각형 액자를 쓴다. 상세의 자연 비율은 바꾸지 않는다. */
.ecard .media--poster { aspect-ratio: 1; object-fit: contain; margin: 0; overflow: hidden; }
.media--art {
  position: relative;
  isolation: isolate;
  align-content: start;
  justify-items: start;
  gap: 5px;
  padding: 16px;
  background: linear-gradient(145deg, hsl(var(--hue) 44% 32%), hsl(var(--accent) 42% 17%));
  color: #fff;
  text-align: left;
}
.media--art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 34%;
  aspect-ratio: 1;
  right: 9%;
  top: 10%;
  border-radius: 50%;
  background: hsl(calc(var(--accent) + 42) 72% 72%);
  opacity: .9;
}
.media--art::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgb(255 255 255 / .55);
  pointer-events: none;
}
.art-scape {
  position: absolute;
  z-index: -1;
  inset: 42% -8% -12%;
  background: linear-gradient(135deg, hsl(var(--hue) 32% 42%), hsl(var(--accent) 38% 12%));
  clip-path: polygon(0 52%, 18% 8%, 38% 48%, 55% 0, 77% 44%, 100% 14%, 100% 100%, 0 100%);
}
.art-kicker { font-size: .58rem; font-weight: 900; letter-spacing: .14em; opacity: .82; }
.art-title {
  max-width: 78%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(.85rem, 1.35vw, 1.15rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.04em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .4);
}
.art-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  max-width: calc(100% - 78px);
  overflow: hidden;
  color: #fff;
  font-size: .62rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 홈: 히어로(외부 이미지 없이 CSS로만 그린다) ──────────── */
.hero { display: grid; gap: 12px; }
.hero-copy {
  display: grid;
  gap: 10px;
  justify-items: start;
  background: var(--rtk-ink);
  color: #fff;
  padding: 26px 22px;
}
.hero-copy p { color: #cfded6; margin: 0; }
.hero-title { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.2; letter-spacing: -.04em; word-break: keep-all; }
.hero-title em { font-style: normal; color: var(--rtk-lime); }

.hero-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, #d3e8dc 0 42%, #8fbda3 42% 58%, #2f5b47 58%);
}
.hero-image { overflow: hidden; aspect-ratio: 16 / 9; }
#hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
#hero-image a { display: block; width: 100%; height: 100%; }
.hero-art span { position: absolute; }
.hero-sun { width: 22%; aspect-ratio: 1; border-radius: 50%; background: #f0d879; right: 12%; top: 12%; }
.hero-ridge {
  left: -6%; right: -6%; bottom: 0; height: 56%;
  background: #254c3b;
  clip-path: polygon(0 62%, 17% 30%, 29% 56%, 48% 15%, 65% 49%, 82% 20%, 100% 60%, 100% 100%, 0 100%);
}
.hero-ridge2 {
  left: -6%; right: -6%; bottom: 0; height: 40%;
  background: #17372b;
  clip-path: polygon(0 57%, 20% 35%, 34% 54%, 55% 20%, 75% 62%, 100% 31%, 100% 100%, 0 100%);
}
.hero-trail {
  left: 44%; bottom: 0; width: 26%; height: 46%;
  background: #cbd5ab;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}

/* 홈은 각진 편집 지면이다: 둥글게 떠 있는 카드 대신 얇고 진한 윗선과 어긋난 그림자를 쓴다.
   히어로 규칙보다 뒤에 와야 세 곳이 같은 형태를 쓴다. */
.hero-copy, .hero-art, .ecard {
  border-radius: 3px;
  border-top: 3px solid var(--rtk-ink);
  box-shadow: 5px 5px 0 #dbe5dd;
}
.hero-image {
  border-radius: 3px;
  border-top: 3px solid var(--rtk-ink);
  box-shadow: 5px 5px 0 #dbe5dd;
}
/* 홈 오른쪽 순환 액자는 지도 오른쪽과 같은 틀을 쓰되 치수는 히어로 자리가 정한다:
   지도 쪽 데스크톱 높이(520px)와 둥근 모서리가 홈 히어로를 밀어내지 않는다. */
.hero-image .mapshot { height: 100%; aspect-ratio: auto; border-radius: 0; }

/* ── 홈: 전체 목록·달력·지도 진입 ────────────────────────── */
.quick-grid { display: grid; gap: 10px; }
/* 진입 카드는 왼쪽 초록 띠와 잘린 오른쪽 위 모서리로 선다. */
.quick {
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 170px;
  padding: 18px;
  border-radius: 3px;
  border-left: 4px solid var(--rtk-green);
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  /* 잘린 모서리는 그림자까지 함께 자른다: 진입 카드는 테두리 한 겹으로 선다. */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
/* 왼쪽 초록 띠는 hover에서도 그대로 둔다. */
.quick:hover { border-color: #9fd7b5; border-left-color: var(--rtk-green); background: var(--accent-soft); }
/* clip-path가 공용 바깥 outline을 자르므로 이 카드만 안쪽 focus ring을 쓴다. */
.quick:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--accent); }
.quick-count { color: var(--rtk-green-deep); font-size: .78rem; font-weight: 800; }
.quick-count strong { margin-right: 3px; font-size: 1.7rem; line-height: 1; }
.quick b { font-size: 1.1rem; }
.quick .go { align-self: end; color: var(--rtk-green-deep); font-weight: 800; }

.search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  padding: 12px;
}
.field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.field label { font-size: .8rem; color: var(--muted); }
/* 접수 중만 보기는 네이티브 체크상자 하나다: 선택 상태도 키보드 조작도 브라우저가 이미 한다.
   누르는 자리는 이름표까지가 한 덩어리이고, 그 높이는 다른 조작과 같은 44px(--tap)이다. */
.field--toggle { align-self: end; }
.field--toggle label { display: flex; align-items: center; gap: 8px; min-height: var(--tap); color: inherit; font-weight: 700; cursor: pointer; }
.field--toggle input { width: auto; min-height: 0; margin: 0; accent-color: var(--rtk-green-deep); }
/* 검색어는 눌러야 적용된다: 좁은 화면에서는 한 줄을 채우고, 넓은 화면에서는 입력창 아랫선에 맞춰 선다. */
.searchgo { align-self: end; background: var(--rtk-green-deep); border-color: var(--rtk-green-deep); color: #fff; font-weight: 800; }

input, select, button {
  font: inherit;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: inherit;
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── 탐색: 보기 전환 ──────────────────────────────────────── */
.viewtabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: #e4ebe7;
  border-radius: var(--rtk-radius);
}
.viewtabs button {
  width: auto;
  flex: 1;
  min-height: var(--tap);
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-weight: 800;
  color: #4e5d55;
  cursor: pointer;
}
.viewtabs button.on { background: var(--paper); color: var(--rtk-green-deep); box-shadow: var(--rtk-shadow); }

/* ── 탐색: 캘린더 보기 ────────────────────────────────────── */
.calendar { padding: 8px; display: grid; gap: 8px; overflow-x: auto; }
.calhead { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.calmonth { margin: 0; font-size: 1.05rem; }
.calnav {
  width: auto;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
/* 7칸 × 44px가 320px 화면에도 들어가도록 열 사이 간격을 버린다(테두리가 칸을 나눈다). */
.calweek, .calgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(var(--tap), 1fr));
  row-gap: 3px;
  column-gap: 0;
}
.calweek li { text-align: center; font-size: .72rem; color: var(--muted); font-weight: 700; }
.calday {
  display: grid;
  align-content: center;
  gap: 1px;
  width: 100%;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 4px 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
  cursor: pointer;
}
.calday b { font-size: .85rem; font-weight: 700; }
.calday small { font-size: .62rem; color: var(--rtk-green); font-weight: 800; }
.calday:disabled { background: #f7f9f8; color: var(--muted); border-color: #edf1ee; cursor: default; }
.calday[aria-pressed="true"] { background: var(--rtk-mint); border-color: #9fd7b5; }
.calpicked { padding: 4px 2px; }
.calpicked .list { padding: 0; }

/* ── 탐색: 고정 행정구역 지도 보기 ────────────────────────── */
/* 좌표 지도가 아니다: 지역을 고르는 도형과 그 지역의 결과를 나란히 둔다. */
.adminmap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 10px; align-items: start; }
.adminmap-map { display: grid; gap: 10px; min-width: 0; }
.adminmap-results { display: grid; gap: 8px; align-content: start; min-width: 0; }
.adminmap-results h3 { margin: 6px 3px 0; }
.adminmap-results .list { padding: 0; }
.adminmap-illustration {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: var(--rtk-radius);
  background: #edf6f0;
}
/* 전국 지도 오른쪽 자리. 사진이든 일러스트든 같은 폭·같은 비율이라 패널 치수가 달라지지 않는다. */
.maphero { display: grid; gap: 6px; min-width: 0; }
.maphero > h3 { margin: 6px 3px 0; }
.maphero > p { margin: 0 3px; }
.mapshot {
  /* 좌우 정가운데 화살표(44px)가 앉을 자리. 문구는 이만큼 비켜서고, 좁은 화면에서도 읽을 만큼만 내준다. */
  --mapshot-safe: clamp(48px, 12vw, 64px);
  position: relative;
  touch-action: pan-y pinch-zoom;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--rtk-radius);
  overflow: hidden;
  background: #edf6f0;
}
/* 잘라 채우는 것은 운영자 소유이거나 공공누리 제1유형뿐이다(변경금지는 계약이 막는다).
   두 겹을 같은 자리에 겹쳐 두고 불투명도만 바꾼다: 다음 장을 받는 동안 빈 칸이 번쩍이지 않는다. */
.mapshot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.mapshot--ready > img { transition: opacity 1200ms ease-in-out; }
.mapshot img[aria-hidden="true"] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .mapshot img { transition: none; }
}
.mapshot-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px var(--mapshot-safe) 64px;
  background: linear-gradient(90deg, rgb(0 0 0 / .62), rgb(0 0 0 / .16) 68%, transparent);
  pointer-events: none;
}
.mapshot-copy--top { justify-content: flex-start; }
.mapshot-copy--center { justify-content: center; }
.mapshot-copy--bottom { justify-content: flex-end; padding-bottom: 84px; }
.mapshot-copy h3,
.mapshot-copy p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mapshot-copy h3 { margin: 0; color: var(--paper); font-size: clamp(1.35rem, 2.3vw, 2rem); text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.mapshot-copy p { margin: 5px 0 0; color: var(--paper); font-weight: 700; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.mapshot-copy--small h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.mapshot-copy--small p { font-size: .875rem; }
.mapshot-copy--medium h3 { font-size: clamp(1.35rem, 2.3vw, 2rem); }
.mapshot-copy--medium p { font-size: 1rem; }
.mapshot-copy--large h3 { font-size: clamp(1.55rem, 2.7vw, 2.35rem); }
.mapshot-copy--large p { font-size: 1.125rem; }
.mapshot figcaption {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: 6px 10px;
  background: rgb(0 0 0 / .52);
  color: var(--paper);
  font-size: .68rem;
  line-height: 1.4;
}
.mapshot figcaption span { min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.mapshot figcaption b { flex: none; align-self: flex-end; font-variant-numeric: tabular-nums; }
/* 사진 좌우 변의 정가운데에 선다: 세로는 정확히 절반 자리에서 제 높이만큼 끌어올린다. */
.mapshot-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / .38);
  color: var(--paper);
  cursor: pointer;
}
.mapshot-arrow::before {
  content: '';
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.mapshot-arrow--prev { left: 4px; }
.mapshot-arrow--prev::before { transform: translateX(2px) rotate(-135deg); }
.mapshot-arrow--next { right: 4px; }
.mapshot-arrow--next::before { transform: translateX(-2px) rotate(45deg); }
.mapshot-arrow:hover { background: rgb(0 0 0 / .58); }
.mapshot-arrow:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumb {
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.crumb[aria-pressed="true"], .crumb[aria-current="page"] { background: var(--rtk-mint); border-color: #9fd7b5; color: var(--rtk-green-deep); }
.tourism-pages { justify-content: center; }
.tourism-pages .crumb { width: auto; min-width: var(--tap); }

/* viewBox가 이미 하나의 배율로 만들어졌다: 높이만 주고 비율은 meet에 맡긴다. */
.adminsvg {
  display: block;
  width: 100%;
  height: clamp(280px, 46vw, 520px);
  background: #eef4f0;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
}
.adminarea path { fill: #cfe3d6; stroke: var(--paper); stroke-width: 1.2; cursor: pointer; }
.adminarea:hover path { fill: #b3d6c1; }
/* 대회가 있는 지역: 고르지 않았다는 것이 먼저 보이고(거의 흰 연녹색), 점선 녹색 테두리가 그 사실을 말한다. */
.adminarea.has-events path { fill: #f4fbf6; stroke: var(--rtk-green); stroke-width: 1.4; stroke-dasharray: 5 3; }
/* hover는 이 상태와 또 따로 보인다: 색이 묻히지 않게 같은 자리에서 한 번 더 말한다. */
.adminarea.has-events:hover path { fill: #b3d6c1; }
.adminarea.is-selected path { fill: var(--accent); stroke: var(--paper); stroke-dasharray: none; }
.adminarea text {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #eef4f0;
  stroke-width: 3px;
  pointer-events: none;
}
.adminarea.is-selected text { fill: var(--paper); stroke: var(--accent-dark); }
.adminmap-insets rect { fill: rgb(255 255 255 / .55); stroke: var(--rtk-green); stroke-width: 2; stroke-dasharray: 6 4; }
.adminmap-insets text { fill: var(--rtk-green-deep); font-size: 12px; font-weight: 700; }

.arealist { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.areapick {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: var(--tap);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.areapick b { font-size: .85rem; overflow-wrap: anywhere; }
.areapick small {
  display: grid;
  grid-template-rows: repeat(2, 1lh);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}
.areapick small span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 지역 카드도 도형과 같은 두 상태를 가진다: 대회가 있으면 점선·연한 바탕과 작은 점. */
.areapick.has-events { background: #f4fbf6; border-color: var(--rtk-green); border-style: dashed; }
.areapick .areadot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 4px;
  border-radius: 50%;
  background: var(--rtk-green);
  vertical-align: middle;
}
.areapick:hover { background: var(--accent-soft); border-color: #9fd7b5; }
.areapick[aria-pressed="true"] { background: var(--rtk-green-deep); border-color: var(--rtk-green-deep); border-style: solid; color: var(--paper); }
.areapick[aria-pressed="true"] small { color: var(--paper); }
.areapick[aria-pressed="true"] .areadot { background: var(--paper); }

/* 색이 말하는 것을 글자로 한 번 더 밝히는 작은 목록. 표시는 장식이고 이름은 글자가 가진다. */
.maplegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.maplegend li { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .72rem; font-weight: 700; }
.maplegend i { width: 14px; height: 14px; border-radius: 4px; }
.maplegend .has-events i { background: #f4fbf6; border: 1.4px dashed var(--rtk-green); }
.maplegend .is-selected i { background: var(--rtk-green-deep); border: 1.4px solid var(--rtk-green-deep); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  overflow: hidden;
  min-width: 0;
}
.panelhead {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1ee;
}
.panelnote { color: var(--muted); font-size: .78rem; text-align: right; }

.list, .places { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; }
.places { padding: 0; gap: 8px; }

.race {
  display: grid;
  grid-template-columns: 50px 56px minmax(0, 1fr);
  grid-template-areas:
    "date media body"
    "tags tags tags";
  gap: 7px 8px;
  min-height: var(--tap);
  padding: 10px;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--rtk-radius);
  cursor: pointer;
}
.race:hover { background: var(--accent-soft); }
.race[aria-pressed="true"] { background: var(--accent-soft); border-color: #9fd7b5; }
.race > .date { grid-area: date; }
.race > .media--row { grid-area: media; }
.race > .media--poster {
  width: 56px;
  height: 56px;
  aspect-ratio: 1;
  margin: 0;
  padding: 3px;
  object-fit: contain;
  overflow: hidden;
}
.race > .media--art .art-kicker,
.race > .media--art .art-title,
.race > .media--art .art-caption { display: none; }
.date {
  background: var(--accent-dark);
  color: #fff;
  border-radius: 10px;
  align-self: start;
  padding: 6px 2px;
  text-align: center;
  font-size: .65rem;
  letter-spacing: .06em;
}
.date b { display: block; font-size: 1.3rem; line-height: 1.1; }
.race-body { grid-area: body; display: grid; align-content: start; gap: 3px; min-width: 0; }
.race-title { font-weight: 800; }
.meta { color: var(--muted); font-size: .8rem; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.race > .tags { grid-area: tags; margin-top: 0; align-items: center; justify-content: flex-end; }
.tags i { font-style: normal; background: #e8efeb; border-radius: 20px; padding: 3px 8px; font-size: .68rem; }
.badge { font-weight: 800; }
.badge--candidate { background: #fdf3d3; color: var(--rtk-amber-ink); }
.badge--open { background: var(--rtk-mint); color: var(--rtk-green-deep); }

.map { height: 300px; background: #dce8df; }
.map--text { height: auto; background: var(--paper); padding: 12px 14px; }
.fallback { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .85rem; }
.fallback li { border-left: 3px solid var(--accent); padding-left: 8px; }
.map-status { margin: 0; padding: 8px 14px; border-bottom: 1px solid #edf1ee; }

.leaflet-container { font: inherit; }
.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
  width: var(--tap) !important;
  height: var(--tap) !important;
  line-height: var(--tap) !important;
}
.leaflet-control-attribution a { display: inline-flex; align-items: center; min-height: var(--tap); }
.pin { background: none; border: 0; }
.pin b {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-size: .75rem;
  box-shadow: 0 3px 8px #183c2d59;
}
.pin--race b { background: var(--accent-dark); color: #fff; font-size: .6rem; }
/* 지역 묶음은 정확한 위치가 아니다: 점선 테두리로 정확한 마커와 구분한다. */
.pin--region b { background: var(--paper); color: var(--accent-dark); border-style: dashed; border-color: var(--accent-dark); font-weight: 800; }
.pin.is-selected b { background: var(--accent); color: #fff; outline: 3px solid #91e7af; }

.detail { padding: 13px 15px; }
/* 접수 상태와 두 링크가 한 줄로 먼저 선다: 좁으면 그대로 접히고 누르는 자리는 링크 규칙 그대로다. */
.detail-registration { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.detail-registration .badge { padding: 4px 10px; border-radius: 999px; }
.eyebrow { font-size: .72rem; color: var(--accent); font-weight: 800; margin: 0 0 4px; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 16px; }
dt { color: var(--muted); font-size: .85rem; }
dd { margin: 0; }

.official {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: var(--tap);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.notice { font-size: .8rem; color: var(--muted); }
.empty { background: #f7f9f8; border-radius: var(--rtk-radius); padding: 12px; margin: 0; }

.side { padding: 4px 12px 12px; }

/* ── 관광정보: 분류 칩과 표시 건수 ───────────────────────── */
.catfilter { display: grid; gap: 6px; margin: 8px 0 6px; justify-items: start; }
/* 320px에서도 셋이 한 줄에 들어간다: 폭은 남은 자리를 나눠 갖는 비율뿐이고 고정값이 없다. */
.cattiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.cattile {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: var(--tap);
  padding: 4px;
  border-radius: var(--rtk-radius);
  background: #f7f9f8;
  text-align: center;
  cursor: pointer;
}
.cattile-visual { position: relative; display: block; min-width: 0; line-height: 0; }
.cattile-icon {
  position: absolute;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: rgba(16, 38, 29, .78);
  color: #fff;
  pointer-events: none;
}
.cattile-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.cattile-copy { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 1px 2px; }
.cattile b { min-width: 0; font-size: .78rem; font-weight: 800; color: #4e5d55; word-break: keep-all; }
.cattile small { flex: 0 0 auto; font-size: .72rem; color: var(--accent); font-weight: 700; }
.cattile[aria-pressed="true"] { background: var(--rtk-mint); outline: 2px solid #9fd7b5; }
.cattile[aria-pressed="true"] b { color: var(--rtk-green-deep); }
.cattile[aria-pressed="true"] .cattile-icon { border-color: var(--rtk-ink); background: var(--rtk-lime); color: var(--rtk-ink); }
.media--tile { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--rtk-radius); font-size: .52rem; }
@media (max-width: 390px) {
  .cattile { padding: 3px; }
  .cattile-icon { top: 5px; left: 5px; width: 30px; height: 30px; border-width: 1.5px; border-radius: 7px; }
  .cattile-icon svg { width: 18px; height: 18px; }
  .cattile-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0; padding: 2px 1px 1px; text-align: left; }
  .cattile b { font-size: .68rem; line-height: 1.25; }
  .cattile small { font-size: .64rem; line-height: 1.25; }
}
.catchip {
  width: auto;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: #4e5d55;
  cursor: pointer;
}
.catchip[aria-pressed="true"] { background: var(--rtk-mint); border-color: #9fd7b5; color: var(--rtk-green-deep); }
#nearby-status { margin: 0 0 8px; font-weight: 700; }
/* 사진이 있는 관광지만 사진 줄이 생긴다: 한 열이라 글자만 있는 카드에도 빈 칸이 남지 않는다. */
.place {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-height: var(--tap);
  padding: 9px;
  border-radius: var(--rtk-radius);
  background: #f7f9f8;
  align-self: start;
}
.placeshot { margin: 0; display: grid; gap: 4px; min-width: 0; }
/* 제공처가 준 한 장을 4:3 공통 자리에 확대·축소하되 자르지 않는다.
   제1·제3유형 모두 원본 비율과 같은 중립 배경을 유지한다. */
.placeshot .media { object-fit: contain; background: var(--rtk-mint); }
.place.is-selected { background: var(--accent-soft); outline: 2px solid #9fd7b5; }
.place p { margin: 0 0 4px; }
.place-select {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.place-select b { font-size: .9rem; }
.place b + small::before { content: " · "; }
.place-select small { color: var(--accent); font-weight: 700; }
.place a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: .85rem; }

.site-foot {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 12px 16px 24px;
  color: var(--muted);
  font-size: .8rem;
}
.site-foot a { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-legal { border-top: 1px solid var(--line); padding-top: 8px; }
.business {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
#site-business-title { display: block; margin-top: 8px; color: var(--ink); }
#site-copyright { display: block; margin-top: 8px; }
.source-details { margin-top: 4px; }
.source-details summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.source-details p { margin: 0; }
.source-group + .source-group::before { content: " · "; }

/* 정책 차례는 글자 폭만큼만 쓰고 줄이 모자라면 접힌다: 넓은 화면에서 가로로 퍼지지 않는다. */
.policy-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.policy-toc a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* 정책 본문은 운영자가 넣은 글자 그대로다: 줄바꿈을 지키고 폭은 화면을 따라간다. */
.policy-panel {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--paper);
}
#policy-content {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.mobile-disclosure > summary { list-style: none; }
.mobile-disclosure > summary::-webkit-details-marker { display: none; }

@media (max-width: 499px) {
  .mapshot-copy {
    justify-content: flex-end;
    padding: 16px var(--mapshot-safe) 76px;
    background: linear-gradient(0deg, rgb(0 0 0 / .68), rgb(0 0 0 / .28) 52%, transparent 78%);
  }
  .mapshot-copy h3 { max-width: 100%; font-size: 1.125rem; line-height: 1.25; word-break: keep-all; }
  .mapshot-copy p { max-width: 100%; font-size: .8125rem; line-height: 1.35; word-break: keep-all; }
  .mapshot-copy--small h3 { font-size: 1rem; }
  .mapshot-copy--small p { font-size: .75rem; }
  .mapshot-copy--medium h3 { font-size: 1.125rem; }
  .mapshot-copy--medium p { font-size: .8125rem; }
  .mapshot-copy--large h3 { font-size: 1.25rem; }
  .mapshot-copy--large p { font-size: .875rem; }
  .mapshot-copy--top { justify-content: flex-start; background: linear-gradient(180deg, rgb(0 0 0 / .68), rgb(0 0 0 / .28) 52%, transparent 78%); }
  .mapshot-copy--center { justify-content: center; background: linear-gradient(90deg, rgb(0 0 0 / .56), rgb(0 0 0 / .12) 82%, transparent); }
  .mapshot-copy--bottom { justify-content: flex-end; padding-bottom: 76px; }
  /* 좁은 화면에서는 두 칸 격자로 접는다: 한 칸도 넘치지 않고 누를 자리는 그대로 44px이다. */
  .policy-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .site-foot p { margin: 0; line-height: 1.65; }
  .source-group { display: block; margin-top: 8px; }
  .source-group:first-child { margin-top: 0; }
  .source-group + .source-group::before { content: none; }
  /* 문장 속 출처 링크도 모바일 전체 폭에서 44px(--tap)을 누를 수 있어야 한다.
     음수 세로 여백이 line box를 원래 줄간격으로 되돌린다. */
  .source-group a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    margin-block: -11px;
  }
  .mobile-disclosure > summary { position: relative; min-height: 64px; padding-right: 102px; cursor: pointer; }
  .mobile-disclosure > summary::after {
    content: "접기 ↑";
    position: absolute;
    right: 12px;
    display: grid;
    place-items: center;
    min-width: 76px;
    min-height: var(--tap);
    padding-inline: 14px;
    border: 1px solid var(--rtk-green-deep);
    border-radius: 999px;
    color: #fff;
    background: var(--rtk-green);
    box-shadow: 0 4px 12px rgba(14, 92, 61, .2);
    font-size: .88rem;
    font-weight: 800;
  }
  .mobile-disclosure:not([open]) > summary { border-bottom: 0; }
  .mobile-disclosure:not([open]) > summary::after { content: "열기 ↓"; }
  .mobile-disclosure > summary .panelnote { margin-right: 4px; }
  /* 선택한 카드 바로 아래로 옮겨온 패널은 목록 안쪽 폭에 맞춘다. */
  .list li > .panel { margin-inline: 0; margin-block: 8px 4px; border-inline: 1px solid var(--line); border-radius: var(--rtk-radius); }
}

/* 모바일은 코스와 등록 행동을 먼저 보여주고, 큰 전국 지도는 그 다음에 둔다. */
@media (max-width: 699px) {
  .course-workspace { display: flex; flex-direction: column; }
  .course-workspace-results { order: -1; }
}

@media (min-width: 700px) {
  .search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map { height: 380px; }
  .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
  .hero-copy { padding: 34px 30px; }
  .hero-art { aspect-ratio: auto; }
}

@media (min-width: 1100px) {
  /* 지도 보기: 고르는 지도와 그 결과가 남은 폭을 45:55로 나눈다. 그 아래 폭에서는 한 열로 쌓인다. */
  .adminmap { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
  .mapshot { height: 520px; aspect-ratio: auto; }
  /* 관광 사진이 들어가면서 오른쪽 패널은 넓은 화면에서 함께 넓어진다. 모바일 한 열 배치는 그대로다. */
  .workspace { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, clamp(330px, 30vw, 430px)); }
  .search { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; }
  .page { padding: 22px 28px; }
  .page-view { gap: 22px; }
  .map { height: 434px; }
  /* 목록 보기에서만 목록이 스스로 스크롤한다: 휠은 목록 안에 갇혀 옆 패널을 밀지 않는다. */
  #list { max-height: calc(100vh - 260px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1200px) {
  /* 행사 목록 열은 그대로 두고, 남은 폭을 지도·상세와 관광 패널이 46:54로 나눈다. */
  .workspace { grid-template-columns: minmax(0, 340px) minmax(0, 46fr) minmax(0, 54fr); }
  /* 관광 패널이 두 열을 담을 만큼 넓어지는 폭이다. 아래 화면에서는 한 열 그대로다. */
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  /* 관광 패널이 세 열을 담을 만큼 넓어지는 폭이다. 1200~1279px는 두 열 그대로다. */
  .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 지도 보기는 고정 행정구역 지도 한 판이다: 좌표 지도·주변 패널은 이 보기에 없다. */
.workspace--map { grid-template-columns: minmax(0, 1fr); }
.workspace--map #detail-panel,
.workspace--map #nearby-panel { display: none; }

/* 홈 대표 배너. 검증된 사진 자체만 공개 화면에 보인다. */
.home-banner { margin: 0; display: grid; }
#home-banner img { width: 100%; height: clamp(96px, 14vw, 180px); object-fit: contain; border-radius: var(--rtk-radius); background: #fff; }

/* 사업자 정보는 확인된 줄만 그린다: 비어 있으면 자리도 없다. */
#site-business { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
#site-copyright { display: block; margin-top: 6px; }

/* ── 커뮤니티 ─────────────────────────────────────────────── */
/* 탭 셋은 어느 폭에서도 한 줄 세 칸이다. 조작 요소는 모두 44px(--tap) 이상이다. */
.community-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rtk-ink);
}
.community-heading { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.04em; }
.community-lead { max-width: 440px; margin: 0; color: var(--muted); font-weight: 650; }

.community-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--paper);
  overflow: hidden;
}
.community-tab {
  width: auto;
  min-height: var(--tap);
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-size: .95rem;
  font-weight: 800;
  color: #4e5d55;
  cursor: pointer;
}
.community-tab:last-child { border-right: 0; }
.community-tab[aria-selected="true"] { background: var(--rtk-ink); color: var(--paper); }

.community-panel { padding: 0 0 8px; }
.community-toolbar { display: flex; justify-content: flex-end; padding: 10px 14px 2px; }
.community-compose { width: auto; min-height: var(--tap); padding: 0 20px; }
.community-form { display: grid; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #edf1ee; }
.community-form textarea {
  min-height: 96px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}
/* 공개·비공개는 문의및 건의에만 나오는 한 줄이다. 작은 글씨지만 누르는 자리는 44px(--tap)을 지킨다.
   고정 폭을 두지 않아 390px에서도 세 조각이 한 줄에 그대로 선다. */
.community-visibility {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 8px;
  min-width: 0;
}
.community-visibility-label { flex: 0 0 auto; font-size: .78rem; font-weight: 800; color: var(--muted); }
.community-visibility-choice {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 0 4px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.community-visibility-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--rtk-ink); }

.community-actions { display: flex; justify-content: flex-end; gap: 8px; }
.community-cancel { min-height: var(--tap); }
.community-submit { width: auto; min-width: 72px; min-height: var(--tap); padding: 0 20px; white-space: nowrap; }
/* 사람에게 보이지 않는 칸. display:none이면 채우는 쪽도 건너뛰므로 화면 밖으로만 밀어 둔다. */
.community-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.community-status { margin: 10px 14px 0; font-weight: 700; color: var(--rtk-green-deep); }

.community-list { list-style: none; margin: 0; padding: 8px 14px; display: grid; gap: 8px; }
.community-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rtk-radius); background: var(--paper); }
.community-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.community-item-title { margin: 0; font-size: 1rem; }
.community-item-meta { color: var(--muted); font-size: .78rem; }
.community-item-body { margin: 6px 0 0; white-space: pre-wrap; }

/* 댓글은 게시판 글 하나에 한 겹이다. 접고 펴는 것은 details/summary가 한다. */
.community-comments { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.community-comments-summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.community-comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.community-comment { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rtk-radius); background: var(--paper); }
.community-comment-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.community-comment-meta { color: var(--muted); font-size: .74rem; }
.community-comment-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.community-comment-author,
.community-comment-input {
  min-width: 0;
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}
.community-comment-author { flex: 0 1 96px; }
.community-comment-input { flex: 1 1 140px; }
.community-comment-submit { width: auto; min-height: var(--tap); padding: 0 16px; white-space: nowrap; }
.community-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 14px 8px; }
.community-page-button {
  width: auto;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--rtk-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.community-page-button[aria-current="page"] { background: var(--rtk-ink); color: var(--paper); }
.community-page-button:disabled { cursor: default; opacity: .45; }

.community-list:has(.cardnews-item) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cardnews-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 8px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--paper);
}
.cardnews-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.cardnews-nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0 0; }
.cardnews-step { flex: 0 0 auto; }
.cardnews-status { min-width: 72px; text-align: center; font-size: .82rem; font-weight: 800; color: var(--muted); }

@media (max-width: 899px) {
  .community-list:has(.cardnews-item) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 499px) {
  .community-list:has(.cardnews-item) { grid-template-columns: 1fr; }
  .community-intro { display: grid; }
  .community-lead { max-width: none; }
  .community-tab { padding: 6px 4px; font-size: .82rem; line-height: 1.25; }
  .community-list, .community-form { padding-inline: 12px; }
}

/* ── 코스 공유 ────────────────────────────────────────────────
   목록은 계산된 SVG 한 장으로 그린다: 카드가 몇 장이든 지도 인스턴스도 타일 요청도 없다. */
.course-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0 14px 4px;
}
.course-cards .empty { grid-column: 1 / -1; }
.course-card {
  min-height: var(--tap);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--course-cream);
  color: var(--course-green);
  text-decoration: none;
  overflow: hidden;
}
.course-card:hover,
.course-card:focus-visible { border-color: var(--course-green); box-shadow: var(--rtk-shadow); }
.course-card-art {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--course-mint);
}
.course-art-casing { fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.course-art-line { fill: none; stroke: var(--course-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.course-card-body { display: grid; gap: 4px; align-content: start; padding: 12px 14px 14px; }
.course-card-title { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.course-card-where { margin: 0; color: var(--muted); font-size: .86rem; }
.course-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--course-mint);
  list-style: none;
}
.course-card-stat { display: grid; gap: 1px; }
.course-card-stat b { font-size: .95rem; }
.course-card-stat span { color: var(--muted); font-size: .76rem; }

.course-region { display: grid; gap: 12px; padding: 0 14px 14px; }
.course-region.has-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course-region-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.course-region-head strong { font-size: 1rem; }
.course-region .course-region-head button { width: auto; min-width: 92px; padding-inline: 13px; }
.course-region-field { display: grid; min-width: 0; gap: 6px; }
.course-region-field > span { color: #4d6358; font-size: .78rem; font-weight: 800; }
.course-region select,
.course-region button,
#course-form select { min-height: var(--tap); width: 100%; }
.course-region-field select { min-width: 0; }
.course-visible { margin: 0 14px 12px; }
.course-overview { min-height: 320px; margin: 0 14px 12px; border: 1px solid var(--line); border-radius: var(--rtk-radius); background: var(--course-mint); overflow: hidden; }
.course-overview .leaflet-tile { filter: saturate(.45) contrast(.95); }
.course-marker { border: 3px solid #fff; border-radius: 50%; background: var(--course-green); box-shadow: 0 3px 8px rgb(14 92 61 / .28); }
.course-number { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #fff !important; font-weight: 900; line-height: 42px; }
.course-number::before { display: none; }
.adminbubble { fill: var(--course-green); stroke: #fff; stroke-width: 3; }
.adminarea .adminbubble-count { fill: #fff; stroke: none; font-size: 12px; dominant-baseline: middle; }

.course-workspace-map { max-width: 720px; margin: 0 auto 30px; }
.course-workspace-map .course-region { padding: 16px; background: #fff; border: 1px solid #b8cfc1; border-radius: var(--rtk-radius); box-shadow: 0 16px 42px rgb(15 74 49 / .12); }
.course-workspace-results { padding-top: 22px; border-top: 1px solid #c7d9cf; }
.map-readability-key { margin: 0; padding: 10px 14px; border-radius: 999px; background: #e6f3ea; color: #0b5337; font-weight: 900; text-align: center; }
#course-region .adminsvg--readable { height: auto; aspect-ratio: 1 / 1; margin-top: 2px; background: #f4f8f5; border-color: #aec8b8; }
#course-region .adminsvg--readable .adminarea path { fill: #bdd7c7; stroke: #fff; stroke-width: 2; }
#course-region .adminsvg--readable .adminarea text { fill: #123d2b; font-size: 21px; font-weight: 900; stroke: #f4f8f5; stroke-width: 5px; }
#course-region .adminsvg--readable .adminarea.has-events path { fill: #77b28d; stroke: #0b5337; stroke-width: 3.5; stroke-dasharray: none; }
#course-region .adminsvg--readable .adminarea.has-events > text:not(.adminbubble-count) { fill: #073e28; stroke: #eaf5ed; }
#course-region .adminsvg--readable .adminbubble { fill: #f0c84c; stroke: #fff; stroke-width: 5; }
#course-region .adminsvg--readable .adminbubble-count { fill: #183628; stroke: none; font-size: 17px; font-weight: 900; }
#course-region .adminsvg--readable .adminmap-insets rect { fill: #fff; stroke-width: 3; }
#course-region .adminsvg--readable .adminmap-insets text { font-size: 11px; font-weight: 800; }

.course-form { gap: 10px; }
#course-form button { min-height: var(--tap); }
#course-file { min-height: var(--tap); }

.course-detail { display: grid; gap: 10px; padding: 0 14px 18px; }
.course-back { width: auto; justify-self: start; min-height: var(--tap); }
.course-detail-where { margin: 0; color: var(--muted); }
.course-detail-description { margin: 0; white-space: pre-wrap; }
#course-map {
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--course-mint);
  overflow: hidden;
}
/* 타일은 배경이다: 채도를 낮춰 흰 테두리 위의 딥그린 경로가 먼저 읽히게 한다. */
#course-map .leaflet-tile { filter: saturate(.45) contrast(.95); }
#course-map.course-map--text { display: grid; place-items: center; padding: 10px; }
.course-fallback-art, .course-profile-art { width: 100%; height: auto; }
.course-profile { border: 1px solid var(--line); border-radius: var(--rtk-radius); background: var(--course-cream); padding: 8px; }
.course-stats { margin: 0 0 4px; }
.course-privacy { margin: 0; }

.course-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.course-results-head .course-visible { margin: 0; }
.course-results-head .community-toolbar { margin: 0; padding: 0; }
.course-results-head .cta { width: auto; min-height: var(--tap); padding-inline: 16px; white-space: nowrap; box-shadow: 0 8px 20px rgb(14 92 61 / .2); }
.course-card { border: 0; background: var(--paper); box-shadow: 0 16px 38px rgb(8 38 27 / .18); }
.course-card-art { background: linear-gradient(155deg, var(--poster-dark) 0%, var(--poster-mid) 58%, var(--poster-soft) 140%); }
.course-poster--0 { --poster-dark: #092f25; --poster-mid: #0b5940; --poster-soft: #70a885; }
.course-poster--1 { --poster-dark: #102f3a; --poster-mid: #17647a; --poster-soft: #8ab9c5; }
.course-poster--2 { --poster-dark: #3c2719; --poster-mid: #80502f; --poster-soft: #d0a06b; }
.course-poster--3 { --poster-dark: #29233f; --poster-mid: #5c4d7d; --poster-soft: #a898c2; }
.course-card-art .course-art-casing { stroke: #fff; stroke-width: 8; }
.course-card-art .course-art-line { stroke: #f4d76b; stroke-width: 4.2; }
.poster-contour { fill: none; stroke: #b8dcc8; stroke-width: .7; opacity: .24; }
.poster-start { fill: #f5d65e; stroke: #fff; stroke-width: 2; }
.poster-end { fill: #ff7c54; stroke: #fff; stroke-width: 2; }
.poster-sun { fill: #f4d76b; opacity: .95; }
.poster-kicker { fill: #d7eee2; font: 700 5px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .16em; }
.poster-distance { fill: #fff; font: 900 20px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.poster-unit { fill: #f4d76b; font: 800 6px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .08em; }
.poster-region { fill: #d7eee2; font: 700 5px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.course-card-body { background: linear-gradient(180deg, #fff, var(--course-cream)); border-top: 4px solid #f4d76b; }
.course-card-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.course-card-stat { border-radius: var(--rtk-radius); background: #e7f2eb; padding: 7px 5px; text-align: center; }
.course-card-stat b { white-space: nowrap; font-size: clamp(.68rem, .75vw, .8rem); letter-spacing: -.03em; }

.course-detail-dashboard { min-width: 0; }
.course-detail-map-card,
.course-detail-profile-panel,
.course-detail-stats-panel { border: 1px solid #c9dbd1; border-radius: var(--rtk-radius); background: var(--paper); padding: 12px; box-shadow: 0 10px 28px rgb(22 60 43 / .09); }
.course-detail-map-card #course-map { border: 0; border-radius: var(--rtk-radius); }
.course-detail-below { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 16px; margin-top: 16px; }
.course-detail-below h4 { margin: 0 0 9px; }
.course-detail-stats-panel .course-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.course-detail-stats-panel .course-stats dt { color: var(--muted); font-size: .72rem; }
.course-detail-stats-panel .course-stats dd { margin: 0; font-size: 1rem; font-weight: 900; }
.course-detail-stats-panel .course-stats dt,
.course-detail-stats-panel .course-stats dd { background: #eef6f1; padding: 7px 9px; }
.course-profile { border-color: #bfd5c9; background: #f9fcfa; padding: 12px; }
.course-profile-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 6; }
.profile-grid { stroke: #d8e7df; stroke-width: 1; }
.profile-axis { fill: #65776e; font: 10px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.profile-fill { fill: #bfe2ce; opacity: .78; stroke: none; }
.course-profile .course-art-casing { stroke-width: 6; }
.course-profile .course-art-line { stroke: var(--course-green); stroke-width: 3.2; }

@media (max-width: 700px) {
  .course-results-head { align-items: flex-start; }
  .course-results-head .cta { padding-inline: 12px; font-size: .82rem; }
  .course-detail-below { display: flex; flex-direction: column; margin-top: 12px; }
  .course-detail-profile-panel { order: 1; }
  .course-detail-stats-panel { order: 2; }
  .course-detail-stats-panel .course-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-profile-art { aspect-ratio: 16 / 8; }
  .course-workspace-map { margin-bottom: 20px; }
  .course-workspace-map .course-region { padding: 12px; }
  .course-region.has-selection { grid-template-columns: minmax(0, 1fr); }
  #course-region .adminsvg--readable .adminarea text { font-size: 25px; }
  #course-region .adminsvg--readable .adminbubble { r: 22px; }
  #course-region .adminsvg--readable .adminbubble-count { font-size: 20px; }
}

.course-workspace, .course-workspace-map, .course-workspace-results { min-width: 0; }
@media (min-width: 1024px) {
  .course-workspace {
    display: block;
    padding: 0 14px 16px;
  }
  .course-workspace-map .course-overview { margin-inline: 0; }
  .course-workspace-results .course-visible { margin: 0 0 12px; }
  .course-workspace-results .course-cards { padding-inline: 0; gap: 12px; }
  .course-workspace-results .community-toolbar { justify-content: flex-end; padding: 0; }
  .course-workspace-results .course-card-body { padding: 12px; }
  .course-workspace-results .course-card h3 { font-size: .98rem; }
  .course-workspace-results .course-card-where { font-size: .76rem; }
}

/* 데스크톱 코스 카드뉴스는 정확히 세 칸이다. 이 아래 폭에서는 한 칸으로 쌓인다.
   기본 규칙보다 뒤에 두어야 같은 특정도에서 넓은 화면 규칙이 이긴다. */
@media (min-width: 700px) {
  .course-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #course-map { min-height: 420px; }
}


/* BEST 코스는 전국 지도 좌우 3칸씩, 일반 코스는 더 작은 다열 카드로 보여 준다. */
.course-best-stage { min-width: 0; }
.course-best-stage.has-best {
  display: grid;
  grid-template-columns: 200px minmax(0, 650px) 200px;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  align-items: start;
  justify-content: center;
  margin: 0 auto 30px;
}
.course-best-stage.has-best .course-workspace-map { grid-column: 2; grid-row: 1 / span 3; width: 100%; margin: 0; }
.course-best-rail { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
.course-best-stage.has-best .course-best-rail--left { grid-column: 1; grid-row: 1 / span 3; }
.course-best-stage.has-best .course-best-rail--right { grid-column: 3; grid-row: 1 / span 3; }
.course-best-slot--1, .course-best-slot--4 { grid-row: 1; }
.course-best-slot--2, .course-best-slot--5 { grid-row: 2; }
.course-best-slot--3, .course-best-slot--6 { grid-row: 3; }
.course-best-title { margin: 0 0 4px; color: #0b5337; font-size: .76rem; text-align: center; }
.course-best-slot .course-card { min-height: 0; }
.course-best-slot .course-card-art { height: 140px; aspect-ratio: auto; }
.course-best-slot .course-card-body { padding: 7px; }
.course-best-slot .course-card-title { font-size: .72rem; }
.course-best-slot .course-card-where { overflow: hidden; font-size: .6rem; white-space: nowrap; text-overflow: ellipsis; }
.course-best-slot .course-card-stats { display: none; }
@media (min-width: 1024px) {
  .course-workspace-results .course-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .course-workspace-results .course-card-body { padding: 9px; }
  .course-workspace-results .course-card-title { font-size: .84rem; }
  .course-workspace-results .course-card-where { font-size: .68rem; }
  .course-workspace-results .course-card-stat { padding: 5px 2px; }
  .course-workspace-results .course-card-stat b { font-size: .67rem; }
  .course-workspace-results .course-card-stat span { font-size: .62rem; }
}
@media (min-width: 1536px) {
  .course-workspace-results .course-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .course-best-stage.has-best { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; margin-bottom: 20px; }
  .course-best-stage.has-best .course-best-rail { display: contents; }
  .course-best-stage.has-best .course-best-slot { grid-column: auto; grid-row: auto; }
  .course-best-stage.has-best .course-best-slot--1 { grid-column: 1; grid-row: 1; }
  .course-best-stage.has-best .course-best-slot--2 { grid-column: 2; grid-row: 1; }
  .course-best-stage.has-best .course-best-slot--3 { grid-column: 3; grid-row: 1; }
  .course-best-stage.has-best .course-best-slot--4 { grid-column: 1; grid-row: 2; }
  .course-best-stage.has-best .course-best-slot--5 { grid-column: 2; grid-row: 2; }
  .course-best-stage.has-best .course-best-slot--6 { grid-column: 3; grid-row: 2; }
  .course-best-stage.has-best .course-workspace-map { grid-column: 1 / -1; grid-row: 3; }
  .course-best-slot .course-card-art { height: auto; aspect-ratio: 4 / 5; }
  .course-best-slot .course-card-body { padding: 5px; }
  .course-best-slot .course-card-title { font-size: .63rem; }
  .course-best-slot .course-card-where { display: none; }
  .course-workspace-results .course-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .course-workspace-results .course-card-body { padding: 5px; }
  .course-workspace-results .course-card-title { font-size: .63rem; }
  .course-workspace-results .course-card-where, .course-workspace-results .course-card-stats { display: none; }
}

/* ── 내 계정 ──────────────────────────────────────────────────
   칸은 한 줄에 하나다. 폭은 화면을 따라가고 조작 요소의 44px(--tap)은 전역 규칙이 이미 지킨다. */
.account-panel {
  display: grid;
  gap: 14px;
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--paper);
  box-shadow: var(--rtk-shadow);
}
/* 흐름 셋은 같은 패널 자리를 나눠 쓴다. 닫힌 흐름은 전역 [hidden] 한 줄이 화면과 접근성 트리에서 함께 뺀다. */
.account-view { display: grid; gap: 14px; min-width: 0; }
.account-view:focus-visible { outline-offset: 4px; }
.account-view-title { margin: 0; font-size: .95rem; font-weight: 800; color: var(--rtk-green-deep); }
.account-back { width: 100%; font-weight: 800; color: var(--rtk-ink); cursor: pointer; }
.account-back:hover { background: var(--accent-soft); }
/* 공급자 버튼은 런트립 초록 언어 그대로다: 남의 로고도 브랜드 색도 쓰지 않는다. */
.account-social { display: grid; gap: 8px; }
.account-social button { font-weight: 800; color: var(--rtk-ink); cursor: pointer; }
.account-social button:hover { background: var(--accent-soft); }
.account-divider { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .8rem; font-weight: 700; }
.account-divider::before, .account-divider::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }

.account-form { display: grid; gap: 10px; }
.account-form .field label { font-weight: 700; color: var(--rtk-green-deep); }
.account-consent { display: grid; gap: 2px; min-width: 0; margin: 0; padding: 4px 12px 10px; border: 1px solid var(--line); border-radius: var(--rtk-radius); }
.account-consent legend { padding: 0 6px; font-size: .8rem; font-weight: 800; color: var(--muted); }
/* 체크박스 줄은 라벨 전체가 누르는 자리다: 작은 글씨여도 44px(--tap)을 지킨다. */
.account-consent label { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: .86rem; font-weight: 700; cursor: pointer; }
.account-consent input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--rtk-green-deep); }
.account-legal-note { margin: 2px 6px 6px; }
.account-submit { width: 100%; font-weight: 800; }
.account-status { margin: 0; font-weight: 800; color: var(--rtk-green-deep); }

/* 마이페이지: 로그인 전에는 사실만 말한다. 이름도 사진도 지어내지 않는다. */
.account-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--paper);
}
.account-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--rtk-mint); }
.account-profile-text { flex: 1 1 180px; min-width: 0; }
.account-profile-name { margin: 0; font-size: 1.05rem; font-weight: 800; }
.account-profile-meta { margin: 2px 0 0; }
.account-profile button { flex: 0 0 auto; width: auto; }
.mypage-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 4px 0 0; }

.account-rows { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: var(--tap);
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--rtk-radius);
  background: var(--paper);
}
.account-row-name { font-weight: 800; }
.account-row button { flex: 0 0 auto; width: auto; font-size: .82rem; font-weight: 800; }
.account-row button:disabled { cursor: default; opacity: .45; }

@media (max-width: 499px) {
  .account-panel { padding: 12px; }
  .account-row { justify-content: flex-start; }
}