@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root {
    --ink: #17211b;
    --ink-soft: #526158;
    --paper: #f5f1e8;
    --paper-raised: #fffdf7;
    --line: #d8d1c2;
    --forest: #174b3a;
    --forest-deep: #0e3529;
    --coral: #e86445;
    --gold: #c99b42;
    --shadow: 0 18px 48px rgba(24, 45, 35, .11);
    --radius: 18px;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
    color: var(--ink);
    font-family: 'Noto Sans KR', sans-serif !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(201, 155, 66, .14), transparent 27rem),
        linear-gradient(rgba(23, 75, 58, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 75, 58, .028) 1px, transparent 1px),
        var(--paper) !important;
    background-size: auto, 28px 28px, 28px 28px, auto !important;
}

button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { outline-color: var(--coral); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(232, 100, 69, .35) !important;
    outline-offset: 3px;
}

/* Lobby — editorial seminar board */
body > .container { max-width: 1280px; margin-inline: auto; }
.header {
    background: var(--forest) !important;
    color: #fffdf7 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
    position: relative;
}
.header::after {
    content: 'ARGUE  ·  LISTEN  ·  REVISE';
    position: absolute;
    right: 2.2rem;
    bottom: -.35rem;
    color: rgba(255,255,255,.07);
    font-size: clamp(2rem, 5vw, 5.5rem);
    font-weight: 700;
    letter-spacing: .08em;
    pointer-events: none;
    white-space: nowrap;
}
.header-content { position: relative; z-index: 1; }
.logo { color: #fffdf7 !important; font-family: 'Gowun Batang', serif !important; letter-spacing: -.04em; }
.logo i { color: #f4c66d !important; }
.subtitle { color: rgba(255,255,255,.72) !important; }
.btn-create-shortlink, .floating-button {
    border: 1px solid rgba(255,255,255,.28) !important;
    background: var(--coral) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(99, 37, 22, .2) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.btn-create-shortlink:hover, .floating-button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(99,37,22,.26) !important; }

.search-filter-section {
    background: rgba(255,253,247,.88) !important;
    backdrop-filter: blur(18px);
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 26px rgba(24,45,35,.07) !important;
}
.search-input, .filter-select, .form-input, .form-textarea, .form-select {
    color: var(--ink) !important;
    background: #fffdf8 !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
}
.search-input:focus, .filter-select:focus, .form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--forest) !important;
    box-shadow: 0 0 0 4px rgba(23,75,58,.09) !important;
}

.discussions-grid { gap: 1.2rem !important; }
.discussion-card {
    background: var(--paper-raised) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 24px rgba(24,45,35,.07) !important;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.discussion-card::before {
    content: '';
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--forest) 0 68%, var(--gold) 68% 84%, var(--coral) 84%);
}
.discussion-card:hover { transform: translateY(-5px) rotate(-.15deg) !important; box-shadow: var(--shadow) !important; border-color: #b9ad98 !important; }
.discussion-title { font-family: 'Gowun Batang', serif !important; color: var(--ink) !important; line-height: 1.42 !important; }
.type-badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .02em; }
.type-badge.자유 { background: #e2eee7 !important; color: var(--forest) !important; }
.type-badge.팀전 { background: #fae5db !important; color: #9d3c26 !important; }
.type-badge.역할극 { background: #f5eccc !important; color: #765617 !important; }

.modal { backdrop-filter: blur(9px); }
.modal-content {
    background: var(--paper-raised) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 80px rgba(15,37,28,.25) !important;
}
.modal-header { border-color: var(--line) !important; }
.modal-header h2 { font-family: 'Gowun Batang', serif !important; color: var(--ink) !important; }
.mode-option { background: #faf7ef !important; border-color: var(--line) !important; border-radius: 12px !important; }
.mode-option:has(input:checked) { border-color: var(--forest) !important; background: #e7f0eb !important; box-shadow: inset 0 0 0 1px var(--forest); }

/* Discussion room */
body:has(.room-header) > .container { max-width: none; height: 100dvh; padding: 0; }
.room-header {
    background: var(--forest-deep) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 24px rgba(8,30,22,.17) !important;
}
.room-header .header-content { max-width: 1600px; margin: 0 auto; }
.room-title { color: #fffdf7 !important; font-family: 'Gowun Batang', serif !important; letter-spacing: -.03em; }
.room-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-left: .8rem;
    padding: .36rem .65rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    font-size: .74rem;
    white-space: nowrap;
}
.room-status-dot { width: .48rem; height: .48rem; border-radius: 50%; background: #f4c66d; box-shadow: 0 0 0 4px rgba(244,198,109,.13); }
.room-status.connected .room-status-dot { background: #73d7a5; }
.room-status.disconnected .room-status-dot { background: #ff866c; }
.room-header .btn-icon, .room-header .btn-close { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.room-header .btn-icon:hover, .room-header .btn-close:hover { background: rgba(255,255,255,.17) !important; transform: translateY(-2px); }

.discussion-context {
    background: #efe7d6 !important;
    border: 0 !important;
    border-bottom: 1px solid #d4c9b5 !important;
}
.context-title { color: var(--forest-deep) !important; font-weight: 700 !important; }
.main-layout { background: transparent !important; gap: 0 !important; }
.chat-area { background: rgba(255,253,247,.55) !important; }
.chat-container, .messages-area { background: transparent !important; }
.messages-area { scrollbar-color: #b9ad98 transparent; }
.message-list { max-width: 980px; margin: 0 auto; padding: 2rem clamp(1rem,4vw,3rem) !important; }
.message { animation: noteIn .26s ease both; }
@keyframes noteIn { from { opacity: 0; transform: translateY(8px); } }
.message-content {
    background: var(--paper-raised) !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px 16px 16px 16px !important;
    box-shadow: 0 5px 16px rgba(24,45,35,.06) !important;
}
.message-ai .message-content { background: #edf2e8 !important; border-color: #b9c9ae !important; }
.message-author { color: var(--forest-deep) !important; }
.message-text { color: var(--ink) !important; line-height: 1.72 !important; }
.system-message span { background: #e8e0d1 !important; color: var(--ink-soft) !important; border: 1px solid var(--line); }

.message-input-container {
    background: linear-gradient(180deg, rgba(245,241,232,0), var(--paper) 25%) !important;
    border: 0 !important;
    padding: 1.5rem clamp(1rem,4vw,3rem) 1.2rem !important;
}
.input-wrapper {
    max-width: 980px;
    margin: 0 auto;
    background: var(--paper-raised) !important;
    border: 1px solid #bcb19e !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(24,45,35,.11) !important;
}
.message-input { color: var(--ink) !important; }
.btn-send { background: var(--coral) !important; border-radius: 12px !important; }
.btn-voice { border-radius: 12px !important; }
.message-counter { max-width: 980px; margin: .42rem auto 0; text-align: right; color: var(--ink-soft); font-size: .72rem; }

.sidebar {
    background: var(--paper-raised) !important;
    border-left: 1px solid var(--line) !important;
    box-shadow: -16px 0 42px rgba(24,45,35,.09) !important;
}
.sidebar-header { background: #eee7d9 !important; border-color: var(--line) !important; }
.sidebar-title, .section-title { font-family: 'Gowun Batang', serif !important; color: var(--ink) !important; }
.action-btn { transition: transform .18s ease, background .18s ease !important; }
.action-btn.active { background: var(--forest) !important; color: white !important; }
.analysis-tabs { background: #eee7d9 !important; border-radius: 12px !important; }
.tab-btn.active { background: var(--paper-raised) !important; color: var(--forest) !important; box-shadow: 0 4px 14px rgba(24,45,35,.1) !important; }

@media (max-width: 760px) {
    .header { border-radius: 0 0 20px 20px !important; }
    .header::after { display: none; }
    .header-content { align-items: flex-start !important; }
    .logo { font-size: 1.55rem !important; }
    .btn-create-shortlink { width: auto !important; }
    .search-filter-section { margin-inline: .75rem !important; }
    .main-content { padding-inline: .75rem !important; }
    .floating-button { right: 1rem !important; bottom: 1rem !important; }
    .room-title { font-size: 1.05rem !important; max-width: 48vw; }
    .room-status { display: none; }
    .sidebar.active { width: 100% !important; max-width: 100% !important; position: fixed !important; inset: 0; z-index: 50; }
    .message-list { padding-inline: .9rem !important; }
    .message-input-container { padding-inline: .75rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}