*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Noto Sans KR",-apple-system,sans-serif;background:#f5f0fa;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:40px 20px}
.container{max-width:1260px;width:100%;min-width:1240px}
.header{text-align:center;margin-bottom:24px}
.header-badge{display:inline-block;background:#8259FF;color:#fff;font-size:16px;font-weight:700;padding:9px 22px;border-radius:24px;letter-spacing:0.5px}
.header-subtitle{font-size:13px;color:#666;margin-top:10px}

.week-selector-wrap{margin-top:16px;display:inline-flex;align-items:center;gap:10px;background:#fff;padding:8px 14px;border-radius:24px;box-shadow:0 2px 12px rgba(130,89,255,0.08)}
.week-selector-wrap label{font-size:12px;font-weight:600;color:#666}
#weekSelector{padding:6px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:600;color:#333;background:#f9fafb;cursor:pointer;font-family:inherit;outline:none;min-width:240px}
#weekSelector:focus{border-color:#8259FF}

.weekly-comment{text-align:center;margin:0 auto 14px;padding:14px 28px;background:linear-gradient(135deg,#fff 0%,#faf7ff 50%,#fff 100%);border:1px solid rgba(130,89,255,0.18);border-left:4px solid #8259FF;border-radius:10px;font-size:15px;font-weight:700;color:#1a1a1a;line-height:1.5;max-width:760px;box-shadow:0 2px 12px rgba(130,89,255,0.06)}
.weekly-comment::before{content:"💡 ";margin-right:4px}

.tip-banner{text-align:center;margin-bottom:14px;padding:8px 16px;background:linear-gradient(90deg,#f5f0fa,#ede5ff,#f5f0fa);border-radius:10px;font-size:13px;color:#5a3dbb;font-weight:600;letter-spacing:0.5px}
.tip-banner span{color:#8259FF;font-weight:800;font-size:14px}

.loading,.error{text-align:center;padding:80px 20px;font-size:14px;color:#666;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(130,89,255,0.08)}
.error{color:#dc2626}
.hidden{display:none !important}

/* ── 메인 그리드 ── */
.main-grid{display:flex;gap:20px;align-items:flex-start}

/* ── 산점도 ── */
.scatter-container{position:relative;width:720px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(130,89,255,0.08);padding:44px 0;flex:0 0 720px;height:628px !important;min-height:628px !important;max-height:628px !important;box-sizing:border-box}
.scatter-inner{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}

.axis-label{position:absolute;font-size:11px;font-weight:700;color:#8259FF;letter-spacing:1px;z-index:15;white-space:nowrap}
.axis-top{top:10px;left:50%;transform:translateX(-50%)}
.axis-bottom{bottom:10px;left:50%;transform:translateX(-50%)}
.axis-left{left:14px;top:50%;transform:translateY(-50%)}
.axis-right{right:14px;top:50%;transform:translateY(-50%)}
.axis-line{position:absolute}
.axis-h{width:92%;height:2px;top:50%;left:4%;transform:translateY(-50%);background:linear-gradient(90deg,transparent,rgba(130,89,255,0.25),transparent)}
.axis-v{width:2px;height:92%;left:50%;top:4%;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(130,89,255,0.25),transparent)}

.q-label{position:absolute;background:rgba(255,255,255,0.95);border-radius:10px;padding:7px 12px;z-index:14;pointer-events:none;border:1px solid rgba(0,0,0,0.06)}
.q-label-text{font-size:11px;font-weight:700;color:#1a1a1a;display:flex;align-items:center;gap:4px}
.q-label-tl{top:10px;left:14px}
.q-label-tr{top:10px;right:14px}
.q-label-bl{bottom:10px;left:14px}
.q-label-br{bottom:10px;right:14px}

.center-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:3px solid #8259FF;border-radius:50%;width:72px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(130,89,255,0.2);z-index:20}
.center-number{font-size:24px;font-weight:900;color:#8259FF;line-height:1}
.center-label{font-size:9px;color:#666;font-weight:500}

/* ── Dots ── */
.dot{position:absolute;border-radius:50%;z-index:5;cursor:pointer;transition:transform .2s,box-shadow .2s,z-index 0s;border:1.5px solid rgba(255,255,255,0.85)}
.dot:hover{transform:scale(2.0);z-index:30}
.dot-q1{background:linear-gradient(135deg,#818cf8,#a5b4fc);box-shadow:0 2px 6px rgba(129,140,248,0.4)}
.dot-q1:hover{box-shadow:0 4px 16px rgba(129,140,248,0.6)}
.dot-q2{background:linear-gradient(135deg,#34d399,#6ee7b7);box-shadow:0 2px 6px rgba(52,211,153,0.4)}
.dot-q2:hover{box-shadow:0 4px 16px rgba(52,211,153,0.6)}
.dot-q3{background:linear-gradient(135deg,#a78bfa,#c4b5fd);box-shadow:0 2px 6px rgba(167,139,250,0.4)}
.dot-q3:hover{box-shadow:0 4px 16px rgba(167,139,250,0.6)}
.dot-q4{background:linear-gradient(135deg,#fb923c,#fdba74);box-shadow:0 2px 6px rgba(251,146,60,0.4)}
.dot-q4:hover{box-shadow:0 4px 16px rgba(251,146,60,0.6)}

.dot.cl-hover{transform:scale(2.6) !important;z-index:40 !important;animation:none !important;box-shadow:0 6px 20px rgba(130,89,255,0.5) !important}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.dot{animation:float 3s ease-in-out infinite}
.dot:nth-child(2n){animation-delay:.5s}.dot:nth-child(3n){animation-delay:1s}.dot:nth-child(4n){animation-delay:1.5s}
.dot:hover{animation:none}

/* ── 툴팁 ── */
.tooltip{position:fixed;background:#fff;border:1px solid rgba(130,89,255,0.15);border-radius:12px;padding:0;box-shadow:0 8px 32px rgba(0,0,0,0.15);width:240px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:99;overflow:hidden}
.tooltip.show{opacity:1}
.tooltip-thumb{width:100%;height:140px;object-fit:cover;display:block;background:#f0ecfa}
.tooltip-thumb.hide{display:none}
.tooltip-text{padding:10px 14px;font-size:12px;font-weight:600;color:#222;line-height:1.45}
.tooltip-arrow{position:fixed;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:9px solid #fff;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.08))}
.tooltip-arrow.show{opacity:1}

.tooltip-go{display:none;padding:8px 14px;background:#8259FF;color:#fff;font-size:12px;font-weight:700;border:none;border-radius:8px;margin:0 14px 10px;cursor:pointer;text-align:center;width:calc(100% - 28px);font-family:inherit}
.tooltip-go:active{background:#6b3fd9}
.touch-device .tooltip{pointer-events:auto}.touch-device .tooltip-go{display:block}.touch-device .dot{animation:none !important}

/* ── 콘텐츠 리스트 ── */
.cl-section{width:480px;flex:0 0 480px;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(130,89,255,0.08);padding:18px;display:flex;flex-direction:column;height:628px !important;min-height:628px !important;max-height:628px !important;box-sizing:border-box;overflow:hidden}
.cl-title{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:14px;flex-shrink:0}
.cl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;flex-shrink:0}
.cl-tab{padding:5px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid #e5e7eb;background:#f9fafb;color:#888;transition:all .15s;font-family:inherit}
.cl-tab:hover{border-color:#8259FF;color:#333}
.cl-tab.active{background:#8259FF;border-color:#8259FF;color:#fff}
.cl-tab.q1.active{background:#818cf8;border-color:#818cf8}
.cl-tab.q2.active{background:#34d399;border-color:#34d399}
.cl-tab.q3.active{background:#a78bfa;border-color:#a78bfa}
.cl-tab.q4.active{background:#fb923c;border-color:#fb923c}
.cl-count{font-size:11px;color:#999;margin-bottom:10px;flex-shrink:0}
.cl-list{flex:1 1 0;min-height:0;overflow-y:auto !important;max-height:100%}
.cl-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:8px;margin-bottom:5px;background:#f9fafb;border-left:3px solid transparent;cursor:pointer;transition:all .15s;text-decoration:none}
.cl-item:hover{background:#f0ecfa}
.cl-item.q1{border-left-color:#818cf8}.cl-item.q2{border-left-color:#34d399}.cl-item.q3{border-left-color:#a78bfa}.cl-item.q4{border-left-color:#fb923c}
.cl-item-title{font-size:13px;color:#333;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-item-arrow{color:#aaa;font-size:12px;margin-left:8px}
.cl-empty{text-align:center;color:#aaa;padding:24px;font-size:13px}

/* ── Footer ── */
.site-footer{margin-top:32px;text-align:center;color:#888;font-size:12px;padding:16px}

/* ── 반응형 ── */
@media(max-width:900px){
  .main-grid{flex-direction:column}
  .cl-section{width:100%;flex:0 0 auto;height:auto !important;min-height:0 !important;max-height:none !important}
  .cl-list{max-height:350px}
}
@media(max-width:600px){
  body{padding:16px 8px}
  .container{max-width:100%;min-width:0 !important}
  .header-badge{font-size:13px;padding:7px 16px}
  .header-subtitle{font-size:11px}
  #weekSelector{min-width:180px;font-size:12px}
  .tip-banner{font-size:11px;padding:6px 12px}
  .weekly-comment{font-size:13px;padding:10px 16px;margin-bottom:10px}
  .scatter-container{padding:28px 0;border-radius:14px;width:100% !important;flex:0 0 auto !important;height:auto !important;min-height:0 !important;max-height:none !important}
  .q-label{padding:4px 8px}
  .q-label-text{font-size:9px}
  .q-label-tl{top:5px;left:8px}.q-label-tr{top:5px;right:8px}
  .q-label-bl{bottom:5px;left:8px}.q-label-br{bottom:5px;right:8px}
  .center-badge{width:52px;height:52px}
  .center-number{font-size:18px}
  .center-label{font-size:7px}
  .axis-label{font-size:9px}
  .axis-left{left:6px}.axis-right{right:6px}
  .scatter-inner{aspect-ratio:3/4}
  .dot{width:14px !important;height:14px !important;animation:none}
  .tooltip{width:200px}
  .tooltip-thumb{height:110px}
  .tooltip-text{font-size:11px;padding:8px 10px}
  .cl-section{display:none}
}