.cm {
  --cm-acc: #3a5a8a;
  --cm-ink: #202020;
  --cm-ink2: #555555;
  --cm-paper: #ffffff;
  --cm-bg: #f3f0ea;
  --cm-road: #ffffff;
  --cm-road-minor: #e6e1d7;
  --cm-line: #20202026;
  --cm-on: #ffffff;
  --cm-r: 0px;
  min-width: 0;
  color: var(--cm-ink);
  -webkit-hyphens: none;
  hyphens: none;
}
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }
.cm:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
.cm:lang(ja) { word-break: auto-phrase; overflow-wrap: break-word; }
.cm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cm-r-4 { --cm-r: 4px; }
.cm-r-8 { --cm-r: 8px; }
.cm-r-12 { --cm-r: 12px; }

.cm-h { margin: 0 0 12px; font-size: clamp(22px, 6vw, 30px); line-height: 1.25; overflow-wrap: break-word; }

.cm-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "addr" "fig" "acts"; }
.cm-addr { grid-area: addr; min-width: 0; }
.cm-fig { grid-area: fig; margin: 0; min-width: 0; }
.cm-acts { grid-area: acts; min-width: 0; }
@media (min-width: 768px) {
  .cm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "addr fig" "acts fig"; align-items: start; column-gap: 24px; }
  .cm-layout-stack .cm-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "addr" "fig" "acts"; max-width: 720px; }
}
.cm-nomap .cm-grid { grid-template-areas: "addr" "acts"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
@media (min-width: 768px) { .cm-nomap .cm-grid { grid-template-areas: "addr" "acts"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; max-width: 560px; } }

.cm-line { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; font-size: 16px; line-height: 1.5; }
.cm-k { font-size: 13px; color: var(--cm-ink2); }
.cm-line strong { font-weight: 700; }
.cm-stn { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--cm-ink2); overflow-wrap: break-word; }
.cm-copyrow { position: relative; margin: 8px 0 0; }

.cm-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 48px;
  padding: 10px 14px; border: 1px solid var(--cm-acc); background: var(--cm-paper); color: var(--cm-acc); font: inherit;
  font-size: 15px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; border-radius: var(--cm-r); }
.cm-btn:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
.cm-btn-solid .cm-link { background: var(--cm-acc); color: var(--cm-on); }
@media (hover: hover) { .cm-link:hover, .cm-big:hover { background: var(--cm-acc); color: var(--cm-on); } .cm-btn-solid .cm-link:hover { opacity: .88; } }
.cm-copy { display: inline-grid; place-items: center; background: var(--cm-acc); color: var(--cm-on); white-space: nowrap; }
.cm-copy > span { grid-area: 1 / 1; }
.cm-copy .cm-l2, .cm-copy.is-ok .cm-l1 { visibility: hidden; }
.cm-copy.is-ok .cm-l2 { visibility: visible; }
html:not(.cm-js) .cm-copy, html:not(.cm-js) .cm-bigrow { display: none; }

.cm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-link { flex: 1 1 auto; }
@media (max-width: 599px) {
  .cm-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cm-link { width: 100%; padding: 10px 4px; font-size: clamp(12px, 3.5vw, 14px); overflow-wrap: anywhere; }
}

.cm-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--cm-line); background: var(--cm-bg); border-radius: var(--cm-r); }
@media (min-width: 768px) { .cm-frame { aspect-ratio: 16 / 9; } }
.cm-frame.is-big { aspect-ratio: auto; height: 320px; }
@media (min-width: 768px) { .cm-frame.is-big { height: 360px; } }
.cm-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cm-frame.is-big .cm-svg { display: none; }
.cm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--cm-bg); }
.cm-bigrow { margin-top: 10px; }
.cm-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--cm-ink2); overflow-wrap: break-word; }

.cm-bg { fill: var(--cm-bg); }
.cm-road { fill: none; stroke: var(--cm-road); stroke-linecap: butt; }
.cm-road-minor { stroke: var(--cm-road-minor); stroke-width: 8; }
.cm-road-big { stroke: var(--cm-road); stroke-width: 24; }
.cm-road-st { stroke: var(--cm-road); stroke-width: 14; }
.cm-walk { fill: none; stroke: var(--cm-acc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 10; }
.cm-start { fill: var(--cm-paper); stroke: var(--cm-ink); stroke-width: 4; }
.cm-start-core { fill: var(--cm-ink); }
.cm-pin { fill: var(--cm-acc); stroke: var(--cm-paper); stroke-width: 3; stroke-linejoin: round; }
.cm-pin-hole { fill: var(--cm-paper); }
.cm-badge { fill: var(--cm-ink); }
.cm-glyph { fill: none; stroke: var(--cm-paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme])) .cm {
    --cm-acc: #9db8e6; --cm-ink: #ecebe8; --cm-ink2: #b4b2ad; --cm-paper: #1d1f23; --cm-bg: #14161a; --cm-road: #2c2f36;
    --cm-road-minor: #22252b; --cm-line: #ffffff2e; --cm-on: #14161a;
  }
}
:where(:root[data-theme="dark"]) .cm {
  --cm-acc: #9db8e6; --cm-ink: #ecebe8; --cm-ink2: #b4b2ad; --cm-paper: #1d1f23; --cm-bg: #14161a; --cm-road: #2c2f36;
  --cm-road-minor: #22252b; --cm-line: #ffffff2e; --cm-on: #14161a;
}
@media (forced-colors: active) {
  .cm-walk, .cm-pin { stroke: CanvasText; }
  .cm-btn { border-color: ButtonText; }
}

.cm {
  --cm-acc: var(--tm3-acc);
  --cm-ink: var(--tm3-ink);
  --cm-ink2: var(--tm3-ink-2);
  --cm-paper: var(--tm3-tile-a);
  --cm-bg: var(--tm3-bg-alt);
  --cm-road: var(--tm3-tile-a);
  --cm-road-minor: var(--tm3-tile-b);
  --cm-line: var(--tm3-line);
  --cm-on: var(--tm3-tile-a);
}