@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f7f5f2;--surface:#fff;--text:#1a202c;--text-muted:#718096;--primary:#2b6cb0;--primary-light:#ebf4ff;--accent:#e53e3e;--border:#e2e8f0;--shadow:0 4px 24px #00000014;--radius:12px;--header-h:72px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Be Vietnam Pro,system-ui,sans-serif;line-height:1.5}body{min-height:100dvh}body.detail-open{overflow:hidden}#root{min-height:100dvh}button{font:inherit;cursor:pointer;background:0 0;border:none}a{color:var(--primary)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.app{flex-direction:column;min-height:100dvh;display:flex}.header{z-index:10;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0}.header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1200px;margin:0 auto;padding:.75rem 1rem;display:flex}.brand{color:inherit;flex-shrink:0;align-items:center;text-decoration:none;display:flex}.brand-logo{object-fit:contain;width:auto;height:52px;display:block}.filter-bar{background:var(--bg);border-radius:999px;gap:.35rem;padding:.25rem;display:flex}.filter-btn{color:var(--text-muted);border-radius:999px;padding:.4rem .85rem;font-size:.8rem;font-weight:500;transition:all .15s}.filter-btn.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 4px #00000014}.main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:1rem}.main-grid{gap:1rem;display:grid}.main-grid.with-detail{position:relative}.letters-panel{flex-direction:column;gap:1.25rem;display:flex}.section-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.5rem;font-size:.85rem;font-weight:600}.letter-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem;display:grid}.letter-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);flex-direction:column;justify-content:center;align-items:center;min-height:72px;padding:.5rem .25rem;transition:all .15s;display:flex}.letter-btn:hover{border-color:var(--primary);background:var(--primary-light)}.letter-btn.selected{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 2px #2b6cb033}.letter-char{font-family:Noto Sans KR,sans-serif;font-size:1.75rem;font-weight:700;line-height:1}.letter-roman{color:var(--text-muted);margin-top:.2rem;font-size:.65rem}.overlay{z-index:20;background:#0006;position:fixed;inset:0}.letter-detail{z-index:30;background:var(--surface);box-shadow:var(--shadow);border-radius:16px 16px 0 0;flex-direction:column;max-height:85dvh;animation:.25s slideUp;display:flex;position:fixed;bottom:0;left:0;right:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.detail-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:.5rem;padding:.75rem 1rem;display:flex}.detail-title{flex:1;align-items:center;gap:.75rem;min-width:0;display:flex}.detail-char{flex-shrink:0;font-family:Noto Sans KR,sans-serif;font-size:2.5rem;font-weight:700;line-height:1}.detail-title h2{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.detail-roman{color:var(--text-muted);font-size:.8rem}.detail-nav{gap:.25rem;display:flex}.btn-icon{width:36px;height:36px;color:var(--text-muted);border-radius:8px;justify-content:center;align-items:center;font-size:1.25rem;transition:background .15s;display:flex}.btn-icon:hover:not(:disabled){background:var(--bg);color:var(--text)}.btn-icon:disabled{opacity:.3;cursor:not-allowed}.tab-bar{border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.tab-btn{color:var(--text-muted);border-bottom:2px solid #0000;flex:1;padding:.65rem;font-size:.85rem;font-weight:500;transition:all .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.detail-content{-webkit-overflow-scrolling:touch;flex:1;padding:1rem;overflow-y:auto}.stroke-order{flex-direction:column;align-items:center;gap:.75rem;display:flex}.stroke-note{color:var(--text-muted);text-align:center;background:var(--bg);border-radius:8px;width:100%;padding:.5rem .75rem;font-size:.8rem}.stroke-loading{color:var(--text-muted);font-size:.85rem}.stroke-svg{width:100%;max-width:320px}.stroke-svg svg{width:100%;height:auto}.stroke-svg .jamo path{fill:#1a202c}.stroke-svg .stroke-number path{fill:#7e00cc}.stroke-svg path.order-arrow{fill:#bf80e6}.pronunciation-panel{flex-direction:column;gap:1rem;display:flex}.pronunciation-card{background:var(--bg);border-radius:var(--radius);flex-direction:column;gap:.75rem;padding:1rem;display:flex}.pronunciation-row{justify-content:space-between;align-items:center;gap:1rem;display:flex}.pronunciation-row .label{color:var(--text-muted);font-size:.8rem}.pronunciation-row .value{font-size:1rem;font-weight:600}.pronunciation-row .value.highlight{color:var(--primary);font-size:1.15rem}.pronunciation-row .value.example-syllable{font-family:Noto Sans KR,sans-serif;font-size:1.35rem;font-weight:700}.tip-box{border-radius:var(--radius);background:#fffbeb;border:1px solid #fbd38d;padding:1rem}.tip-box strong{margin-bottom:.35rem;font-size:.85rem;display:block}.tip-box p{color:#744210;font-size:.9rem}.btn{border-radius:var(--radius);width:100%;padding:.75rem 1.25rem;font-size:.9rem;font-weight:600;transition:all .15s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:#2c5282}.btn-primary.speaking{background:#4299e1}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.speech-warning{color:var(--accent);text-align:center;font-size:.8rem}.writing-practice{flex-direction:column;align-items:center;gap:.75rem;width:100%;display:flex}.writing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.75rem;width:100%;max-width:360px;padding:1rem;display:flex;position:relative}.writing-mode-badge{letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.25rem .55rem;font-size:.65rem;font-weight:700;position:absolute;top:.75rem;right:.75rem}.writing-mode-badge.badge-quiz{color:#276749;background:#f0fff4}.writing-mode-badge.badge-done{color:#975a16;background:#fefcbf}.writing-char-info{text-align:center;padding-top:.25rem}.writing-char-display{color:var(--text);font-family:Noto Sans KR,sans-serif;font-size:3.5rem;font-weight:600;line-height:1}.writing-char-meta{color:var(--text-muted);margin-top:.25rem;font-size:.8rem}.writing-stroke-badge{color:#718096;border:1px solid var(--border);background:#f7fafc;border-radius:999px;margin-top:.35rem;padding:.15rem .55rem;font-size:.7rem;font-weight:600;display:inline-block}.writing-canvas-wrap{justify-content:center;display:flex}.writing-canvas-stack{aspect-ratio:1;border-radius:var(--radius);width:100%;max-width:280px;margin:0 auto;position:relative;overflow:hidden}.writing-canvas-svg{z-index:1;border-radius:var(--radius);touch-action:none;cursor:default;-webkit-user-select:none;user-select:none;background:0 0;border:2px dashed #e2e8f0;width:100%;height:100%;display:block;position:absolute;inset:0}.writing-canvas-hit{cursor:crosshair;touch-action:none}.writing-canvas-svg--active{cursor:crosshair}.writing-canvas-svg--empty{background:linear-gradient(to right, transparent 49.5%, #e8e4df 49.5%, #e8e4df 50.5%, transparent 50.5%), linear-gradient(to bottom, transparent 49.5%, #e8e4df 49.5%, #e8e4df 50.5%, transparent 50.5%), var(--surface)}.writing-jamo-ghost{fill:#2d37481a;stroke:none}.writing-median-ghost{fill:none;stroke:#c8c8c8;stroke-linecap:round;stroke-linejoin:round;opacity:.55}.writing-median-ghost--current{stroke:#b0b0b0;opacity:.65}.writing-median-ghost--hint{stroke:#e53e3e;stroke-dasharray:14 10;opacity:.9}.writing-stroke-done{fill:none;stroke:#1a202c;stroke-linecap:round;stroke-linejoin:round}.writing-jamo-done{fill:#1a202c;stroke:none}.writing-stroke-drawing{stroke:#2d3748;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.writing-canvas-stack:before{content:"";z-index:0;border-radius:var(--radius);pointer-events:none;background:linear-gradient(90deg,#0000 49.5%,#e8e4df 49.5% 50.5%,#0000 50.5%),linear-gradient(#0000 49.5%,#e8e4df 49.5% 50.5%,#0000 50.5%);position:absolute;inset:0}.writing-progress-section{width:100%}.writing-progress-label{color:var(--text-muted);justify-content:space-between;margin-bottom:.35rem;font-size:.75rem;display:flex}.writing-progress-bar{background:#edf2f7;border-radius:999px;height:8px;overflow:hidden}.writing-progress-fill{background:linear-gradient(90deg,#4e88ad,#78b7a5);border-radius:999px;height:100%;transition:width .25s}.writing-controls{justify-content:center;gap:.75rem;width:100%;display:flex}.writing-controls .btn-secondary{min-width:120px}.writing-status,.writing-progress{color:var(--text-muted);text-align:center;margin:0;font-size:.8rem}.writing-feedback{flex:100%;font-size:.8rem;font-weight:500}.writing-feedback.pass{color:#38a169}.writing-feedback.hint{color:#dd6b20}.writing-feedback.fail{color:#e53e3e}.footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border);padding:1rem;font-size:.75rem}@media (width>=768px){.letter-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.letter-char{font-size:2rem}.main-grid.with-detail{grid-template-columns:1fr 380px;align-items:start}.overlay{display:none}.letter-detail{top:calc(var(--header-h) + 1rem);border-radius:var(--radius);max-height:calc(100dvh - var(--header-h) - 2rem);animation:.2s fadeIn;position:sticky;bottom:auto;left:auto;right:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}body.detail-open{overflow:auto}}@media (width>=1024px){.main-grid.with-detail{grid-template-columns:1fr 420px}.stroke-svg,.writing-canvas{max-width:360px}}.site-nav{flex-wrap:wrap;gap:.35rem;display:flex}.site-nav__link{color:var(--text-muted);border-radius:999px;padding:.45rem .85rem;font-size:.8rem;font-weight:500;text-decoration:none;transition:all .15s}.site-nav__link:hover{color:var(--text);background:var(--bg)}.site-nav__link.active{background:var(--primary-light);color:var(--primary)}.footer-brand{color:var(--accent)}.footer-sub{margin-top:.35rem}.hero-banner{color:#fff;background:linear-gradient(135deg,#1a365d 0%,#2b6cb0 55%,#4299e1 100%)}.hero-banner__inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1200px;margin:0 auto;padding:1rem;display:flex}.hero-banner__link{color:#fff;white-space:nowrap;border:1.5px solid #ffffff80;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;text-decoration:none;transition:background .15s}.hero-banner__link:hover{background:#ffffff26}.filter-bar--page{width:fit-content;margin-bottom:1rem}.countdown{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}.countdown--compact{box-shadow:none;background:0 0;border:none;flex:1;min-width:240px;padding:0}.countdown__header{text-align:center;margin-bottom:1rem}.countdown__badge{background:var(--accent);color:#fff;letter-spacing:.05em;border-radius:999px;margin-bottom:.5rem;padding:.25rem .6rem;font-size:.7rem;font-weight:700;display:inline-block}.countdown__title{margin-bottom:.35rem;font-size:1.25rem;font-weight:700}.countdown__target{color:var(--text-muted);font-size:.9rem}.countdown__target--compact{color:#ffffffd9;text-align:center;margin-top:.5rem;font-size:.8rem}.countdown__grid{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}.countdown--compact .countdown__grid{gap:.5rem}.countdown__cell{background:var(--bg);border-radius:10px;flex-direction:column;align-items:center;padding:.75rem .5rem;display:flex}.countdown--compact .countdown__cell{background:#ffffff1f}.countdown__value{font-variant-numeric:tabular-nums;font-size:1.75rem;font-weight:700;line-height:1}.countdown--compact .countdown__value{color:#fff;font-size:1.35rem}.countdown__unit{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.25rem;font-size:.7rem}.countdown--compact .countdown__unit{color:#ffffffbf}.countdown__status{text-align:center;font-size:1.1rem;font-weight:700}.countdown__hint{text-align:center;color:var(--text-muted);margin-top:.35rem;font-size:.9rem}.countdown--compact .countdown__status{color:#fff}.page-main{flex-direction:column;gap:1.5rem;display:flex}.page-main--compact{gap:1rem;max-width:720px}.page-intro h1{margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.page-intro p{color:var(--text-muted);max-width:60ch}.page-intro__badge{background:var(--accent);color:#fff;border-radius:999px;margin-bottom:.5rem;padding:.25rem .6rem;font-size:.7rem;font-weight:700;display:inline-block}.exam-schedule{flex-direction:column;gap:1.25rem;display:flex}.exam-schedule--compact{gap:.5rem}.exam-schedule__title,.workshop-gallery__title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;font-weight:700}.exam-timeline{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);list-style:none;overflow:hidden}.exam-timeline__item{border-bottom:1px solid var(--border);grid-template-columns:2.75rem 1fr;align-items:start;gap:.75rem;padding:.65rem .85rem;display:grid}.exam-timeline__item:last-child{border-bottom:none}.exam-timeline__item--exam{background:#f0fff4}.exam-timeline__date{padding-top:.15rem;font-size:.9rem;font-weight:700}.exam-timeline__sessions{flex-wrap:wrap;gap:.35rem 1rem;min-width:0;display:flex}.exam-timeline__session{flex:12rem;align-items:flex-start;gap:.5rem;min-width:0;display:flex}.exam-timeline__slots{flex-direction:column;flex:1;gap:.35rem;min-width:0;display:flex}.exam-timeline__slot strong{font-size:.9rem;font-weight:600;display:block}.exam-timeline__when{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.35rem;min-width:9.5rem;display:flex}.exam-timeline__time{color:var(--text-muted);font-size:.8rem;font-weight:600}.exam-timeline__what{flex:1;min-width:0;font-size:.9rem}.exam-timeline__what strong{display:block}.exam-timeline__meta{color:var(--text-muted);margin-top:.1rem;font-size:.75rem;display:block}.exam-schedule__header h2{margin-bottom:.35rem;font-size:1.15rem;font-weight:700}.exam-schedule__header p{color:var(--text-muted);font-size:.9rem}.exam-schedule__table-wrap{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow-x:auto}.exam-schedule__table{border-collapse:collapse;width:100%;font-size:.85rem}.exam-schedule__table th,.exam-schedule__table td{text-align:left;border-bottom:1px solid var(--border);vertical-align:top;padding:.75rem 1rem}.exam-schedule__table th{background:var(--bg);white-space:nowrap;font-weight:600}.exam-schedule__table tr:last-child td{border-bottom:none}.exam-schedule__row--exam{background:#f0fff4}.exam-schedule__row--backup{background:#fffaf0}.exam-schedule__note{color:var(--text-muted);margin-top:.25rem;font-size:.8rem;font-weight:400;display:block}.session-badge{border-radius:999px;padding:.2rem .5rem;font-size:.7rem;font-weight:600;display:inline-block}.session-badge--sang{color:#2b6cb0;background:#ebf8ff}.session-badge--chieu{color:#975a16;background:#fefcbf}.exam-schedule__cards{flex-direction:column;gap:1rem;display:none}.exam-day-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.exam-day-card__date{color:var(--primary);margin-bottom:.75rem;font-size:1rem;font-weight:700}.exam-day-card__list{flex-direction:column;gap:.75rem;list-style:none;display:flex}.exam-day-card__item{border-bottom:1px solid var(--border);padding-bottom:.75rem}.exam-day-card__item:last-child{border-bottom:none;padding-bottom:0}.exam-day-card__meta{align-items:center;gap:.5rem;margin-bottom:.35rem;display:flex}.exam-day-card__time{color:var(--text-muted);font-size:.8rem;font-weight:600}.exam-day-card__subject{font-size:.95rem;font-weight:600}.exam-day-card__detail{color:var(--text-muted);margin-top:.2rem;font-size:.8rem}.exam-schedule__figure{margin:0}.exam-schedule__figure img{border-radius:var(--radius);border:1px solid var(--border);width:100%}.exam-schedule__figure figcaption{color:var(--text-muted);text-align:center;margin-top:.5rem;font-size:.8rem}.exam-tips{border-radius:var(--radius);background:#fffbeb;border:1px solid #fbd38d;padding:1.25rem}.exam-tips h3{margin-bottom:.75rem;font-size:1rem}.exam-tips ul{color:#744210;flex-direction:column;gap:.5rem;padding-left:1.25rem;font-size:.9rem;display:flex}.workshop-gallery{flex-direction:column;gap:.5rem;display:flex}.workshop-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;display:grid}.workshop-grid--compact{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}.workshop-thumb{aspect-ratio:4/3;border:1px solid var(--border);cursor:zoom-in;background:var(--surface);border-radius:8px;padding:0;position:relative;overflow:hidden}.workshop-thumb img{object-fit:cover;width:100%;height:100%;transition:transform .2s}.workshop-thumb:hover img{transform:scale(1.04)}.workshop-thumb__label{color:#fff;text-align:left;background:linear-gradient(#0000,#000000bf);padding:.35rem .5rem;font-size:.65rem;font-weight:600;line-height:1.3;position:absolute;inset:auto 0 0}.workshop-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;overflow:hidden}.workshop-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000001a}.workshop-card__media{aspect-ratio:16/10;cursor:zoom-in;width:100%;display:block;overflow:hidden}.workshop-card__media img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.workshop-card:hover .workshop-card__media img{transform:scale(1.03)}.workshop-card__body{padding:1rem}.workshop-card__school{color:var(--accent);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.35rem;font-size:.75rem;font-weight:600}.workshop-card__title{margin-bottom:.35rem;font-size:1rem;font-weight:700}.workshop-card__caption{color:var(--text-muted);font-size:.85rem;line-height:1.5}body.lightbox-open{overflow:hidden}.lightbox{z-index:100;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.lightbox__backdrop{cursor:pointer;background:#000000d9;border:none;position:absolute;inset:0}.lightbox__content{z-index:1;align-items:center;gap:.5rem;width:100%;max-width:960px;display:flex;position:relative}.lightbox__figure{flex:1;min-width:0;margin:0}.lightbox__figure img{object-fit:contain;border-radius:var(--radius);width:100%;max-height:75dvh}.lightbox__figure figcaption{color:#fff;text-align:center;margin-top:.75rem;font-size:.9rem}.lightbox__close{position:absolute;top:-2.5rem;right:0;color:#fff!important;font-size:1.75rem!important}.lightbox__nav{flex-shrink:0;color:#fff!important;font-size:2rem!important}@media (width<=767px){.exam-schedule__table-wrap{display:none}.exam-schedule__cards{display:flex}}.page-main--compact .countdown{padding:1rem}.page-main--compact .countdown__title{font-size:1.05rem}.page-main--compact .countdown__grid{gap:.5rem}.page-main--compact .countdown__cell{padding:.5rem .35rem}.page-main--compact .countdown__value{font-size:1.4rem}@media (width<=480px){.header-inner{flex-direction:column;align-items:stretch}.brand{justify-content:center}.brand-logo{height:48px}.site-nav,.filter-bar{justify-content:center}.countdown__grid{gap:.35rem}.countdown__value{font-size:1.35rem}.hero-banner__inner{text-align:center;flex-direction:column;align-items:stretch}.hero-banner__link{text-align:center}.workshop-grid--compact{grid-template-columns:repeat(2,1fr)}.exam-timeline__item{grid-template-columns:1fr;gap:.35rem}.exam-timeline__session{flex-direction:column;gap:.35rem}.letter-grid{grid-template-columns:repeat(5,1fr);gap:.35rem}.letter-btn{min-height:60px;padding:.35rem .15rem}.letter-char{font-size:1.5rem}}