/* ===== Ocean Breeze Design System ===== */
:root {
  /* Primary */
  --ocean-blue: #4A90D9;
  --sky-blue: #87CEEB;
  --aqua: #40E0D0;
  /* Secondary */
  --coral: #FF6B6B;
  --mint: #98FB98;
  --sunshine: #FFD93D;
  /* Neutral */
  --pure-white: #FFFFFF;
  --cloud: #F0F8FF;
  --mist: #E8F4F8;
  --slate: #64748B;
  --deep-sea: #1E3A5F;
  --placeholder: #94A3B8;
  --body-text: #334155;
  /* Syntax highlighting roles */
  --role-S: #4A90D9;
  --role-V: #2ECC71;
  --role-O: #F1C40F;
  --role-C: #9B59B6;
  --role-Adj: #E67E22;
  --role-Adv: #1ABC9C;
  --role-Other: #95A5A6;

  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 20px rgba(30, 58, 95, 0.08);
  --shadow-btn: 0 4px 15px rgba(74, 144, 217, 0.3);
  --font-ui: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  color: var(--body-text);
  background: linear-gradient(180deg, var(--cloud) 0%, #ffffff 40%);
  min-height: 100vh;
  line-height: 1.6;
}

/* ===== Header ===== */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(90deg, var(--ocean-blue), var(--sky-blue));
  color: #fff;
  box-shadow: var(--shadow-btn);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.tagline { font-size: 13px; opacity: 0.92; font-weight: 400; }
.brand-wave { font-size: 30px; animation: wave 3s ease-in-out infinite; }
@keyframes wave { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }

.container { max-width: 900px; margin: 0 auto; padding: 24px 16px 80px; }

/* ===== Card ===== */
.card {
  background: var(--pure-white);
  border: 1px solid var(--mist);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 20px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* ===== Input (Phase 1) ===== */
.input-label { display:block; font-size:16px; font-weight:600; color:var(--deep-sea); margin-bottom:10px; }
.text-input {
  width: 100%;
  background: var(--cloud);
  border: 2px solid var(--mist);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--deep-sea);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.text-input::placeholder { color: var(--placeholder); }
.text-input:focus {
  outline: none;
  border-color: var(--ocean-blue);
  box-shadow: 0 0 0 4px rgba(74,144,217,0.12);
}
.input-row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:12px; flex-wrap:wrap; }
.input-actions { display:flex; gap:10px; }
.hint { font-size:14px; color:var(--slate); }

/* ===== Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--ocean-blue), var(--sky-blue));
  color:#fff; border:none; border-radius: var(--radius);
  padding: 12px 22px; font-family: var(--font-ui); font-size:16px; font-weight:600;
  cursor:pointer; box-shadow: var(--shadow-btn);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,144,217,0.4); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn-secondary {
  background:#fff; color:var(--ocean-blue); border:2px solid var(--ocean-blue);
  border-radius: var(--radius); padding: 10px 18px; font-size:15px; font-weight:600;
  cursor:pointer; transition: background 0.2s ease;
}
.btn-secondary:hover { background: var(--cloud); }
.btn-sm { padding: 7px 14px; font-size:14px; }
.badge { background: var(--coral); color:#fff; border-radius:10px; padding:1px 7px; font-size:12px; margin-left:4px; }

/* ===== Loading ===== */
.loading { text-align:center; padding: 30px; color: var(--slate); }
.wave-loader { display:inline-flex; gap:5px; margin-bottom:12px; }
.wave-loader span {
  width:8px; height:26px; border-radius:4px;
  background: linear-gradient(var(--ocean-blue), var(--aqua));
  animation: wave-bar 1s ease-in-out infinite;
}
.wave-loader span:nth-child(2){animation-delay:.1s}
.wave-loader span:nth-child(3){animation-delay:.2s}
.wave-loader span:nth-child(4){animation-delay:.3s}
.wave-loader span:nth-child(5){animation-delay:.4s}
@keyframes wave-bar { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }

.error-box { background:#FFF0F0; border:1px solid var(--coral); color:#C0392B; padding:14px 18px; border-radius:var(--radius); margin-bottom:20px; }

/* ===== Animations ===== */
.fade-up { animation: fadeUp 0.4s ease both; }
@keyframes fadeUp { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* ===== Translation ===== */
.chip { display:inline-block; background:var(--mist); color:var(--ocean-blue); font-size:12px; font-weight:600; padding:3px 10px; border-radius:8px; margin-bottom:8px; }
.translation-text { font-size:18px; color:var(--deep-sea); font-weight:500; }

/* ===== Tabs ===== */
.tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:2px solid var(--mist); margin-bottom:20px; }
.tab {
  background:none; border:none; padding:12px 16px; font-size:15px; font-weight:600;
  color:var(--slate); cursor:pointer; white-space:nowrap;
  border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.2s ease;
}
.tab:hover { background:var(--cloud); color:var(--ocean-blue); }
.tab.active { color:var(--ocean-blue); border-bottom-color:var(--ocean-blue); }

.tab-panel { display:none; }
.tab-panel.active { display:block; animation: fadeUp 0.3s ease both; }

/* ===== Structure tokens ===== */
.token-sentence { font-family:var(--font-mono); font-size:17px; line-height:2.4; margin-bottom:20px; }
.token {
  display:inline-block; padding:2px 6px; border-radius:6px; margin:2px 1px;
  border-bottom:3px solid transparent; cursor:default; transition:transform 0.1s ease;
  position:relative;
}
.token[data-role]:hover { transform:translateY(-2px); }
.token .tip {
  display:none; position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  background:var(--deep-sea); color:#fff; font-family:var(--font-ui); font-size:12px;
  padding:6px 10px; border-radius:8px; white-space:nowrap; z-index:10; box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.token:hover .tip { display:block; }
.tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--deep-sea); }

.legend { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--slate); }
.legend-dot { width:12px; height:12px; border-radius:3px; }

.tree-box, .code-box {
  font-family:var(--font-mono); font-size:14px; white-space:pre-wrap;
  background:var(--cloud); border:1px solid var(--mist); border-radius:var(--radius);
  padding:16px; color:var(--deep-sea); overflow-x:auto;
}
.section-sub { font-size:15px; font-weight:600; color:var(--deep-sea); margin:18px 0 8px; }
.muted { color:var(--slate); }

/* ===== Generic item lists ===== */
.item {
  border:1px solid var(--mist); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.item:hover { border-color:var(--sky-blue); box-shadow:var(--shadow-card); }
.item-head { font-weight:600; color:var(--deep-sea); margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kind-tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--mist); color:var(--ocean-blue); }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.pill { font-size:12px; background:var(--cloud); border:1px solid var(--mist); color:var(--slate); padding:2px 9px; border-radius:12px; }

/* clickable vocab word */
.word-link { color:var(--ocean-blue); font-weight:600; cursor:pointer; border-bottom:1px dashed var(--ocean-blue); }
.word-link:hover { background:var(--cloud); }

/* Expert issue */
.issue { border-left:4px solid var(--coral); background:#FFF8F8; padding:12px 16px; border-radius:0 var(--radius) var(--radius) 0; margin-bottom:12px; }
.issue-type { display:inline-block; background:var(--coral); color:#fff; font-size:12px; font-weight:600; padding:2px 10px; border-radius:8px; margin-bottom:6px; }
.issue .where { font-family:var(--font-mono); font-size:14px; color:var(--deep-sea); background:var(--mist); padding:2px 6px; border-radius:5px; }
.expert-summary { background:linear-gradient(135deg, rgba(74,144,217,.08), rgba(64,224,208,.08)); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; font-size:15px; color:var(--deep-sea); }

/* diff */
.diff-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0; }
.diff-cell { padding:10px 14px; border-radius:var(--radius); font-size:14px; }
.diff-en { background:rgba(74,144,217,.08); border:1px solid rgba(74,144,217,.25); }
.diff-ko { background:rgba(255,107,107,.07); border:1px solid rgba(255,107,107,.2); }
.diff-point { font-weight:600; color:var(--deep-sea); margin-top:14px; }

/* ===== Resources ===== */
.resources-card h3 { color:var(--deep-sea); margin-bottom:12px; }
.resources-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; }
.resource {
  display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--mist);
  border-radius:var(--radius); text-decoration:none; color:var(--body-text); transition:all 0.2s ease;
}
.resource:hover { border-color:var(--ocean-blue); background:var(--cloud); transform:translateY(-2px); }
.resource .r-title { font-weight:600; font-size:14px; color:var(--deep-sea); }
.resource .r-source { font-size:12px; color:var(--slate); }

/* ===== Practice ===== */
.practice-item { border:1px solid var(--mist); border-radius:var(--radius); padding:16px; margin-bottom:14px; }
.practice-sentence { font-family:var(--font-mono); font-size:16px; color:var(--deep-sea); margin-bottom:8px; }
.practice-hint { font-size:13px; color:var(--slate); margin-bottom:8px; }
.practice-answer-input { width:100%; border:2px solid var(--mist); border-radius:var(--radius); padding:10px 12px; font-size:15px; font-family:var(--font-ui); }
.practice-answer-input:focus { outline:none; border-color:var(--ocean-blue); }
.grade-result { margin-top:10px; padding:12px; border-radius:var(--radius); font-size:14px; }
.grade-정답 { background:rgba(46,204,113,.1); border:1px solid #2ECC71; }
.grade-부분정답 { background:rgba(255,217,61,.12); border:1px solid var(--sunshine); }
.grade-오답 { background:rgba(255,107,107,.1); border:1px solid var(--coral); }
.score-badge { font-weight:700; font-size:18px; color:var(--deep-sea); }

/* ===== Word side panel ===== */
.word-panel {
  position:fixed; top:0; right:0; height:100%; width:min(420px,90vw);
  background:#fff; box-shadow:-8px 0 30px rgba(30,58,95,.15);
  transform:translateX(100%); transition:transform 0.3s ease; z-index:100; overflow-y:auto;
}
.word-panel.open { transform:translateX(0); }
.word-panel-inner { padding:24px; }
.word-close { position:absolute; top:14px; right:16px; background:var(--mist); border:none; width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; color:var(--slate); }
.word-close:hover { background:var(--sky-blue); color:#fff; }
.panel-overlay { position:fixed; inset:0; background:rgba(30,58,95,.3); z-index:99; }

.wp-word { font-size:28px; font-weight:700; color:var(--deep-sea); }
.wp-pron { color:var(--slate); font-family:var(--font-mono); margin-bottom:4px; }
.wp-meaning { font-size:17px; color:var(--ocean-blue); font-weight:600; margin:8px 0; }
.wp-section-title { font-size:14px; font-weight:700; color:var(--deep-sea); margin:18px 0 6px; padding-bottom:4px; border-bottom:2px solid var(--mist); }
.wp-etym { font-size:14px; background:var(--cloud); padding:12px; border-radius:var(--radius); }
.deriv { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--mist); font-size:14px; }
.deriv b { color:var(--ocean-blue); }
.tip-box { background:linear-gradient(135deg, rgba(255,217,61,.15), rgba(152,251,152,.15)); border-radius:var(--radius); padding:12px; font-size:14px; margin-top:14px; }

/* ===== Modal ===== */
.modal { position:fixed; inset:0; background:rgba(30,58,95,.4); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; }
.modal[hidden] { display:none; }
.modal-inner { position:relative; max-width:560px; width:100%; max-height:85vh; overflow-y:auto; }
.modal-inner h2 { color:var(--deep-sea); margin-bottom:16px; }

/* ===== Responsive ===== */
@media (max-width:640px) {
  .diff-row { grid-template-columns:1fr; }
  .brand h1 { font-size:20px; }
  .tagline { font-size:11px; }
  .container { padding:16px 12px 60px; }
}