:root{--khc-primary:#6366f1;--khc-text:#1e293b;--khc-text-muted:#64748b;--khc-bg:#fff;--khc-bg-secondary:#f8fafc;--khc-border:#e2e8f0;--khc-border-hover:#cbd5e1;--khc-shadow:0 1px 3px #00000014;--khc-shadow-hover:0 4px 12px #0000001f;--khc-radius:8px;--khc-radius-sm:6px;--khc-transition:.15s ease;--khc-bc-bg:#dbeafe;--khc-bc-border:#93c5fd;--khc-bc-text:#1e40af;--khc-dc-bg:#ede9fe;--khc-dc-border:#c4b5fd;--khc-dc-text:#5b21b6;--khc-bv-bg:#d1fae5;--khc-bv-border:#6ee7b7;--khc-bv-text:#065f46;--khc-cv-bg:#fef3c7;--khc-cv-border:#fcd34d;--khc-cv-text:#92400e}._khc-container{gap:var(--main-space-6);flex-direction:column;max-width:900px;margin:0 auto;display:flex}._khc-legend{gap:var(--main-space-2);flex-wrap:wrap;justify-content:center;display:flex}._khc-legend-item{border-radius:var(--main-radius-full);font-size:var(--main-text-xs);border-style:solid;border-width:1px;align-items:center;padding:.25rem .75rem;font-weight:500;display:inline-flex}._khc-legend-bc{background:var(--khc-bc-bg);border-color:var(--khc-bc-border);color:var(--khc-bc-text)}._khc-legend-dc{background:var(--khc-dc-bg);border-color:var(--khc-dc-border);color:var(--khc-dc-text)}._khc-legend-bv{background:var(--khc-bv-bg);border-color:var(--khc-bv-border);color:var(--khc-bv-text)}._khc-legend-cv{background:var(--khc-cv-bg);border-color:var(--khc-cv-border);color:var(--khc-cv-text)}._khc-section{background:var(--khc-bg);border-radius:var(--khc-radius);padding:var(--main-space-5);box-shadow:var(--khc-shadow);border-style:solid;border-width:1px;border-color:var(--khc-border)}._khc-section-header{margin-bottom:var(--main-space-4)}._khc-section-title{font-size:var(--main-text-base);color:var(--khc-text);align-items:center;gap:var(--main-space-2);margin:0;font-weight:600;display:flex}._khc-section-korean{font-size:var(--main-text-sm);color:var(--khc-text-muted);font-weight:400}._khc-sub-label{font-size:var(--main-text-xs);color:var(--khc-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--main-space-2);margin-top:var(--main-space-3);font-weight:500}._khc-sub-label:first-of-type{margin-top:0}@media (max-width:768px){._khc-container{gap:var(--main-space-4);padding-left:.75rem;padding-right:.75rem}._khc-section{padding:var(--main-space-4) var(--main-space-3)}._khc-legend{gap:.375rem}._khc-legend-item{padding:.2rem .55rem;font-size:.7rem}}@media (max-width:360px){._khc-container{padding-left:.5rem;padding-right:.5rem}._khc-section{padding:var(--main-space-3) var(--main-space-2)}}._khc-grid{gap:var(--main-space-2);margin-bottom:var(--main-space-3);grid-template-columns:repeat(auto-fill,minmax(72px,1fr));display:grid}._khc-grid:last-child{margin-bottom:0}._khc-cell{padding:var(--main-space-3) var(--main-space-2);border-radius:var(--khc-radius-sm);cursor:pointer;transition:box-shadow var(--khc-transition), opacity var(--khc-transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border-style:solid;border-width:1.5px;flex-direction:column;justify-content:center;align-items:center;min-height:72px;display:flex}@media (hover:hover){._khc-cell:hover{box-shadow:var(--khc-shadow-hover);opacity:.9}}._khc-cell:active{opacity:.85}._khc-cell:focus-visible{outline:2px solid var(--khc-primary);outline-offset:2px}._khc-cell._khc-cell-active{box-shadow:0 0 0 2px var(--khc-primary)}._khc-cell-bc{background:var(--khc-bc-bg);border-color:var(--khc-bc-border)}._khc-cell-dc{background:var(--khc-dc-bg);border-color:var(--khc-dc-border)}._khc-cell-bv{background:var(--khc-bv-bg);border-color:var(--khc-bv-border)}._khc-cell-cv{background:var(--khc-cv-bg);border-color:var(--khc-cv-border)}._khc-cell-char{color:var(--khc-text);font-size:1.5rem;font-weight:600;line-height:1.2}._khc-cell-roman{font-size:var(--main-text-xs);color:var(--khc-text-muted);font-family:var(--main-font-mono);margin-top:2px}._khc-builder{justify-content:center;align-items:center;gap:var(--main-space-3);margin-bottom:var(--main-space-5);flex-wrap:wrap;display:flex}._khc-builder-slot{border-radius:var(--khc-radius);border-style:dashed;border-width:2px;border-color:var(--khc-border-hover);background:var(--khc-bg-secondary);width:80px;height:80px;color:var(--khc-text);cursor:pointer;transition:border-color var(--khc-transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-shrink:0;justify-content:center;align-items:center;font-size:2rem;font-weight:700;display:flex}@media (hover:hover){._khc-builder-slot:hover{border-color:var(--khc-primary)}}._khc-builder-slot._khc-builder-slot-active{border-color:var(--khc-primary);background:#6366f10d;border-style:solid}._khc-builder-placeholder{font-size:var(--main-text-xs);color:var(--khc-text-muted);font-weight:400}._khc-builder-plus,._khc-builder-arrow{color:var(--khc-text-muted);align-items:center;display:flex}._khc-builder-plus svg,._khc-builder-arrow svg{width:16px;height:16px}._khc-builder-result{border-radius:var(--khc-radius);border-style:solid;border-width:2px;border-color:var(--khc-primary);width:80px;height:80px;color:var(--khc-primary);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#6366f114;flex-shrink:0;justify-content:center;align-items:center;font-size:2.25rem;font-weight:700;display:flex}._khc-builder-result._khc-builder-result-has-value{background:var(--khc-primary);color:#fff}._khc-builder-pickers{gap:var(--main-space-4);grid-template-columns:1fr 1fr;display:grid}._khc-picker{border-style:solid;border-width:1px;border-color:var(--khc-border);border-radius:var(--khc-radius-sm);padding:var(--main-space-3)}._khc-picker-label{font-size:var(--main-text-xs);color:var(--khc-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--main-space-2);font-weight:600}._khc-picker-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;display:grid}._khc-picker-btn{padding:var(--main-space-1);border-style:solid;border-width:1px;border-color:var(--khc-border);background:var(--khc-bg);font-size:var(--main-text-sm);color:var(--khc-text);cursor:pointer;transition:background var(--khc-transition), border-color var(--khc-transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:4px;justify-content:center;align-items:center;min-height:36px;font-weight:500;display:flex}@media (hover:hover){._khc-picker-btn:hover{background:var(--khc-bg-secondary);border-color:var(--khc-border-hover)}}._khc-picker-btn._khc-picker-btn-active{background:var(--khc-primary);border-color:var(--khc-primary);color:#fff}@media (max-width:576px){._khc-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}._khc-cell{padding:var(--main-space-2);min-height:64px}._khc-cell-char{font-size:1.35rem}._khc-builder{gap:var(--main-space-2)}._khc-builder-slot,._khc-builder-result{width:64px;height:64px;font-size:1.75rem}._khc-builder-pickers{grid-template-columns:1fr}._khc-picker-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}._khc-picker-btn{min-height:42px;font-size:var(--main-text-base)}}@media (max-width:360px){._khc-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}._khc-cell{min-height:56px}._khc-builder-slot,._khc-builder-result{width:56px;height:56px;font-size:1.5rem}}._khc-detail-overlay{z-index:100;background:#0000004d;display:none;position:fixed;top:0;bottom:0;left:0;right:0}._khc-detail-overlay._khc-detail-open{display:block}._khc-detail{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--khc-bg);border-radius:var(--khc-radius);z-index:101;width:90%;max-width:420px;max-height:85vh;padding:var(--main-space-6);display:none;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 20px 60px #0003}._khc-detail._khc-detail-open{display:block}._khc-detail-close{top:var(--main-space-3);right:var(--main-space-3);border-radius:var(--main-radius-full);background:var(--khc-bg-secondary);width:40px;height:40px;color:var(--khc-text-muted);cursor:pointer;transition:background var(--khc-transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation;z-index:1;border-width:0;justify-content:center;align-items:center;display:flex;position:absolute}@media (hover:hover){._khc-detail-close:hover{background:var(--khc-border)}}._khc-detail-close svg{width:16px;height:16px}._khc-detail-header{text-align:center;margin-bottom:var(--main-space-5)}._khc-detail-char{color:var(--khc-text);font-size:4rem;font-weight:700;line-height:1.2}._khc-detail-roman{font-size:var(--main-text-lg);font-family:var(--main-font-mono);color:var(--khc-primary);margin-top:var(--main-space-1);font-weight:600}._khc-detail-badge{border-radius:var(--main-radius-full);font-size:var(--main-text-xs);margin-top:var(--main-space-2);border-style:solid;border-width:1px;padding:.2rem .6rem;font-weight:500;display:inline-flex}._khc-detail-sound-btn{align-items:center;gap:var(--main-space-2);border-radius:var(--main-radius-full);background:var(--khc-primary);color:#fff;font-size:var(--main-text-sm);cursor:pointer;margin-top:var(--main-space-3);transition:opacity var(--khc-transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-width:0;min-height:40px;padding:.625rem 1.125rem;font-weight:500;display:inline-flex}@media (hover:hover){._khc-detail-sound-btn:hover{opacity:.9}}._khc-detail-sound-btn svg{width:14px;height:14px}._khc-detail-info{gap:var(--main-space-3);flex-direction:column;display:flex}._khc-detail-row{gap:var(--main-space-1);flex-direction:column;display:flex}._khc-detail-label{font-size:var(--main-text-xs);color:var(--khc-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}._khc-detail-value{font-size:var(--main-text-sm);color:var(--khc-text);line-height:1.5}._khc-detail-examples{gap:var(--main-space-2);flex-direction:column;display:flex}._khc-detail-example{align-items:baseline;gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-3);background:var(--khc-bg-secondary);border-radius:var(--khc-radius-sm);flex-wrap:wrap;display:flex}._khc-detail-example-word{font-size:var(--main-text-base);color:var(--khc-text);font-weight:600}._khc-detail-speakable{cursor:pointer}@media (hover:hover){._khc-detail-speakable:hover{color:var(--khc-primary)}}._khc-detail-example-roman{font-size:var(--main-text-xs);font-family:var(--main-font-mono);color:var(--khc-text-muted)}._khc-detail-example-meaning{font-size:var(--main-text-xs);color:var(--khc-text-muted);margin-left:auto}@media (max-width:576px){._khc-detail{width:100%;max-width:100%;max-height:88vh;max-height:88dvh;padding:var(--main-space-5) var(--main-space-4) calc(var(--main-space-5) + env(safe-area-inset-bottom));overscroll-behavior:contain;border-bottom-right-radius:0;border-bottom-left-radius:0;top:auto;bottom:0;left:0;transform:none}._khc-detail-char{font-size:3rem}._khc-detail-example-meaning{flex-basis:100%;margin-left:0}}._khc-collapse-toggle{cursor:pointer;width:100%;color:var(--khc-text);-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border-width:0;justify-content:space-between;align-items:center;min-height:40px;padding:0;display:flex}@media (hover:hover){._khc-collapse-toggle:hover ._khc-section-title{color:var(--khc-primary)}}._khc-collapse-icon{color:var(--khc-text-muted);transition:color var(--khc-transition);align-items:center;display:flex}._khc-collapse-icon svg{width:14px;height:14px}._khc-syllable-wrap{margin-top:var(--main-space-4)}._khc-syllable-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:var(--khc-radius-sm);border-style:solid;border-width:1px;border-color:var(--khc-border);overflow-x:auto}._khc-syllable-table{border-collapse:collapse;width:100%;font-size:var(--main-text-sm);min-width:700px}._khc-syllable-table th,._khc-syllable-table td{text-align:center;border-style:solid;border-width:1px;border-color:var(--khc-border);white-space:nowrap;padding:6px 4px}._khc-syllable-table th{background:var(--khc-bg-secondary);color:var(--khc-text);font-weight:600;font-size:var(--main-text-xs);z-index:2;position:sticky;top:0}._khc-syllable-table thead th:first-child{z-index:3;background:var(--khc-bg-secondary);position:sticky;left:0}._khc-syllable-table tbody th{z-index:1;background:var(--khc-bg-secondary);min-width:40px;font-size:1rem;position:sticky;left:0}._khc-syllable-table td{color:var(--khc-text);cursor:pointer;transition:background var(--khc-transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-size:.9rem}@media (hover:hover){._khc-syllable-table td:hover{background:#6366f114}}._khc-syllable-table td:active{background:#6366f11f}._khc-syllable-table td._khc-syllable-highlight{background:#6366f126;font-weight:600}@media (max-width:576px){._khc-syllable-table th,._khc-syllable-table td{font-size:var(--main-text-xs);padding:8px 4px}._khc-syllable-table td{min-width:32px;font-size:.85rem}._khc-syllable-table tbody th{min-width:36px;font-size:.95rem}}body.dark-mode ._khc-syllable-table td:active{background:#6366f133}