/* ══════════════════════════════════════════════════════════
   prompties — 메인 스타일시트 v1.0
   잡스 미니멀리즘 + 생물형 애니메이션 + 반응형 3BP
   ══════════════════════════════════════════════════════════ */

/* ── 리셋 & 기본 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font: var(--text-sm)/1.6 var(--font);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }

/* ── 컨테이너 ── */
.app-container {
    max-width: 660px;
    margin: 0 auto;
    padding: var(--s-5) var(--s-4);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── 상단 네비게이션 (미니멀) ── */
.app-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-6);
}
.app-logo {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--text);
    background: none;
    border: none;
    padding: 0;
}
.app-logo span { color: var(--accent); }
.nav-icons {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.nav-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-sub);
    transition: background var(--ease), color var(--ease);
}
.nav-icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.nav-icon-btn.active { color: var(--accent); }
.nav-active-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--ease);
}
.nav-icon-btn.active .nav-active-dot { opacity: 1; }

/* ── 헤더 (잡스 미니멀리즘) ── */
.pp-header {
    text-align: center;
    margin-bottom: var(--s-6);
}
.pp-title {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--text);
    margin: 0 0 var(--s-1) 0;
}
.pp-subtitle {
    font-size: var(--text-xs);
    color: var(--text-sub);
    margin: 0;
}

/* ── 입력 섹션 ── */
.pp-input-section { margin-bottom: var(--s-5); }
.pp-textarea-wrap {
    border-radius: var(--radius-card);
    background: var(--surface);
    transition: box-shadow var(--ease);
}
.pp-textarea-wrap:focus-within {
    box-shadow: 0 0 0 1px var(--accent-dim);
}
.pp-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 360px;
    padding: var(--s-4);
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font: var(--text-sm)/1.6 var(--font);
    resize: vertical;
}
.pp-textarea::placeholder { color: var(--text-faint); }
.pp-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s-2);
}
.pp-char-count {
    font-size: var(--text-xs);
    color: var(--text-faint);
}
.pp-char-count.over { color: var(--clr-error); }

/* ── 예시 칩 ── */
.pp-examples {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-3);
    flex-wrap: wrap;
}
.pp-examples-label {
    font-size: var(--text-xs);
    color: var(--text-faint);
}
.pp-chip {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-xs);
    border: none;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-chip:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* ── 버튼 ── */
.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1-5);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    border: none;
    transition: background var(--ease), color var(--ease), opacity var(--ease), transform var(--fast);
}
.pp-btn:active { transform: scale(0.96); }
.pp-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
.pp-btn-primary {
    background: var(--accent);
    color: var(--contrast-on-accent);
}
.pp-btn-primary:hover:not(:disabled) { background: var(--accent-deep); }
.pp-btn-secondary {
    background: var(--surface-hover);
    color: var(--text);
}
.pp-btn-secondary:hover:not(:disabled) { background: var(--surface-active); }
.pp-btn-ghost {
    background: transparent;
    color: var(--text-sub);
}
.pp-btn-ghost:hover:not(:disabled) {
    background: var(--surface);
    color: var(--text);
}

/* ── 로딩 — 유기적 스피너 ── */
.pp-loading {
    text-align: center;
    padding: var(--s-8) 0;
}
.pp-loading-blob {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--s-5);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-deep));
    animation: blobMorph 4s ease-in-out infinite, organicPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 16px var(--accent-glow));
}
@keyframes blobMorph {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes organicPulse {
    0%   { transform: scale(1); opacity: 0.7; }
    50%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}
.pp-loading-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── 에러 ── */
.pp-error {
    text-align: center;
    padding: var(--s-8) 0;
}
.pp-error-icon {
    color: var(--clr-error);
    margin-bottom: var(--s-3);
}
.pp-error-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-4);
}

/* ── 원본 프롬프트 ── */
.pp-original-prompt {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--s-4);
    margin-bottom: var(--s-5);
}
.pp-original-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-2);
}
.pp-original-label {
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pp-original-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
    word-break: break-word;
}

/* ── 점수 게이지 + 요약 ── */
.pp-score-section {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin-bottom: var(--s-5);
}
.pp-gauge-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.pp-gauge { width: 100%; height: 100%; transform: rotate(-90deg); }
.pp-gauge-bg {
    fill: none;
    stroke: var(--surface-hover);
    stroke-width: 8;
}
.pp-gauge-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pp-gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.pp-gauge-score {
    display: block;
    font-size: 32px;
    font-weight: var(--fw-bold);
    line-height: 1;
}
.pp-gauge-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: var(--s-1);
}
.pp-summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.6;
}

/* 점수 색상 클래스 */
.pp-clr-success { color: var(--clr-success); }
.pp-clr-info    { color: var(--clr-info); }
.pp-clr-warning { color: var(--clr-warning); }
.pp-clr-error   { color: var(--clr-error); }

/* ── 넛지 메시지 ── */
.pp-nudge {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    margin-bottom: var(--s-5);
    line-height: 1.5;
}
.pp-nudge-success { background: var(--clr-success-bg); color: var(--clr-success); }
.pp-nudge-info    { background: var(--clr-info-bg);    color: var(--clr-info); }
.pp-nudge-warning { background: var(--clr-warning-bg); color: var(--clr-warning); }
.pp-nudge-error   { background: var(--clr-error-bg);   color: var(--clr-error); }

/* ── 카테고리 바 ── */
.pp-section-title {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--s-3);
}
.pp-category-item {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.pp-category-item:last-child { margin-bottom: 0; }
.pp-cat-name {
    font-size: var(--text-xs);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.pp-weak-badge {
    font-size: 9px;
    padding: 1px var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--clr-error-bg);
    color: var(--clr-error);
    font-weight: var(--fw-semibold);
}
.pp-cat-bar-wrap {
    height: 6px;
    border-radius: 3px;
    background: var(--surface);
    overflow: hidden;
}
.pp-cat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pp-bg-success { background: var(--clr-success); }
.pp-bg-info    { background: var(--clr-info); }
.pp-bg-warning { background: var(--clr-warning); }
.pp-bg-error   { background: var(--clr-error); }
.pp-cat-score {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-align: right;
}
.pp-cat-feedback {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    color: var(--text-faint);
    line-height: 1.5;
    padding-left: var(--s-2);
}
.pp-category-weak { background: var(--clr-error-bg); border-radius: var(--radius-sm); padding: var(--s-2); }
.pp-categories { margin-bottom: var(--s-5); }

/* ── 개선 방향 카드 ── */
.pp-directions-header { margin-bottom: var(--s-3); }
.pp-directions-sub {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: var(--s-1);
}
.pp-direction-card {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-2);
    cursor: pointer;
    transition: background var(--ease);
}
.pp-direction-card:hover { background: var(--surface-hover); }
.pp-direction-card.selected {
    background: var(--accent-dim);
}
.pp-direction-card.selected .pp-direction-check {
    background: var(--accent);
    opacity: 1;
}
.pp-direction-card-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.pp-direction-check {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.5;
    transition: background var(--ease), opacity var(--ease);
}
.pp-direction-label {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--text);
}
.pp-direction-desc {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: var(--s-1);
    padding-left: 28px;
    line-height: 1.5;
}
.pp-directions-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

/* ── 점수 변화 ── */
.pp-score-change {
    text-align: center;
    margin-bottom: var(--s-5);
    padding: var(--s-5) 0;
}
.pp-score-change-nums {
    font-size: 32px;
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
}
.pp-score-change-arrow {
    color: var(--text-faint);
    font-weight: var(--fw-normal);
}
.pp-score-change-diff {
    display: block;
    font-size: var(--text-sm);
    margin-top: var(--s-2);
}
.pp-score-up   { color: var(--clr-success); }
.pp-score-down { color: var(--clr-error); }

/* ── Before / After 비교 ── */
.pp-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.pp-compare-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--s-2);
}
.pp-compare-text {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: var(--s-3);
    font-size: var(--text-xs);
    color: var(--text-sub);
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
    word-break: break-word;
}

/* ── 변경 사항 ── */
.pp-changes {
    margin-bottom: var(--s-5);
}
.pp-changes-title {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--s-2);
}
.pp-change-item {
    margin-bottom: var(--s-1-5);
    font-size: var(--text-xs);
    color: var(--text-sub);
}
.pp-change-tag {
    display: inline-block;
    padding: 1px var(--s-1-5);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    margin-right: var(--s-1-5);
}
.pp-change-tag-added   { background: var(--clr-success-bg); color: var(--clr-success); }
.pp-change-tag-removed { background: var(--clr-error-bg);   color: var(--clr-error); }
.pp-change-tag-modified { background: var(--clr-info-bg);   color: var(--clr-info); }

/* ── 액션 버튼 그룹 ── */
.pp-improved-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

/* ── 히스토리 화면 ── */
.history-header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.history-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-sub);
    transition: background var(--ease);
}
.history-back-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.history-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
}
.history-count {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-left: auto;
}

/* 통계 요약 카드 */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.stat-card {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: var(--s-3) var(--s-4);
    text-align: center;
}
.stat-value {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--text);
}
.stat-label {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: var(--s-1);
}

/* 히스토리 아이템 */
.history-item {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: var(--s-4);
    margin-bottom: var(--s-2);
    cursor: pointer;
    transition: background var(--ease), transform var(--fast);
}
.history-item:hover {
    background: var(--surface-hover);
    transform: translateY(-1px);
}
.history-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
}
.history-prompt-text {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.5;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.history-score-badge {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.history-item-meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
    font-size: var(--text-xs);
    color: var(--text-faint);
}
.history-empty {
    text-align: center;
    padding: var(--s-8) 0;
    color: var(--text-faint);
    font-size: var(--text-sm);
}
.history-load-more {
    display: block;
    width: 100%;
    padding: var(--s-3);
    margin-top: var(--s-3);
    background: var(--surface);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background var(--ease);
}
.history-load-more:hover { background: var(--surface-hover); }

/* ── Stagger 애니메이션 ── */
.stagger-item {
    opacity: 0;
    transform: translateY(12px);
    animation: staggerIn 0.4s ease-out forwards;
    animation-delay: calc(var(--stagger-i, 0) * var(--stagger-delay, 80ms));
}
@keyframes staggerIn {
    to { opacity: 1; transform: translateY(0); }
}

/* 호흡 글로우 (게이지 배경) */
.gauge-breathe {
    animation: gaugeBreath 3s ease-in-out infinite;
}
@keyframes gaugeBreath {
    0%   { filter: drop-shadow(0 0 8px rgba(45,212,191, 0.1)); }
    50%  { filter: drop-shadow(0 0 20px rgba(45,212,191, 0.25)); }
    100% { filter: drop-shadow(0 0 8px rgba(45,212,191, 0.1)); }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .stagger-item { opacity: 1; transform: none; }
}

/* ── 반응형: Tablet (641~960px) ── */
@media (max-width: 960px) {
    .app-container { max-width: 560px; }
    .pp-gauge-wrap { width: 100px; height: 100px; }
    .pp-gauge-score { font-size: 28px; }
    .pp-score-change-nums { font-size: 28px; }
}

/* ── 반응형: Mobile (≤640px) ── */
@media (max-width: 640px) {
    .app-container {
        max-width: 100%;
        padding: var(--s-4) var(--s-4);
    }
    .pp-title { font-size: var(--text-lg); }
    .pp-gauge-wrap { width: 88px; height: 88px; }
    .pp-gauge-score { font-size: 24px; }
    .pp-score-section { flex-direction: column; text-align: center; }
    .pp-score-change-nums { font-size: 24px; }
    .pp-compare { grid-template-columns: 1fr; }
    .pp-directions-actions { flex-direction: column; }
    .pp-directions-actions .pp-btn { width: 100%; justify-content: center; }
    .pp-improved-actions { flex-direction: column; }
    .pp-improved-actions .pp-btn { width: 100%; justify-content: center; }
    .pp-category-item { grid-template-columns: 60px 1fr 30px; }
    .pp-examples { flex-direction: column; align-items: flex-start; }
    .stats-summary { grid-template-columns: 1fr; }
    .stats-cards { gap: var(--s-3); }
    .stat-card-lg { padding: var(--s-4) var(--s-3); }
    .stat-lg-value { font-size: var(--text-xl); }
    .history-header { margin-bottom: var(--s-4); }
}

/* ── 통계 대형 카드 ── */
.stats-cards {
    display: grid;
    gap: var(--s-4);
}
.stat-card-lg {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--s-5) var(--s-4);
    text-align: center;
}
.stat-lg-value {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--text);
}
.stat-lg-sub {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: var(--s-1);
}
.stat-lg-label {
    font-size: var(--text-xs);
    color: var(--text-sub);
    margin-top: var(--s-2);
}

/* ── 뷰 전환 ── */
.view { display: none; }
.view.active { display: block; }
.view.view-transitioning { display: block; }

/* 뷰 전환 애니메이션 */
.view-slide-in {
    animation: viewSlideIn 250ms ease-out forwards;
}
.view-slide-out {
    animation: viewSlideOut 250ms ease-out forwards;
}
.view-slide-in-reverse {
    animation: viewSlideInReverse 250ms ease-out forwards;
}
.view-slide-out-reverse {
    animation: viewSlideOutReverse 250ms ease-out forwards;
}
.view-crossfade-in {
    animation: crossFadeIn 200ms ease-out forwards;
}
.view-crossfade-out {
    animation: crossFadeOut 200ms ease-out forwards;
}

@keyframes viewSlideIn {
    from { opacity: 0; transform: translateX(8%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes viewSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-8%); }
}
@keyframes viewSlideInReverse {
    from { opacity: 0; transform: translateX(-8%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes viewSlideOutReverse {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(8%); }
}
@keyframes crossFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes crossFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── 리플 효과 (버튼 클릭) ── */
.pp-btn-primary {
    position: relative;
    overflow: hidden;
}
.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255, 0.3);
    transform: scale(0);
    animation: rippleExpand 400ms ease-out forwards;
    pointer-events: none;
}
@keyframes rippleExpand {
    to { transform: scale(2.5); opacity: 0; }
}

/* ── 섹션 전환 ── */
.phase { display: none; }
.phase.active { display: block; }