/* de.css — Nagehts 독일어 발음교정 스타일 */

:root {
    --de-primary: #2ABFBF;
    --de-primary-dark: #1a9090;
    --de-pro: #7C5CFC;
    --de-lock: rgba(255,255,255,0.3);
    --de-card-bg: rgba(255,255,255,0.05);
    --de-border: rgba(255,255,255,0.1);
}

/* Landing */
.de-landing { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 0 24px; }
.de-feature-card { background: var(--de-card-bg); border: 1px solid var(--de-border); border-radius: 16px; padding: 20px; text-align: center; }
.de-feature-icon { font-size: 2rem; margin-bottom: 8px; }
.de-feature-card h3 { margin: 0 0 8px; color: var(--de-primary); font-size: 1rem; }
.de-feature-card p { margin: 0; color: #aaa; font-size: 0.85rem; }
.de-cta { text-align: center; padding: 16px 0 32px; }
.de-start-btn { display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, var(--de-primary), var(--de-primary-dark)); color: #fff; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 1.05rem; transition: opacity 0.2s; }
.de-start-btn:hover { opacity: 0.85; }
.trial-notice { background: rgba(255,200,0,0.1); border: 1px solid rgba(255,200,0,0.3); color: #ffd700; border-radius: 10px; padding: 16px; margin-bottom: 16px; text-align: center; }
.trial-notice p { margin: 4px 0; font-size: 0.9rem; }

/* Pro badge */
.pro-badge { background: linear-gradient(135deg, #7C5CFC, #9B7BFF); color: #fff; font-size: 0.65rem; padding: 3px 8px; border-radius: 20px; vertical-align: middle; font-weight: 600; margin-left: 8px; letter-spacing: 0.05em; }
.trial-label { color: #aaa; font-size: 0.85rem; margin: -4px 0 0; }

/* Level tabs */
.level-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.level-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--de-border); background: transparent; color: #ccc; font-family: inherit; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
.level-btn.active { background: var(--de-primary); border-color: var(--de-primary); color: #fff; font-weight: 600; }
.level-btn.locked { opacity: 0.5; cursor: default; }
.level-btn:hover:not(.locked):not(.active) { border-color: var(--de-primary); color: var(--de-primary); }

/* Category tabs */
.category-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.cat-btn { padding: 7px 14px; border-radius: 16px; border: 1px solid var(--de-border); background: transparent; color: #ccc; font-family: inherit; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.cat-btn.active { background: rgba(42,191,191,0.2); border-color: var(--de-primary); color: var(--de-primary); font-weight: 600; }

/* Content list */
.content-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.content-item { background: var(--de-card-bg); border: 1px solid var(--de-border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; }
.content-item:hover { border-color: var(--de-primary); background: rgba(42,191,191,0.08); }
.content-text { font-size: 1.1rem; color: #fff; font-weight: 500; }
.content-sub { font-size: 0.8rem; color: #888; margin-top: 4px; }
.no-content { color: #666; text-align: center; padding: 24px; font-size: 0.9rem; }

/* Practice card */
.practice-card { background: var(--de-card-bg); border: 1px solid var(--de-primary); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.practice-target { font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: 0.03em; }
.practice-ipa { font-size: 0.95rem; color: var(--de-primary); margin-bottom: 6px; font-family: monospace; }
.practice-meaning { font-size: 0.9rem; color: #aaa; margin-bottom: 20px; }

/* TTS buttons */
.tts-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.tts-btn { padding: 9px 18px; border-radius: 10px; border: 1px solid var(--de-border); background: rgba(42,191,191,0.1); color: var(--de-primary); font-family: inherit; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
.tts-btn:hover:not(.locked) { background: rgba(42,191,191,0.2); }
.tts-btn.locked { opacity: 0.5; cursor: default; color: #888; background: transparent; }

/* Record button */
.record-section { text-align: center; padding: 8px 0; }
.de-rec-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 14px; border: 2px solid var(--de-primary); background: transparent; color: var(--de-primary); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.de-rec-btn:hover { background: rgba(42,191,191,0.15); }
.de-rec-btn.recording { border-color: #FF5252; color: #FF5252; background: rgba(255,82,82,0.1); }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--de-primary); transition: background 0.2s; }
.rec-dot.recording { background: #FF5252; animation: pulse 1s infinite; }
.rec-timer { text-align: center; font-size: 0.9rem; color: #FF5252; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* Spinner */
.de-spinner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; color: #aaa; }
.de-spinner .spin-circle { width: 24px; height: 24px; border: 3px solid rgba(42,191,191,0.2); border-top-color: var(--de-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* Results */
.result-panel { background: var(--de-card-bg); border: 1px solid var(--de-border); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.score-section { display: flex; justify-content: center; margin-bottom: 20px; }
.score-gauge { filter: drop-shadow(0 0 12px rgba(42,191,191,0.3)); }
.overall-feedback { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px; color: #ddd; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
.phoneme-section, .prosody-section, .pro-section { margin-bottom: 20px; }
.phoneme-section h4, .prosody-section h4, .pro-section h4 { color: var(--de-primary); font-size: 0.9rem; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.phoneme-issue { background: rgba(255,255,255,0.03); border-left: 3px solid var(--de-primary); border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 8px; }
.pi-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pi-target { color: #fff; font-weight: 600; font-size: 1rem; }
.pi-arrow { color: #666; }
.pi-heard { color: #FF9800; font-weight: 600; }
.pi-tip { color: #bbb; font-size: 0.85rem; }
.pi-ipa { color: #888; font-size: 0.8rem; margin-top: 4px; }
.pi-ipa code { color: #2ABFBF; background: rgba(42,191,191,0.1); padding: 1px 5px; border-radius: 4px; }
.good-msg { color: #4CAF50; font-size: 0.9rem; padding: 8px; }
.prosody-row { display: grid; grid-template-columns: auto auto auto auto auto auto; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 0.85rem; }
.prosody-status.good { color: #4CAF50; }
.prosody-status.needs { color: #FF9800; }
.prosody-text { color: #bbb; font-size: 0.85rem; }
.pro-locked { opacity: 0.6; filter: blur(0); }
.lock-badge { background: var(--de-pro); color: #fff; font-size: 0.65rem; padding: 2px 7px; border-radius: 10px; font-weight: normal; vertical-align: middle; }
.pro-upgrade-hint { background: rgba(124,92,252,0.1); border: 1px solid rgba(124,92,252,0.3); border-radius: 10px; padding: 14px; color: #bbb; font-size: 0.85rem; line-height: 1.7; }
.pro-item { margin-bottom: 16px; }
.pro-item h5 { color: var(--de-pro); font-size: 0.85rem; margin: 0 0 8px; }
.pro-item p, .pro-item ul { color: #ccc; font-size: 0.85rem; line-height: 1.6; margin: 0; padding-left: 16px; }
.retry-btn { width: 100%; padding: 13px; background: transparent; border: 1px solid var(--de-border); border-radius: 10px; color: #aaa; font-family: inherit; font-size: 0.9rem; cursor: pointer; margin-top: 8px; transition: all 0.2s; }
.retry-btn:hover { border-color: var(--de-primary); color: var(--de-primary); }

/* Pro hint modal */
.pro-hint-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.pro-hint-modal.hidden { display: none; }
.pro-hint-box { background: #1A1A2E; border: 1px solid rgba(124,92,252,0.4); border-radius: 16px; padding: 28px; max-width: 320px; text-align: center; }
.pro-hint-box h3 { color: var(--de-pro); margin: 0 0 12px; }
.pro-hint-box p { color: #bbb; font-size: 0.9rem; line-height: 1.6; margin: 0 0 8px; }
.pro-hint-box button { margin-top: 16px; padding: 10px 24px; background: var(--de-pro); border: none; border-radius: 10px; color: #fff; font-family: inherit; font-size: 0.9rem; cursor: pointer; }

/* Error page */
.de-error-box { text-align: center; padding: 40px 24px; }
.de-error-box h2 { color: #FF5252; margin: 0 0 12px; }
.de-error-box p { color: #bbb; }

/* Camera section */
.camera-section { margin-bottom: 16px; text-align: center; }
.camera-toggle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 10px; border: 1px solid var(--de-border); background: rgba(42,191,191,0.06); color: #aaa; font-family: inherit; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
.camera-toggle-btn:hover { border-color: var(--de-primary); color: var(--de-primary); }
.camera-toggle-btn.active { border-color: var(--de-primary); color: var(--de-primary); background: rgba(42,191,191,0.15); }
.camera-preview-wrap { margin-top: 12px; display: flex; justify-content: center; position: relative; }
.camera-preview { width: 160px; height: 120px; border-radius: 12px; border: 2px solid var(--de-primary); object-fit: cover; transform: scaleX(-1); background: #000; }
.capture-canvas { display: none; }

/* Mouth feedback section */
.mouth-section { margin-bottom: 20px; }
.mouth-section h4 { color: #FF9800; font-size: 0.9rem; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.mouth-item { margin-bottom: 12px; }
.mouth-lip-shape { color: #ddd; font-size: 0.95rem; line-height: 1.6; background: rgba(255,152,0,0.08); border-radius: 8px; padding: 10px 14px; margin: 0; }
.mouth-sounds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mouth-sound-card { background: rgba(255,255,255,0.03); border-left: 3px solid #FF9800; border-radius: 0 8px 8px 0; padding: 10px 14px; }
.mouth-sound-header { color: #FF9800; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.mouth-sound-obs { color: #bbb; font-size: 0.85rem; margin-bottom: 4px; }
.mouth-sound-fix { color: var(--de-primary); font-size: 0.85rem; font-weight: 500; }
.mouth-tips { color: #ccc; font-size: 0.85rem; line-height: 1.7; padding-left: 18px; margin: 0; }
.mouth-tips li { margin-bottom: 4px; }

/* Animations */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes spin { to{transform:rotate(360deg)} }