/* PLAYmoa: green PLAY identity, charcoal directory, pastel category indexes.
   Presentation only. Keep the existing markup, search, links and ad rails. */
:root {
  color-scheme: light;
  --color-primary: #177c46;
  --color-secondary: #354544;
  --color-accent: #53b542;
  --color-background: #4b585b;
  --color-surface: #fff;
  --color-surface-soft: #f4f7f4;
  --color-border: #dae4dd;
  --color-text: #1d3228;
  --color-text-secondary: #617168;
  --color-success: #1b8048;
  --color-warning: #9c6a19;
  --color-error: #b44947;
  --radius-small: 4px;
  --radius-control: 8px;
  --radius-card: 10px;
  --shadow-card: 0 3px 12px #172d2120;
  --shadow-header: 0 5px 18px #13251c24;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --banner-width: clamp(180px, 15vw, 240px);
  --layout-gap: 18px;
  --ink: var(--color-text);
  --muted: var(--color-text-secondary);
  --green: var(--color-primary);
  --links-sticky-h: 92px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background-color: var(--color-background); background-image: radial-gradient(circle at 1px 1px, #ffffff07 1px, transparent 0); background-size: 24px 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "맑은 고딕", Arial, sans-serif; font-size: 1rem; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.page-width { width: min(100% - 64px, 1800px); margin-inline: auto; }
.links-header { border-bottom: 1px solid #ffffff20; }
.links-toolbar { position: sticky; top: 0; z-index: 20; background: var(--color-secondary); }
.links-toolbar.is-stuck { box-shadow: var(--shadow-header); }
.header-inner { display: flex; align-items: center; min-height: 92px; gap: 28px; padding-block: 14px; }
.brand { display: flex; flex-shrink: 0; width: 222px; padding: 9px 14px; background: var(--color-surface); border: 1px solid #ffffff; border-radius: var(--radius-control); }
.brand img { width: 100%; height: auto; }
.utility-nav { display: flex; gap: 20px; flex-shrink: 0; margin-left: auto; color: #e1eae4; font-size: .8125rem; font-weight: 500; }
.utility-nav a { padding: 10px 0; }
.utility-nav a:hover { color: #fff; }
.utility-nav a:focus-visible, .home-footer a:focus-visible { outline-color: #a8e1ad; }
.links-search { flex: 1; min-width: 0; max-width: 780px; }
.links-search__field { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid #c9d9cf; border-radius: var(--radius-control); background: var(--color-surface); }
.links-search__field:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px #53b54238; }
.search-icon { flex-shrink: 0; color: var(--color-primary); }
.links-search__input { min-width: 0; width: 100%; padding: 12px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.links-search__input::placeholder { color: #687b70; }
.links-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.links-search__hint { display: inline-grid; place-items: center; width: 24px; height: 25px; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface-soft); color: var(--muted); font-size: .8125rem; }
.links-search__clear { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; background: #e9f3ec; border: 0; border-radius: var(--radius-small); color: var(--color-primary); }
.links-search__clear:hover { background: #dbeee0; }
.links-category-nav { display: flex; flex-wrap: wrap; gap: 7px; padding-block: 17px 13px; }
.links-category-nav a { display: inline-flex; align-items: center; min-height: 35px; padding: 5px 11px; border: 1px solid #cedbd2; border-radius: 5px; background: #f1f5f2; color: #344c3e; font-size: .8125rem; font-weight: 600; transition: background-color 140ms, color 140ms, border-color 140ms; }
.links-category-nav a:hover { border-color: #a8d4b5; background: #e0f0e4; color: #116435; }
.links-category-nav a.is-active { border-color: #4ea069; background: var(--color-primary); color: #fff; }
.links-category-nav a.is-dimmed { background: #dae3de; color: #52635a; }
.directory-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px calc(var(--banner-width) + var(--layout-gap)) 13px; color: #fff; }
.directory-label h1 { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 700; letter-spacing: -.2px; }
.directory-label p { margin: 0; color: #e0e8e2; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.directory-layout { display: grid; grid-template-columns: var(--banner-width) minmax(0, 1fr) var(--banner-width); grid-template-areas: "left content right"; gap: var(--layout-gap); align-items: start; }
.directory-content { grid-area: content; min-width: 0; }
.banner-rail--left { grid-area: left; }
.banner-rail--right { grid-area: right; }
.directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; scroll-margin-top: calc(var(--links-sticky-h) + 16px); }
.category-rank { --category-color: #8799a8; min-width: 0; border: 1px solid var(--color-border); border-top: 3px solid var(--category-color); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--links-sticky-h) + 16px); }
#adult, #torrent { --category-color: #a2aab4; }
#op-entertainment, #community { --category-color: #77b798; }
#toto-casino, #adult-goods { --category-color: #ddba79; }
#toto-casino-rental, #korean-expat { --category-color: #7fb1c7; }
#verification, #webtoon { --category-color: #aa9bc4; }
#sports-broadcast, #live-tv { --category-color: #d29e9f; }
.category-rank:focus { outline: none; }
.category-rank:focus-visible { outline: 3px solid #b7edc1; outline-offset: 3px; }
.category-rank__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 11px 14px; border-bottom: 1px solid #e6ede8; background: #f8faf8; }
.category-rank__head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.3px; }
.category-rank__head h2::before { content: ""; flex-shrink: 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--category-color); }
.category-rank__count { flex-shrink: 0; font-size: .6875rem; font-weight: 600; color: #536a5c; padding: 3px 7px; border-radius: var(--radius-small); background: #eaf1eb; white-space: nowrap; }
.rank-list { list-style: none; margin: 0; padding: 5px 10px 8px; }
.rank-item { border-bottom: 1px solid #edf2ee; }
.rank-item:last-child { border: 0; }
.rank-open { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 4px; border-radius: 5px; transition: background-color 140ms; }
.rank-open:hover, .rank-open:focus-visible { background: #eff7f0; }
.rank-open:hover h3 { color: var(--color-primary); }
.rank-open:focus-visible { outline-offset: -1px; }
.rank-position { width: 12px; flex-shrink: 0; text-align: right; color: #758478; font-size: .6875rem; font-variant-numeric: tabular-nums; }
.rank-logo { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid #edf2ee; border-radius: 6px; background: var(--color-surface); overflow: hidden; }
.rank-logo img { width: 24px; height: 24px; object-fit: contain; }
.rank-body { flex: 1; min-width: 0; }
.rank-body h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.rank-body small { display: block; margin-top: 1px; font-size: .75rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.site-purpose { display: none; }
.site-domain { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.external-icon { display: none; }
/* This is a visual label on the existing whole-row anchor, not a new control. */
.rank-open::after { content: "열기 ↗"; display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 28px; border: 1px solid #c5dccd; border-radius: var(--radius-small); background: #eff6f0; color: var(--color-primary); font-size: .6875rem; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; transition: background-color 140ms, color 140ms, border-color 140ms; }
.rank-open:hover::after, .rank-open:focus-visible::after { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rank-disclosure { flex-shrink: 0; color: var(--color-warning); background: #fff4dc; border-radius: var(--radius-small); padding: 0 3px; font-size: .6875rem; }
.links-empty { margin-bottom: 16px; padding: 40px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); text-align: center; box-shadow: var(--shadow-card); }
.links-empty h2 { margin: 0; font-size: 1.25rem; }
.links-empty p { color: var(--muted); font-size: .9375rem; }
.links-empty button { border: 1px solid var(--color-primary); border-radius: var(--radius-control); background: var(--color-primary); color: #fff; padding: 10px 18px; font-size: .9375rem; font-weight: 600; }
.links-empty button:hover { background: #126739; border-color: #126739; }
.home-ad-group { min-width: 0; padding: 10px; border: 1px solid #c8d4cc; border-radius: var(--radius-control); background: #edf3ef; box-shadow: 0 2px 8px #172d2114; scroll-margin-top: calc(var(--links-sticky-h) + 16px); }
.home-ad-group h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #5b6f63; font-size: .6875rem; line-height: 1.4; font-weight: 600; }
.home-ad-group h2::before { content: ""; width: 4px; height: 10px; border-radius: 2px; background: #bba477; }
.links-ad-mix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.links-ad-slot { min-width: 0; }
.links-ad-tile { display: block; }
.links-ad-tile img { width: 100%; height: auto; display: block; border-radius: var(--radius-small); }
.home-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 24px; row-gap: 12px; margin-top: 28px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid #ffffff25; color: #e0e8e2; font-size: .75rem; }
.home-footer p { margin: 0; }
.home-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.home-footer a:hover { color: #fff; }
.visually-hidden, .links-search__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 50; padding: 8px 16px; background: var(--color-surface); color: var(--color-primary); border: 2px solid var(--color-primary); }
.skip-link:focus { top: 8px; }
@media (min-width: 1800px) {
  .directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1379px) {
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .page-width { width: calc(100% - 48px); }
  .header-inner { gap: 24px; }
  .brand { width: 206px; }
  .utility-nav { display: none; }
}
@media (max-width: 1099px) {
  .directory-label { padding-inline: 1px; }
  .directory-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "content content" "left right"; gap: 16px; }
  .directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-inner { min-height: 86px; padding-block: 14px; }
  .brand { width: 196px; padding: 9px 12px; }
}
@media (max-width: 680px) {
  .page-width { width: calc(100% - 24px); }
  .header-inner { min-height: 72px; padding-block: 12px; gap: 12px; }
  .brand { width: 112px; padding: 7px; border-radius: 6px; }
  .links-search__field { min-height: 46px; gap: 7px; padding: 0 10px; border-radius: 6px; }
  .links-search__input { padding: 10px 0; }
  .links-search__clear { width: 44px; height: 44px; }
  .links-search__hint { display: none; }
  .search-icon { width: 17px; height: 17px; }
  .links-category-nav { gap: 6px; padding-block: 14px 9px; }
  .links-category-nav a { min-height: 35px; padding: 5px 9px; }
  .directory-label { padding-top: 8px; }
  .directory-label p { font-size: .75rem; }
  .directory-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "left" "right"; gap: 14px; }
  .directory-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .category-rank__head { min-height: 48px; padding: 10px 14px; }
  .rank-list { padding-inline: 10px; }
  .rank-open { min-height: 52px; gap: 8px; }
  .home-ad-group { padding: 12px; }
}
@media (max-width: 360px) {
  .header-inner { gap: 9px; }
  .brand { width: 100px; padding-inline: 6px; }
  .search-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rank-open, .rank-open::after, .links-category-nav a { transition: none; }
}