:root{ --bg:#f8f9fd; --card:#ffffff; --text:#1f2937; --muted:#6c7285; --accent:#f9c449; --good:#38b26a; --warn:#f97316; --sel:#ffe9a3 }
body{ margin:0; background:linear-gradient(135deg,#fefefe,#f8f9ff 40%,#fff7dc); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR","Helvetica Neue",Arial,sans-serif; line-height:1.6; width:100%; overflow-x:hidden }
.wrap{ max-width:420px; margin:0 auto; padding:32px 20px; min-height:100vh; box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100% }
.card{ position:relative; background:rgba(255,255,255,.95); border-radius:22px; padding:28px; box-shadow:0 25px 60px rgba(209,214,225,.45); display:flex; flex-direction:column; gap:20px; overflow:hidden; width:100%; max-width:380px; margin:0 auto }
.card::before{ content:""; position:absolute; inset:-140px -140px auto auto; height:240px; width:240px; background:radial-gradient(circle at top right,rgba(249,196,73,.35),transparent 70%); pointer-events:none }
.card-header{ display:flex; align-items:center; justify-content:flex-end; gap:16px; padding-bottom:14px; border-bottom:1px solid rgba(15,23,42,.08) }
.badge{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#111; background:rgba(249,196,73,.2); border:1px solid rgba(249,196,73,.35); border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px }
.title-wrap{ display:flex; flex-direction:column; gap:4px; margin-left:auto; align-items:flex-end; text-align:right }
.title{ font-weight:700; font-size:22px; white-space:nowrap; color:var(--text) }
.subtitle{ color:var(--muted); font-size:13px }
.card-section{ display:flex; flex-direction:column; gap:12px }
.input-section{ order:2; margin-top:-12px }
.section-title{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); flex-shrink:0 }
.topic{ margin:0; padding:18px; background:#fdfdfd; border-radius:16px; border:1px solid rgba(15,23,42,.08); display:flex; flex-direction:column; gap:10px; box-shadow:0 12px 24px rgba(209,214,225,.18) }
.topic-message{ font-size:14px; color:#111; letter-spacing:.12em; text-transform:uppercase }
.topic-en{ font-size:18px; font-weight:600; line-height:1.5; color:var(--text) }
.topic-ko{ font-size:13px; color:#7a8198; line-height:1.5 }
.two-col{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.panel{ background:#ffffff; border-radius:16px; border:1px solid rgba(15,23,42,.06); padding:12px 14px; display:flex; flex-direction:column; gap:8px; box-shadow:0 10px 30px rgba(188,195,210,.15) }
.helpers{ display:flex; gap:8px; flex-wrap:wrap; margin-top:0 }
.helpers:empty::before{ content:"불러오는 중..."; color:var(--muted); font-size:13px }
.chip{ background:#f2f4f7; border-radius:999px; padding:6px 12px; font-size:13px; cursor:default; border:1px solid rgba(148,163,184,.4); display:inline-flex; align-items:center; gap:6px; transition:transform .2s ease, box-shadow .2s ease; line-height:1.3; color:#3f4757 }
.chip.selected{ background:#f9c449; color:#3b2f00; box-shadow:0 8px 18px rgba(249,196,73,.3) }
.grammar{ margin-top:0; display:flex; flex-wrap:wrap; gap:8px }
.grammar:empty::before{ content:"패턴 정보가 도착하면 여기에 표시됩니다."; color:var(--muted); font-size:13px }
textarea{ width:100%; min-height:92px; margin-top:0; padding:16px 18px; border-radius:16px; background:#ffffff; border:1px solid rgba(249,196,73,.35); color:var(--text); font-size:15px; resize:vertical; transition:border .2s ease, box-shadow .2s ease; box-sizing:border-box; display:block; box-shadow:0 14px 30px rgba(209,214,225,.25) }
textarea:hover{ border-color:rgba(249,196,73,.45) }
textarea:focus{ outline:none; border-color:rgba(220,165,52,.85); box-shadow:0 16px 32px rgba(209,214,225,.35) }
textarea::placeholder{ color:rgba(96,103,120,.85) }
.section-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.compose-title{ font-size:14px; font-weight:400; color:#111; letter-spacing:.06em; text-transform:uppercase; margin-left:8px }
.guide-btn{ padding:6px 14px; border-radius:999px; border:1px solid rgba(17,17,17,.12); background:rgba(17,17,17,.04); color:#111; font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s ease, border .2s ease, transform .2s ease }
.guide-btn:hover{ background:rgba(17,17,17,.08); border-color:rgba(17,17,17,.2); transform:translateY(-1px) }
.hint{ width:100%; max-width:100%; font-size:11px; color:#7a8198; padding:8px 12px; background:#fff8dc; border-radius:12px; border:1px dashed rgba(249,196,73,.45); min-height:32px; display:flex; align-items:center; justify-content:flex-start; line-height:1.3; margin-top:6px; box-sizing:border-box }
.inline-helpers{ margin-top:12px }
.submit-bar{ display:flex; justify-content:flex-end; margin-top:12px; width:100% }
.card-footer{ display:flex; flex-direction:column; gap:16px; border-top:1px solid rgba(15,23,42,.08); padding-top:16px }
.progress{ margin-top:6px; display:flex; gap:6px; padding:6px; background:#f7f2d9; border-radius:10px; border:1px solid rgba(249,196,73,.35) }
.seg{ flex:1; height:12px; border-radius:6px; background:#f2e4bd; position:relative; font-size:0 }
.seg::after{ content:attr(data-index); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#a27a0d; letter-spacing:.04em }
.seg[data-index="0"]::after{ content:"20%" }
.seg[data-index="1"]::after{ content:"40%" }
.seg[data-index="2"]::after{ content:"60%" }
.seg[data-index="3"]::after{ content:"80%" }
.seg[data-index="4"]::after{ content:"100%" }
.seg.fill{ background:linear-gradient(90deg,var(--accent),#ffe8a0) }
.seg.fill::after{ color:#4a3800; font-weight:600 }
.primary{ 
  background:#007AFF; 
  color:#ffffff; 
  padding:12px 20px; 
  border-radius:12px; 
  border:none; 
  font-size:15px; 
  font-weight:600; 
  cursor:pointer; 
  transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  flex-shrink:0; 
  box-shadow:0 4px 16px rgba(0,122,255,.25); 
  width:100% 
}
.primary:disabled{ 
  cursor:not-allowed; 
  background:#D1D1D6; 
  color:#8E8E93; 
  transform:none; 
  box-shadow:0 1px 4px rgba(0,0,0,.1); 
  opacity:1 
}
.primary.completed{ 
  background:#34C759; 
  color:#ffffff; 
  box-shadow:0 4px 16px rgba(52,199,89,.25) 
}
.primary.completed:disabled{ 
  background:#34C759; 
  color:#ffffff; 
  opacity:.8; 
  box-shadow:0 2px 8px rgba(52,199,89,.2) 
}
.primary:not(:disabled):hover{ 
  transform:translateY(-1px); 
  background:#0056CC; 
  box-shadow:0 8px 24px rgba(0,122,255,.35) 
}
.primary:not(:disabled):active{ 
  transform:translateY(0); 
  background:#004494; 
  box-shadow:0 2px 8px rgba(0,122,255,.2) 
}
.tts{ margin-left:4px; cursor:pointer }
.smalllink{ margin-left:8px; color:var(--accent); font-size:12px; display:inline-flex; align-items:center; line-height:1; text-decoration:none }
.smalllink:hover{ text-decoration:underline }
.msg{ margin-top:0; font-size:14px; line-height:1.5 }
.results-ready{ gap:18px }
.results-header{ display:flex; align-items:center; justify-content:flex-start }
.results-header .compose-title{ margin-left:0; letter-spacing:.1em }
.result-block{ background:#ffffff; border:1px solid rgba(15,23,42,.08); border-radius:16px; padding:16px 18px; box-shadow:0 12px 28px rgba(209,214,225,.2); display:flex; flex-direction:column; gap:6px }
.original-block{ background:#ffffff }
.strength-block{ background:#f3f8ff; border:1px solid rgba(59,130,246,.2) }
.encouragement-block{ background:#fff6f0; border:1px solid rgba(244,114,82,.25) }
.feedback-block{ background:#f9f9ff; border:1px solid rgba(99,102,241,.25) }
.result-title{ margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#111 }
.result-text{ margin:0; font-size:14px; color:#2f3645; line-height:1.6; white-space:pre-wrap }
.result-text del{ text-decoration-color:#d14343; color:#d14343 }
.result-text strong{ color:#111 }
.correction-item{ padding:10px 12px; border-radius:12px; border:1px solid rgba(17,24,39,.08); background:#fdfbf4; margin-bottom:8px }
.correction-item:last-child{ margin-bottom:0 }
.correction-display{ font-size:14px; color:#3b2f00; line-height:1.5 }
.correction-reason{ margin-top:6px; font-size:12px; color:#6e7384 }
.modal-backdrop{ position:fixed; inset:0; background:rgba(253,250,240,.75); display:none; align-items:center; justify-content:center; z-index:1000; padding:16px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px) }
.modal-backdrop.open{ display:flex }
.modal-card{ width:clamp(280px,85vw,420px); background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,248,219,.92)); border-radius:18px; border:1px solid rgba(249,196,73,.45); box-shadow:0 28px 60px rgba(214,197,145,.35); padding:22px 26px; display:flex; flex-direction:column; gap:18px; transform:translateY(12px); opacity:0; transition:transform .28s cubic-bezier(.22,.78,.27,1), opacity .28s ease }
.modal-backdrop.open .modal-card{ transform:translateY(0); opacity:1 }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.modal-header h2{ margin:0; font-size:18px; color:#b7791f; letter-spacing:.12em; text-transform:uppercase }
.modal-close{ background:rgba(249,196,73,.15); border:1px solid rgba(249,196,73,.35); color:#b7791f; font-size:18px; cursor:pointer; line-height:1; border-radius:999px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease }
.modal-close:hover{ background:rgba(249,196,73,.22); color:#7a5310 }
.modal-body{ font-size:14px; color:#5b6276; display:flex; flex-direction:column; gap:10px }
.modal-body p{ margin:0 }

/* Loading spinner */
@keyframes spin{ to{ transform: rotate(360deg); } }
.loading-spinner{ animation: spin 1s linear infinite }

/* 모든 디바이스에서 동일한 모바일 레이아웃 강제 적용 */
@media (min-width:541px){
  .wrap{ 
    max-width:420px !important; 
    padding:32px 20px !important; 
  }
  .card{ 
    max-width:380px !important; 
    display:flex !important; 
    flex-direction:column !important; 
    grid-template-columns:none !important; 
    grid-template-areas:none !important; 
    gap:20px !important; 
  }
  .input-section{ 
    order:2 !important; 
    margin-top:-12px !important; 
  }
  .topic-section{ 
    order:1 !important; 
  }
  .card-footer{ 
    order:3 !important; 
  }
  .submit-bar{ 
    width:100% !important; 
  }
  .primary{ 
    width:100% !important; 
  }
}

@media (max-width:540px){
  .wrap{ padding:16px 12px }
  .card{ padding:18px; border-radius:18px; max-width:none }
  .card-header{ flex-direction:row; align-items:center; flex-wrap:nowrap }
  .badge{ padding:5px 10px }
  .title{ font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .topic{ padding:14px }
  .panel{ padding:12px }
  .section-header{ gap:8px }
  .guide-btn{ font-size:10px; padding:6px 12px }
  .hint{ min-height:30px }
  .inline-helpers{ margin-top:10px }
  .submit-bar{ width:100% }
  .primary{ width:100% }
}