:root {
  --pl-ink: #f6f7fb;
  --pl-muted: #9ba5bb;
  --pl-card: rgba(19, 27, 46, .9);
  --pl-line: rgba(255, 255, 255, .09);
  --pl-lime: #b9f54a;
  --pl-cyan: #56d8df;
  --pl-violet: #a78bfa;
  --pl-coral: #ff8c72;
}

body { background: #090e19; }
.pl-app { min-height: 100vh; padding-top: 58px; }
.pl-shell { width: min(1380px, calc(100% - 40px)); margin: 0 auto; }
.pl-hero {
  padding: 46px 0 34px;
  border-bottom: 1px solid var(--pl-line);
  background:
    radial-gradient(700px 320px at 75% 0, rgba(86, 216, 223, .12), transparent 60%),
    radial-gradient(620px 300px at 20% 0, rgba(185, 245, 74, .08), transparent 60%),
    linear-gradient(180deg, #0d1422, #090e19);
}
.pl-hero .pl-shell { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; }
.pl-kicker { display: flex; align-items: center; gap: 9px; color: var(--pl-lime); font-size: 12px; font-weight: 750; letter-spacing: .15em; margin-bottom: 14px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pl-lime); box-shadow: 0 0 0 5px rgba(185, 245, 74, .1); }
.pl-hero h1 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -.045em; line-height: 1.08; }
.pl-hero h1 em { color: var(--pl-lime); font-style: normal; }
.pl-hero-copy > p { max-width: 620px; margin-top: 16px; color: var(--pl-muted); font-size: 16px; }
.pl-hero-status { display: grid; grid-template-columns: repeat(2, auto); border: 1px solid var(--pl-line); border-radius: 14px; overflow: hidden; background: rgba(8, 13, 24, .55); flex: 0 0 auto; }
.pl-hero-status > div { padding: 13px 18px; border-left: 1px solid var(--pl-line); }
.pl-hero-status > div:first-child { border-left: 0; }
.pl-hero-status span { color: #778198; display: block; font-size: 11px; margin-bottom: 2px; }
.pl-hero-status strong { display: block; font-size: 13px; font-weight: 680; white-space: nowrap; }
.confidence-a { color: var(--pl-lime); }
.confidence-b { color: #ffd16b; }
.confidence-c { color: var(--pl-coral); }

.pl-workspace { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 28px; padding-bottom: 72px; }
.pl-sidebar { position: sticky; top: 78px; height: calc(100vh - 98px); display: flex; flex-direction: column; background: rgba(13, 20, 34, .82); border: 1px solid var(--pl-line); border-radius: 18px; padding: 17px; overflow: hidden; }
.side-heading, .area-list-head { display: flex; align-items: center; justify-content: space-between; }
.side-heading > span { font-size: 14px; font-weight: 750; }
.icon-btn, .share-btn { width: 33px; height: 33px; border: 1px solid var(--pl-line); background: rgba(255,255,255,.035); color: #c9d1df; border-radius: 9px; cursor: pointer; font-size: 17px; }
.icon-btn:hover, .share-btn:hover { border-color: rgba(185,245,74,.4); color: var(--pl-lime); }
.search-box { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0 11px; background: #0b111e; border: 1px solid var(--pl-line); border-radius: 10px; color: #69758c; }
.search-box:focus-within { border-color: rgba(185,245,74,.55); }
.search-box input { min-width: 0; border: 0; background: transparent; padding: 10px 0; font-size: 13px; }
.filter-row { display: flex; gap: 5px; margin: 11px 0 13px; overflow-x: auto; scrollbar-width: none; }
.filter-chip { flex: 0 0 auto; padding: 6px 9px; background: transparent; color: #8994aa; border: 1px solid var(--pl-line); border-radius: 999px; font-size: 11.5px; cursor: pointer; }
.filter-chip.active { color: #10150b; background: var(--pl-lime); border-color: var(--pl-lime); font-weight: 750; }
.mini-map { position: relative; height: 144px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; background: #0a111d; border: 1px solid var(--pl-line); }
.mini-map::before { content: ""; position: absolute; inset: 12px 13px; background: rgba(44, 60, 81, .78); clip-path: polygon(42% 0, 58% 5%, 66% 14%, 81% 17%, 88% 30%, 100% 42%, 92% 54%, 96% 68%, 83% 75%, 72% 94%, 57% 89%, 46% 100%, 34% 87%, 17% 83%, 11% 70%, 1% 61%, 5% 47%, 0 36%, 15% 28%, 22% 11%); }
.mini-map::after { content: "한강"; position: absolute; left: 8%; right: 7%; top: 58%; height: 13px; color: rgba(86,216,223,.45); font-size: 8px; letter-spacing: .2em; text-align: center; border-top: 3px solid rgba(86,216,223,.35); transform: rotate(-4deg); }
.map-dot { position: absolute; z-index: 2; width: 8px; height: 8px; margin: -4px; border: 2px solid rgba(255,255,255,.75); background: var(--pl-cyan); border-radius: 50%; cursor: pointer; transition: transform .15s; }
.map-dot:hover { transform: scale(1.45); }
.map-dot.active { width: 12px; height: 12px; margin: -6px; background: var(--pl-lime); box-shadow: 0 0 0 5px rgba(185,245,74,.15); }
.area-list-head { margin: 14px 2px 8px; color: #778198; font-size: 11px; }
.area-list-head b { color: #a8b2c5; }
.area-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -5px; padding: 0 5px 10px; scrollbar-width: thin; scrollbar-color: #303b50 transparent; }
.area-item { width: 100%; display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; padding: 11px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.area-item:hover { background: rgba(255,255,255,.035); }
.area-item.active { background: rgba(185,245,74,.07); border-color: rgba(185,245,74,.25); }
.area-item .status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-relaxed { background: #57dba0; }.status-normal { background: #5db8ff; }.status-busy { background: #ffbd59; }.status-crowded { background: #ff765f; }
.area-item strong { font-size: 13px; display: block; }.area-item small { color: #69758c; font-size: 10.5px; display: block; }
.area-item > b { color: #adb6c6; font-size: 10.5px; font-weight: 600; }

.pl-content { min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.panel-lite { border: 1px solid var(--pl-line); border-radius: 20px; background: linear-gradient(145deg, rgba(19,27,46,.92), rgba(11,17,30,.94)); }
.overview { padding: 28px; }
.area-heading, .section-title-row, .timeline-head, .compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.area-meta { display: flex; gap: 7px; margin-bottom: 8px; }
.area-meta span { color: #9ba5bb; background: rgba(255,255,255,.05); border: 1px solid var(--pl-line); padding: 3px 8px; border-radius: 6px; font-size: 11px; }
.area-heading h2 { margin: 0; font-size: 31px; letter-spacing: -.025em; }
.area-heading p { color: var(--pl-muted); font-size: 13.5px; margin-top: 4px; }
.overview-actions { display: flex; gap: 8px; }
.compare-btn { height: 38px; padding: 0 14px; border: 1px solid rgba(185,245,74,.28); color: var(--pl-lime); background: rgba(185,245,74,.06); border-radius: 10px; font-size: 12px; font-weight: 650; cursor: pointer; }
.compare-btn:hover, .compare-btn.active { background: var(--pl-lime); color: #0c1306; }
.now-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; margin-top: 24px; }
.now-grid > div { min-width: 0; padding: 18px; border: 1px solid var(--pl-line); border-radius: 13px; background: rgba(6,11,21,.4); }
.metric-label { font-size: 11px; color: #778198; margin-bottom: 12px; }
.crowd-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crowd-main strong { font-size: clamp(18px, 2vw, 24px); letter-spacing: -.03em; }
.congestion { padding: 3px 9px; font-size: 11px; font-weight: 750; border-radius: 999px; }
.congestion.relaxed { background: rgba(87,219,160,.12); color: #65e4ad; }.congestion.normal { background: rgba(93,184,255,.12); color: #79c5ff; }.congestion.busy { background: rgba(255,189,89,.13); color: #ffc76d; }.congestion.crowded { background: rgba(255,118,95,.13); color: #ff927f; }
.crowd-card p { color: #808ba0; font-size: 11.5px; margin-top: 6px; }
.gauge-label { display: flex; align-items: baseline; gap: 7px; }.gauge-label strong { font-size: 24px; }.gauge-label span { color: #9aa5b8; font-size: 11.5px; }
.gauge, .gender-bar { height: 7px; background: #263045; border-radius: 999px; overflow: hidden; margin-top: 9px; }
.gauge i { display: block; height: 100%; width: 82%; background: linear-gradient(90deg, var(--pl-violet), var(--pl-cyan)); border-radius: inherit; }
.gauge-scale { display: flex; justify-content: space-between; color: #657087; font-size: 9.5px; margin-top: 6px; }.gauge-scale b { color: #aab3c3; }
.gender-split { display: flex; gap: 32px; }.gender-split span { display:block;color:#778198;font-size:10px; }.gender-split strong { font-size:19px; }
.gender-split > div:first-child strong { color: var(--pl-violet); }.gender-split > div:last-child strong { color: var(--pl-cyan); }
.gender-bar i { display: block; height: 100%; width: 53%; background: var(--pl-violet); border-right: 2px solid #101827; box-shadow: 100px 0 0 var(--pl-cyan); }
.age-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--pl-line); }
.section-label { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; font-weight: 700; }.section-label small { color:#667086;font-size:10px;font-weight:500; }
.age-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 124px; align-items: end; margin-top: 10px; }
.age-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.age-col b { font-size: 10px; color: #aab4c5; font-variant-numeric: tabular-nums; }
.age-bar-wrap { width: min(42px, 75%); height: 84px; display:flex; align-items:flex-end; background:rgba(255,255,255,.025); border-radius:5px 5px 2px 2px; overflow:hidden; }
.age-bar { width:100%; min-height:2px; background: linear-gradient(180deg, var(--pl-lime), rgba(86,216,223,.75)); border-radius:5px 5px 2px 2px; transition:height .25s; }
.age-col span { color:#6f7a90;font-size:10px; }

.eyebrow-sm { color: var(--pl-lime); font-size: 10px; letter-spacing: .16em; font-weight: 800; margin-bottom: 5px; }
.section-title-row h2, .timeline-head h2, .compare-head h2 { margin: 0; font-size: 24px; }
.method-chip { align-self: flex-end; color: #8994a9; border: 1px solid var(--pl-line); padding: 6px 10px; border-radius: 999px; font-size: 10.5px; }
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 18px; }
.persona-card { position: relative; min-height: 270px; overflow: hidden; padding: 21px; border: 1px solid var(--pl-line); background: var(--pl-card); border-radius: 17px; }
.persona-card::after { content:""; position:absolute; width:100px;height:100px;border-radius:50%;right:-35px;top:-40px;background:var(--accent);filter:blur(40px);opacity:.14; }
.persona-rank { color:#69748b;font-size:10px;font-weight:700;letter-spacing:.1em; }.persona-top { display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:12px; }
.persona-top h3 { font-size:18px;letter-spacing:-.02em; }.persona-share { color:var(--accent);font-size:25px;font-weight:800; }
.persona-tags { display:flex;flex-wrap:wrap;gap:5px;margin:12px 0; }.persona-tags span { color:#b8c1d0;background:rgba(255,255,255,.05);padding:3px 7px;border-radius:5px;font-size:9.5px; }
.persona-story { color:#d8ddea;font-size:12.5px;line-height:1.65; }.persona-evidence { margin-top:13px;padding-top:12px;border-top:1px solid var(--pl-line);color:#788399;font-size:10.5px;line-height:1.55; }
.persona-evidence strong { color:#a8b1c1;font-weight:650; }

.timeline { padding: 25px 27px; }
.selected-time { text-align:right; }.selected-time span { display:block;color:#727d93;font-size:10px; }.selected-time strong { font-size:25px;color:var(--pl-lime); }
.forecast-chart { height:130px; display:grid;grid-template-columns:repeat(12,1fr);gap:7px;align-items:end;margin-top:20px;padding:0 3px; }
.forecast-col { position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;cursor:pointer;background:transparent;border:0;padding:0;color:inherit; }
.forecast-col i { display:block;width:100%;max-width:38px;min-height:6px;border-radius:6px 6px 2px 2px;background:#263248;transition:.2s; }
.forecast-col span { color:#69748a;font-size:9px;white-space:nowrap; }.forecast-col.active i { background:linear-gradient(180deg,var(--pl-lime),#5cad68);box-shadow:0 0 20px rgba(185,245,74,.12); }.forecast-col.active span {color:var(--pl-lime);font-weight:700;}
.time-range { width:100%;height:4px;padding:0;margin-top:12px;border:0;background:transparent;accent-color:var(--pl-lime); }
.timeline-insight { margin-top:16px;min-height:48px;padding:12px 15px;border-left:2px solid var(--pl-lime);background:rgba(185,245,74,.045);color:#aab4c5;font-size:12.5px; }.timeline-insight strong { color:#eef2f7; }

.industry-select { color:#788399;font-size:10px;display:flex;align-items:center;gap:8px; }.industry-select select { width:auto;min-width:130px;padding:8px 10px;border-radius:9px;font-size:12px; }
.action-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px; }
.action-card { padding:19px;border:1px solid var(--pl-line);border-radius:15px;background:rgba(17,25,42,.75); }
.action-icon { display:flex;width:33px;height:33px;align-items:center;justify-content:center;border-radius:9px;background:rgba(185,245,74,.08);color:var(--pl-lime);font-size:16px;margin-bottom:12px; }
.action-card small { color:#6c778d;font-size:9.5px;letter-spacing:.09em; }.action-card h3 { font-size:15px;margin:3px 0 7px; }.action-card p { color:#929db1;font-size:11.5px;line-height:1.65; }

.compare-panel { padding:25px;scroll-margin-top:78px; }.compare-pickers { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px; }.compare-pickers > div,.compare-pickers label { padding:13px 15px;border:1px solid var(--pl-line);border-radius:11px;background:rgba(4,8,17,.25); }.compare-pickers span { display:block;color:#6f7a90;font-size:9.5px;margin-bottom:3px; }.compare-pickers strong { font-size:14px; }.compare-pickers select { padding:0;border:0;background:transparent;font-size:14px; }
.compare-table-wrap { overflow-x:auto;margin-top:16px; }.compare-table { width:100%; }.compare-table th { color:#788399;font-size:10px; }.compare-table td { font-size:12.5px; }.compare-table td:nth-child(n+2) { font-weight:650; }.compare-win { color:var(--pl-lime); }

.methodology details { border-top:1px solid var(--pl-line);border-bottom:1px solid var(--pl-line); }.methodology summary { cursor:pointer;padding:17px 2px;color:#8691a7;font-size:12px;font-weight:650;list-style:none; }.methodology summary::after { content:"＋";float:right;color:#6b768c; }.methodology details[open] summary::after { content:"－"; }.method-body { color:#8e99ad;padding:0 2px 20px;font-size:11.5px;line-height:1.7; }.method-body p { margin-bottom:9px; }.method-body ul { padding-left:18px; }.source-note { margin-top:12px;color:#69748a; }
.toast { position:fixed;z-index:200;left:50%;bottom:28px;transform:translate(-50%,18px);background:#eef5df;color:#16200b;padding:10px 16px;border-radius:10px;font-size:12px;font-weight:650;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 10px 30px rgba(0,0,0,.3); }.toast.show { opacity:1;transform:translate(-50%,0); }

@media (max-width: 1100px) {
  .pl-hero .pl-shell { align-items:flex-start; }.pl-hero-status { grid-template-columns:1fr; }.pl-hero-status > div { border-left:0;border-top:1px solid var(--pl-line); }.pl-hero-status > div:first-child{border-top:0;}
  .pl-workspace { grid-template-columns:250px minmax(0,1fr);gap:18px; }.now-grid {grid-template-columns:1fr 1fr;}.crowd-card{grid-column:span 2;}.persona-grid{grid-template-columns:1fr;}.persona-card{min-height:auto;}.action-grid{grid-template-columns:1fr;}
}
@media (max-width: 760px) {
  .pl-shell { width:min(100% - 28px,1380px); }.pl-hero{padding:34px 0 25px;}.pl-hero .pl-shell{display:block;}.pl-hero-status{display:flex;margin-top:24px;overflow-x:auto;}.pl-hero-status > div{border-top:0;border-left:1px solid var(--pl-line);padding:10px 14px;}.pl-hero-status > div:first-child{border-left:0;}
  .pl-workspace{display:block;padding-top:16px;}.pl-sidebar{position:relative;top:auto;height:auto;max-height:none;margin-bottom:24px;padding:14px;}.mini-map{display:none;}.area-list{display:flex;overflow-x:auto;margin-top:2px;padding-bottom:4px;}.area-item{min-width:155px;}.area-list-head{display:none;}.pl-content{gap:38px;}
  .overview{padding:20px 16px;}.area-heading{align-items:flex-start;}.area-heading h2{font-size:26px;}.area-heading p{max-width:220px;}.compare-btn{font-size:0;width:38px;padding:0;}.compare-btn span{font-size:18px;}.now-grid{grid-template-columns:1fr;}.crowd-card{grid-column:auto;}.gender-split{justify-content:space-between;}.age-chart{gap:4px;}.age-bar-wrap{width:70%;}.section-title-row{display:block;}.method-chip{display:inline-block;margin-top:10px;}.timeline{padding:21px 16px;}.forecast-chart{gap:3px;height:110px;}.forecast-col span{font-size:8px;}.industry-select{margin-top:12px;justify-content:flex-start;}.compare-pickers{grid-template-columns:1fr;}
}
@media (max-width: 420px) {
  .overview-actions{gap:5px;}.share-btn{display:none;}.age-col b{font-size:8.5px;}.age-col span{font-size:8.5px;}.persona-top h3{font-size:16px;}.persona-share{font-size:22px;}
}