:root {
  --ink: #4b342d;
  --muted: #8c7770;
  --line: #eadfd5;
  --paper: #fffaf3;
  --green: #6a493d;
  --lime: #dfe7c5;
  --coral: #df8582;
  --lunch: #e9f0d8;
  --dinner: #f4dfe1;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Pretendard, Arial, sans-serif; font-size: 14px; }
body.menu-open { overflow: hidden; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 240px; background: #4b332b; color: #f4e7dc; padding: 35px 20px; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff8ef; text-decoration: none; font-family: 'Nanum Myeongjo', serif; font-size: 18px; font-weight: 800; padding: 0 8px 42px; }
.brand small { display: block; font-family: 'DM Mono'; font-size: 8px; letter-spacing: 1.5px; color: #d8bdb0; margin-top: 4px; }
.brand-mark { height: 84px; width: 84px; display: grid; place-items: center; flex: none; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-name { display: block; white-space: nowrap; letter-spacing: -.04em; }
nav { display: grid; gap: 7px; }
.nav-item { background: transparent; border: 0; color: #e4d2c8; font: inherit; text-align: left; border-radius: 8px; padding: 13px 12px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.nav-item span { font-size: 20px; font-weight: 400; }
.nav-item:hover, .nav-item.active { background: #745247; color: #fffaf3; }
.nav-item b { font-size: 11px; border-radius: 20px; margin-left: auto; background: #f2c3c3; color: #603d36; padding: 2px 7px; }
.side-note { margin: auto 8px 0; padding-top: 20px; border-top: 1px solid #76584c; line-height: 1.7; color: #f0ddd2; }
.side-note small { color: #cba99c; font-family: 'DM Mono'; font-size: 9px; }
.side-note a { color: inherit; text-decoration: none; }
.side-note a:hover { color: #fff8ef; text-decoration: underline; }
.dot { display: inline-block; width: 7px; height: 7px; background: #e4a6a2; border-radius: 50%; margin-right: 7px; }
main { margin-left: 240px; width: calc(100% - 240px); padding: 38px 5.5%; max-width: 1640px; }
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.header-title { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid #d9ddd6; border-radius: 8px; background: #fff; cursor: pointer; padding: 9px; place-items: center; gap: 4px; }
.menu-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--green); }
.sidebar-scrim { display: none; }
.sidebar-actions { display: none; }
.eyebrow { font-family: 'DM Mono'; letter-spacing: 1.3px; font-size: 10px; color: #75917e; margin: 0 0 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: 'Nanum Myeongjo'; font-size: 30px; margin-bottom: 0; }
h2 { font-family: 'Nanum Myeongjo'; font-size: 25px; margin-bottom: 8px; }
h3 { font-family: 'Nanum Myeongjo'; font-size: 19px; margin: 0; }
.header-actions { display: flex; gap: 10px; }
.primary-btn, .ghost-btn, .outline-btn, .text-btn { font: 600 13px Pretendard; border-radius: 7px; cursor: pointer; }
.primary-btn { border: 1px solid var(--green); background: var(--green); color: #fff; padding: 12px 17px; }
.primary-btn span { font-size: 17px; vertical-align: -1px; }
.chat-btn { border: 1px solid var(--green); background: var(--green); color: #fff; padding: 12px 14px; font: 600 13px Pretendard; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.chat-btn:hover { background: #7a574c; border-color: #7a574c; }
.chat-btn span { margin-right: 3px; font-size: 15px; vertical-align: -1px; }
.ghost-btn { border: 1px solid #d9ddd6; background: transparent; color: #506057; padding: 11px 14px; }
.outline-btn { border: 1px solid #b7c5ba; color: var(--green); background: transparent; padding: 10px 14px; }
.text-btn { border: 0; background: transparent; color: var(--green); }
.view { display: none; }
.view.active { display: block; }
.welcome { background: var(--green); border-radius: 14px; padding: 34px 42px; color: #fff; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.welcome p { color: #d5e2bd; font-size: 13px; margin-bottom: 12px; }
.welcome h2 { font-size: 28px; margin: 0; }
.welcome-stitch { font-size: 53px; color: var(--lime); position: relative; min-width: 180px; text-align: center; }
.welcome-stitch:after { content: ""; position: absolute; border-top: 2px dashed #a5bd8c; width: 210px; right: -80px; top: 39px; }
.welcome-stitch i { position: absolute; width: 11px; height: 11px; border: 2px solid var(--lime); border-radius: 50%; top: 47px; }
.welcome-stitch i:nth-child(1) { left: 28px; }
.welcome-stitch i:nth-child(2) { left: 73px; }
.welcome-stitch i:nth-child(3) { left: 118px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.stats article, .panel { background: white; border: 1px solid var(--line); border-radius: 12px; }
.stats article { padding: 20px; }
.stats span, .stats small { display: block; color: var(--muted); font-size: 12px; }
.stats strong { font: 700 33px 'DM Mono'; display: block; margin: 12px 0 7px; color: #6a493d; }
.panel { padding: 24px; }
.panel-head, .section-heading, .calendar-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.upcoming-list { margin-top: 18px; }
.upcoming-row { display: grid; grid-template-columns: 105px 1fr auto; gap: 22px; padding: 15px 4px; border-top: 1px solid var(--line); align-items: center; }
.date-block { font-family: 'DM Mono'; color: #365a49; font-size: 12px; }
.date-block strong { display: block; color: var(--ink); font-family: Pretendard; font-size: 16px; margin-top: 3px; }
.class-info { display: flex; align-items: center; gap: 10px; }
.class-label { font-size: 11px; padding: 5px 8px; border-radius: 5px; font-weight: 700; }
.class-label.lunch { background: var(--lunch); color: #63744f; }
.class-label.dinner { background: var(--dinner); color: #a2615f; }
.student-bubbles { display: flex; align-items: center; justify-content: flex-end; }
.bubble { width: 26px; height: 26px; border-radius: 50%; background: #e4ece4; color: #426453; border: 2px solid white; margin-left: -5px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.empty { color: #9ca39d; font-size: 13px; padding: 22px 4px; }
.section-heading { margin-bottom: 22px; }
.section-heading > div > p:last-child, .calendar-heading > div > p:last-child { color: var(--muted); margin: 0; }
.queue-panel { padding: 0; overflow: hidden; }
.queue-table { min-width: 650px; }
.queue-head, .queue-row { display: grid; grid-template-columns: 1.1fr 1.3fr .8fr .8fr 1fr; padding: 15px 22px; align-items: center; gap: 10px; }
.queue-head { background: #f5f5f0; color: #7e857e; font: 11px 'DM Mono'; letter-spacing: .4px; }
.queue-row { border-top: 1px solid var(--line); }
.queue-name { font-weight: 700; }
.tag { display: inline-block; padding: 5px 7px; border-radius: 4px; background: #edf1ea; color: #55705c; font-size: 11px; margin: 2px; }
.level { font-weight: 600; }
.level.고급 { color: #aa584a; }
.assign-btn, .edit-btn { border: 1px solid #c9d5c8; background: #fff; color: #315b4c; padding: 8px 11px; border-radius: 5px; font: 600 12px Pretendard; cursor: pointer; }
.assign-btn { background: #315b4c; color: #fff; border-color: #315b4c; }
.calendar-heading { margin-bottom: 22px; }
.legend { display: flex; gap: 16px; color: var(--muted); font-size: 12px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.lunch-dot { background: #aeba80; }
.dinner-dot { background: var(--coral); }
.break-dot { background: #b5b5ad; }
.calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.day-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-height: 215px; }
.day-card.holiday { background: repeating-linear-gradient(135deg, #fff, #fff 8px, #faf9f5 8px, #faf9f5 16px); }
.day-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.day-top strong { font-size: 13px; }
.day-top span { font: 10px 'DM Mono'; color: #818881; }
.schedule { padding: 11px; }
.session { padding: 8px 8px 9px; border-radius: 6px; margin-bottom: 8px; }
.session.lunch { background: #f1f6dd; }
.session.dinner { background: var(--dinner); }
.session-time { font: 10px 'DM Mono'; color: #63705a; margin-bottom: 5px; }
.session.dinner .session-time { color: #9a625e; }
.names { font-size: 11px; font-weight: 600; line-height: 1.55; }
.seat-count { font-size: 10px; color: #7d857b; margin-top: 5px; }
.holiday-note { font-size: 12px; color: #85857e; text-align: center; padding: 28px 10px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(73, 48, 42, .48); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 30; }
.modal-backdrop.open { display: flex; }
.modal { display: none; width: min(480px, 100%); background: #fff; border-radius: 13px; padding: 30px; position: relative; box-shadow: 0 20px 60px #19291f66; }
.modal.show { display: block; }
.modal h2 { font-size: 24px; }
.modal-sub { color: var(--muted); line-height: 1.55; margin-bottom: 24px; }
.chat-message { margin-bottom: 19px; color: #5e4a43; }
#classChatModal { width: min(620px, 100%); }
#classChatModal .chat-message { white-space: nowrap; font-size: 13px; }
.chat-instructor { display: flex; gap: 10px; align-items: center; margin: 0 0 21px; padding: 12px 13px; border-radius: 8px; background: #fff7dc; color: #604d2f; }
.chat-instructor strong { font-size: 12px; color: #8a6d34; }
.chat-link-label { margin: 0 0 7px; font-size: 12px; color: var(--muted); }
.kakao-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border: 1px solid #e5c95a; border-radius: 8px; background: #fffdf2; color: #735c20; font: 500 12px 'DM Mono', monospace; text-decoration: none; word-break: break-all; }
.kakao-link:hover { background: #fff7d3; }
.modal-close { position: absolute; right: 18px; top: 13px; border: 0; background: transparent; font-size: 27px; color: #768078; cursor: pointer; }
form label, fieldset { display: block; margin-bottom: 19px; font-weight: 700; font-size: 13px; }
input[type=text], input[type=number], input[type=date], form input:not([type]) { width: 100%; margin-top: 8px; border: 1px solid #e1d3ca; border-radius: 6px; padding: 12px; font: 14px Pretendard; outline-color: #b77a73; }
fieldset { border: 0; margin: 0 0 19px; padding: 0; }
legend { margin-bottom: 9px; }
legend em { font-style: normal; font-weight: 400; font-size: 11px; color: #859086; margin-left: 5px; }
.choice-grid { display: grid; gap: 8px; }
.type-choices, .level-choices { grid-template-columns: repeat(3, 1fr); }
.choice-grid label { margin: 0; font-weight: 500; }
.choice-grid input { position: absolute; opacity: 0; }
.choice-grid span { display: block; border: 1px solid #dbe0d9; border-radius: 6px; padding: 10px 7px; text-align: center; font-size: 12px; cursor: pointer; }
.choice-grid small { display: block; color: #829086; font-size: 10px; margin-top: 4px; }
.choice-grid input:checked + span { border-color: #527965; background: #eff5e9; color: #244a3a; font-weight: 700; }
.privacy-consent { margin: 2px 0 18px; }
.privacy-consent .consent-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; color: #4e5b51; cursor: pointer; }
.privacy-consent .consent-check input { width: 16px; height: 16px; margin: 0; accent-color: #527965; cursor: pointer; }
.privacy-consent .consent-check em { margin-left: 2px; color: #b65345; font-style: normal; font-size: 11px; }
.consent-details { margin: 8px 0 0 24px; color: #7c867d; font-size: 11px; line-height: 1.6; }
.consent-details summary { width: fit-content; color: #527965; cursor: pointer; font-weight: 600; list-style: none; }
.consent-details summary::-webkit-details-marker { display: none; }
.consent-details[open] summary { margin-bottom: 8px; }
.consent-content { padding: 10px 12px; border: 1px solid #e9e4df; border-radius: 7px; background: #fcfbf8; }
.consent-content strong { display: block; margin-bottom: 5px; color: #5d5049; font-size: 11px; }
.consent-content p { margin: 3px 0; }
.submit-btn { width: 100%; margin-top: 2px; }
.submit-btn:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.4); }
.compact { max-width: 440px; }
.type-pick { display: grid; gap: 8px; }
.type-pick button { background: #fff; border: 1px solid #d9dfd8; border-radius: 7px; padding: 13px; text-align: left; cursor: pointer; font: 600 13px Pretendard; color: #315b4c; }
.type-pick button:hover { background: #f0f6e4; border-color: #7b9e76; }
.type-pick small { color: #7f887f; display: block; font-weight: 400; margin-top: 3px; }
.holiday-form { display: flex; gap: 8px; }
.holiday-form input { margin: 0; flex: 1; }
.holiday-form .primary-btn { white-space: nowrap; }
.holiday-list { margin-top: 18px; }
.holiday-row { display: flex; justify-content: space-between; padding: 10px 3px; border-top: 1px solid var(--line); font-size: 13px; }
.remove-btn { border: 0; background: transparent; color: #b75b4d; cursor: pointer; font: 12px Pretendard; }
#toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%) translateY(20px); background: #253d32; color: #fff; border-radius: 30px; padding: 11px 18px; font-size: 13px; opacity: 0; transition: .25s; pointer-events: none; z-index: 40; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media(max-width: 900px) {
  .sidebar { width: 70px; padding: 25px 10px; }
  .brand { padding: 0 8px 35px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand > span:last-child, .nav-item:not(.active) { font-size: 0; }
  .nav-item span { font-size: 20px; }
  .nav-item.active { font-size: 0; }
  .side-note { font-size: 0; }
  .side-note small { display: none; }
  main { margin-left: 70px; width: calc(100% - 70px); padding: 30px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .calendar { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width: 600px) {
  .menu-toggle { display: grid; flex: none; }
  .sidebar { display: flex; width: min(280px, 82vw); padding: 28px 20px; transform: translateX(-105%); transition: transform .25s ease; z-index: 20; box-shadow: 12px 0 32px rgba(19, 39, 29, .18); }
  .sidebar.open { transform: translateX(0); }
  .sidebar .brand-mark { width: 84px; height: 84px; }
  .sidebar .brand > span:last-child { font-size: 18px; }
  .sidebar .nav-item, .sidebar .nav-item:not(.active), .sidebar .nav-item.active { font-size: 14px; }
  .sidebar .side-note { font-size: 14px; }
  .sidebar .side-note small { display: block; }
  .sidebar-actions { display: grid; gap: 8px; margin-top: 22px; padding-bottom: 4px; }
  .sidebar-actions .ghost-btn { width: 100%; text-align: left; border-color: #a27468; background: #6d4b40; color: #fff5ed; padding: 11px 12px; }
  .sidebar-actions .ghost-btn:hover { background: #805c50; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; border: 0; background: rgba(20, 35, 28, .42); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 19; }
  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
  main { margin: 0; width: 100%; padding: 22px 16px; }
  header { margin-bottom: 22px; }
  h1 { font-size: 26px; white-space: nowrap; letter-spacing: -.04em; }
  .header-actions .ghost-btn { display: none; }
  .welcome { padding: 25px; }
  .welcome-stitch { display: none; }
  .stats { gap: 8px; }
  .stats article { padding: 14px; }
  .stats strong { font-size: 26px; }
  .calendar { grid-template-columns: 1fr; }
  .upcoming-row { grid-template-columns: 80px 1fr; }
  .student-bubbles { display: none; }
  .section-heading, .calendar-heading { gap: 12px; }
  .outline-btn { white-space: nowrap; }
  .type-choices { grid-template-columns: 1fr; }
  .modal { padding: 25px 20px; }
  #classChatModal .chat-message { white-space: normal; }
  .queue-panel { overflow-x: auto; }
}