:root{--ink:#18332e;--deep:#112c29;--green:#315c4d;--tan:#af7b45;--warm:#f7f6f2;--paper:#ffffff;--line:#e5e7df;--muted:#81918c;--text:#24352f;--serif:"Noto Serif KR",serif;--sans:"Noto Sans KR","DM Sans",sans}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--warm);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input{font-family:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
.app-shell{display:flex;min-height:100vh}.sidebar{width:246px;position:fixed;top:0;bottom:0;left:0;background:#fdfcf9;border-right:1px solid #e9eae2;padding:32px 18px 23px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:3px 12px 37px}.brand-icon{display:grid;place-items:center;width:41px;height:41px;border:1px solid #527163;color:#365e51;background:#eaf0e9;border-radius:13px;font-size:37px;line-height:1;padding-bottom:15px}.brand b{display:block;font-family:var(--serif);font-weight:800;color:var(--deep);font-size:21px;letter-spacing:-1px}.brand small{display:block;color:#a09c8f;font-family:"DM Sans",sans-serif;font-size:9px;letter-spacing:1.4px;margin-top:3px}.side-eyebrow,.eyebrow{font-family:"DM Sans",var(--sans);font-weight:700;letter-spacing:2px;font-size:10px;color:#a1a69d}.side-eyebrow{padding:0 16px;margin:13px 0 12px}.side-nav{display:flex;flex-direction:column;gap:5px}.nav-link{width:100%;height:47px;border:0;border-radius:9px;background:transparent;color:#777f7a;display:flex;align-items:center;gap:12px;text-align:left;padding:0 13px;font-size:13px;font-weight:600}.nav-link:hover{background:#f0f2eb}.nav-link.active{background:#e8efe8;color:#244a3f}.nav-symbol{font-size:20px;line-height:1;width:23px;text-align:center;font-weight:400}.nav-number{margin-left:auto;color:#b3bfb2;font-family:"DM Sans",sans-serif;font-size:10px}.side-divider{height:1px;background:#e6e7df;margin:26px 12px 18px}.sidebar-words{display:flex;flex-direction:column;gap:4px}.sidebar-word{background:transparent;border:0;padding:11px 15px;border-radius:8px;text-align:left;font-family:var(--serif);font-size:14px;color:#5e6863;display:flex;justify-content:space-between}.sidebar-word:hover,.sidebar-word.selected{background:#edf2e9;color:#244839}.sidebar-word span{font-size:9px;font-family:var(--sans);align-self:center;color:#9fa9a0}.side-bottom{margin-top:auto;padding:20px 13px 0}.tiny-orbit{font-family:var(--serif);font-size:23px;letter-spacing:9px;color:#769082}.tiny-orbit span{opacity:.45}.side-bottom p{color:#8a968e;line-height:1.8;font-size:12px;margin:14px 0 19px}.edition{font-family:"DM Sans",sans-serif;color:#b1b9b0;font-size:9px;letter-spacing:.6px}.main-column{margin-left:246px;width:calc(100% - 246px);min-width:0}.topbar{height:75px;border-bottom:1px solid #e8e9e3;display:flex;align-items:center;justify-content:space-between;padding:0 58px;background:#fffdf9}.breadcrumb{display:flex;gap:13px;color:#9ca59d;font-size:12px}.breadcrumb strong{color:#3b534b;font-weight:600}.slash{color:#bdc6bc}.top-right{display:flex;align-items:center;gap:9px;color:#6b7b73;font-size:11px}.status-dot{height:7px;width:7px;border-radius:50%;background:#80a087}.top-divider{height:17px;width:1px;background:#d9ded5;margin:0 9px}.down-caret{margin-left:5px}
main{max-width:1340px;margin:0 auto;padding:37px 57px 76px}.view{display:none}.view.active-view{display:block}.hero{position:relative;overflow:hidden;min-height:317px;border-radius:13px;color:#fff;background:#193d37;padding:42px 48px 25px;display:flex;flex-direction:column;justify-content:space-between}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 89% 43%,rgba(112,155,108,.17),transparent 36%),linear-gradient(110deg,rgba(11,32,30,.0) 30%,rgba(7,27,23,.44));pointer-events:none}.hero-content,.hero-lower{position:relative;z-index:2}.light-eyebrow{color:#b9d2b9;letter-spacing:2px}.star{font-size:14px;margin-right:7px;color:#c4b58d}.hero h1{font-family:var(--serif);font-size:clamp(28px,3.3vw,43px);line-height:1.5;letter-spacing:-1.7px;font-weight:600;margin:20px 0 12px}.hero h1 em{font-style:normal;color:#d8ccb0}.hero p{font-size:12px;color:#b3cbc1;line-height:2;letter-spacing:-.2px;margin:0}.hero-lower{display:flex;justify-content:space-between;color:#9ab9aa;font-size:11px;letter-spacing:.3px}.hero-index{font-family:"DM Sans",sans-serif;letter-spacing:1.3px}.hero-ornament{position:absolute;right:8%;top:14px;width:320px;height:300px;display:grid;place-items:center;pointer-events:none}.hero-ornament .ring{position:absolute;border:1px solid rgba(194,216,174,.17);border-radius:50%;transform:rotate(-24deg)}.ring-one{width:175px;height:175px}.ring-two{width:240px;height:240px}.ring-three{width:312px;height:312px}.hero-ornament span{font-family:var(--serif);font-size:150px;color:#e4dcc5;line-height:1;margin-top:-110px;margin-left:12px;text-shadow:0 5px 40px #1f493b}.hero-ornament:before,.hero-ornament:after{content:"";position:absolute;background:rgba(216,231,203,.14)}.hero-ornament:before{width:1px;height:280px}.hero-ornament:after{height:1px;width:300px}
.search-section{padding:45px 0 32px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.section-heading h2{font-family:var(--serif);font-size:23px;letter-spacing:-1.1px;color:#203c32;margin:8px 0 0}.section-side-note{font-size:12px;color:#9ca8a0;padding-bottom:3px}.search-field{display:flex;align-items:center;gap:12px;padding:7px 7px 7px 23px;border:1px solid #dfe5dc;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(34,59,41,.035)}.search-icon{font-size:27px;color:#8e9c90;line-height:1}.search-field input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;color:#244438;outline:0;padding:12px 3px}.search-field input::placeholder{color:#a6afa8}.search-field button{border:0;background:#2d5648;color:white;font-size:12px;font-weight:700;min-width:136px;height:46px;border-radius:7px}.search-field button:hover{background:#244337}.search-field button span{margin-left:10px;font-size:15px}.example-line{display:flex;align-items:center;gap:15px;margin-top:17px;flex-wrap:wrap}.example-label{font-size:11px;color:#9da8a1}.quick-words{display:flex;gap:7px;flex-wrap:wrap}.quick-chip{border:1px solid #e2e8de;background:#fbfcf9;color:#768279;border-radius:50px;padding:6px 13px;font-size:11px}.quick-chip:hover,.quick-chip.active{background:#e9f1e8;color:#315946;border-color:#d5e5d5}
.result-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.result-topline .eyebrow{color:#8c9a8f}.result-counter{font-size:11px;color:#a2aea7}.result-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 20px}.result-head h2{font-family:var(--serif);font-size:29px;letter-spacing:-1px;margin:0;color:#1b392e}.result-head p{margin:6px 0 0;color:#94a39b;font-size:12px}.reference-action{border:1px solid #dce4da;background:white;border-radius:7px;color:#567362;font-size:11px;padding:11px 14px}.reference-action:hover{background:#f1f6ef}.analysis-cards{display:grid;grid-template-columns:1fr 1fr;gap:17px}.analysis-card{background:white;border:1px solid #e4e9e1;border-radius:12px;padding:24px 24px 18px;position:relative;overflow:hidden;min-height:210px}.analysis-card.old{background:#fdfbf6;border-color:#e9e3d6}.card-top{display:flex;justify-content:space-between;align-items:center}.card-top small{font-size:10px;letter-spacing:1.4px;color:#87958a;font-family:"DM Sans",var(--sans);font-weight:700}.card-top .tag{border-radius:50px;background:#edf4ea;color:#527257;font-size:10px;padding:5px 9px}.analysis-card.old .tag{background:#f1ead8;color:#987d4e}.big-word{font-family:var(--serif);font-weight:600;font-size:clamp(31px,3.7vw,49px);color:#294539;letter-spacing:-1.5px;margin:23px 0 9px;line-height:1.45;overflow-wrap:anywhere}.old .big-word{color:#625238}.card-caption{color:#929a93;font-size:12px;line-height:1.7}.microline{height:1px;background:#eceee8;margin:20px 0 13px}.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#98a59a;font-size:11px}.old .microline{background:#eee7d8}.card-foot strong{font-weight:600;color:#54725d}.historical-notice{margin:13px 0 0;display:flex;gap:10px;align-items:start;color:#8b8c79;font-size:11px;line-height:1.8}.info-circle{display:grid;place-items:center;border:1px solid #ddd9ca;border-radius:50%;height:17px;width:17px;font-size:11px;flex:0 0 auto;margin-top:1px}
.tabs{display:flex;gap:6px;background:#edf0e9;padding:5px;border-radius:9px;width:max-content;max-width:100%;margin:27px 0 20px;flex-wrap:wrap}.tab-btn{border:0;border-radius:7px;background:transparent;color:#788a7a;padding:10px 18px;font-size:12px;font-weight:600}.tab-btn.active{color:#315848;background:#fff;box-shadow:0 1px 5px rgba(20,38,29,.06)}.analysis-panel{background:#fff;border:1px solid #e7ebe3;border-radius:13px;padding:26px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-head h3{font-family:var(--serif);color:#2b4438;margin:7px 0 0;font-size:21px}.panel-eyebrow{font-size:10px;letter-spacing:1.7px;color:#9daa9e;font-weight:700}.panel-note{font-size:11px;color:#a4afa7;text-align:right}.token-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:9px}.token-card{padding:15px 12px 13px;background:#f9faf7;border:1px solid #e9eee6;border-radius:10px;min-height:168px;display:flex;flex-direction:column}.token-card.is-yang{background:#faf7ef;border-color:#ede6d8}.token-card.is-yin{background:#f2f7f5;border-color:#e1ebe7}.token-top{display:flex;align-items:center;justify-content:space-between;color:#97a49b;font-size:10px}.token-glyph{font-family:var(--serif);font-weight:600;color:#334d41;font-size:37px;line-height:1.6;text-align:center;margin:4px 0}.token-card.is-yang .token-glyph{color:#9d7545}.token-card.is-yin .token-glyph{color:#446d63}.token-status{font-size:10px;text-align:center;color:#66806d;font-weight:700;margin-bottom:8px}.token-card.is-yang .token-status{color:#9f7d50}.token-note{text-align:center;font-size:11px;line-height:1.6;color:#828e85;margin:auto 0 0}.token-movement{border-top:1px solid #e9eee7;padding-top:9px;margin-top:13px;font-size:11px;line-height:1.6;color:#516b59}.grammar-note{background:#f7f8f4;border-left:2px solid #849c87;padding:12px 14px;color:#7c8980;font-size:12px;line-height:1.8;margin-top:17px;border-radius:0 5px 5px 0}.movement-flow{display:flex;align-items:center;gap:6px;overflow:auto;padding-bottom:8px}.movement-chip{flex:1;min-width:106px;text-align:center;border-radius:9px;padding:16px 11px;background:#f8f9f6;border:1px solid #e8ece5}.movement-chip b{display:block;font-family:var(--serif);font-size:24px;margin-bottom:5px}.movement-chip span{font-size:10px;line-height:1.6;color:#7d8980}.flow-arrow{color:#b8c1b7;font-size:17px}.movement-chip.yang{background:#faf7ef}.movement-chip.yin{background:#f1f7f4}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare-box{padding:23px;border:1px solid #e6eae4;border-radius:10px;background:#fcfdfb}.compare-box h4{font-size:12px;color:#819587;margin:0 0 11px}.compare-box strong{font-size:19px;font-family:var(--serif);color:#2b443a}.compare-box p{font-size:12px;color:#8a968d;line-height:1.8}.interpretation-card{background:#1c3d34;border-radius:11px;color:#fff;padding:26px 28px;margin-top:18px;position:relative;overflow:hidden}.interpretation-card:after{content:"ㆍ";position:absolute;right:18px;top:-53px;color:rgba(234,236,204,.09);font-family:var(--serif);font-size:160px;pointer-events:none}.interpretation-card .eyebrow{color:#9dc1ad}.interpretation-card p{font-family:var(--serif);font-size:19px;line-height:1.9;margin:12px 0 12px;max-width:780px;position:relative;z-index:1}.interpretation-card small{font-size:11px;color:#9ebcac;line-height:1.8}.bottom-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;margin-top:18px}.small-panel{background:white;border:1px solid #e8ece5;border-radius:12px;padding:25px}.small-panel h3{font-family:var(--serif);font-size:19px;color:#2b483b;margin:6px 0 16px}.small-panel .eyebrow{font-size:10px}.audit-row{display:flex;justify-content:space-between;align-items:start;gap:12px;border-bottom:1px solid #eff1ed;padding:11px 0;color:#6d7d70;font-size:12px}.audit-row:last-child{border-bottom:0}.audit-row b{font-size:11px;text-align:right;color:#557461;font-weight:700;max-width:58%}.audit-row b.pending{color:#a98c61}.sources{display:flex;flex-direction:column;gap:11px}.source-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid #e8ece6;border-radius:8px;color:#4f6d58;font-size:12px;background:#f9fbf8}.source-link:hover{border-color:#a9c0a8}.source-link small{display:block;color:#a2aea4;font-size:10px;margin-top:4px}.source-link .external{font-size:15px}.no-source{font-size:12px;line-height:1.8;color:#8b988d}.compass{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);aspect-ratio:1/1;max-width:280px;margin:0 auto;gap:7px}.compass-cell{border-radius:9px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;line-height:1.2}.compass-cell .hanja{font-family:var(--serif);font-size:25px;font-weight:700}.compass-cell .dir{font-size:10px}.compass-cell .detail{font-size:10px;opacity:.75}.compass-cell.wood{background:#e7f0e6;color:#4a7850;grid-column:1;grid-row:2}.compass-cell.fire{background:#f8e7e3;color:#b76351;grid-column:2;grid-row:1}.compass-cell.earth{background:#f5efd9;color:#ae8a49;grid-column:2;grid-row:2}.compass-cell.metal{background:#eff0ed;color:#78827a;grid-column:3;grid-row:2}.compass-cell.water{background:#e6eff2;color:#527b8a;grid-column:2;grid-row:3}.compass-cell.faded{opacity:.34;filter:grayscale(.25)}.compass-cell.active{outline:2px solid rgba(39,93,68,.32);outline-offset:-2px}.compass-decoration{grid-row:1;grid-column:1;color:#b3bab1;font-size:9px;align-self:start}.compass-caption{font-size:11px;color:#99a59c;text-align:center;margin:15px 0 0}.word-banner{background:#f7f8f3;border:1px solid #e6eae1;padding:18px 20px;border-radius:10px;margin-top:20px;font-size:12px;color:#6a806e;line-height:1.9}
.static-view-header{padding:24px 0 30px}.static-view-header h1{font-family:var(--serif);font-size:39px;color:#1e3b2f;margin:13px 0}.static-view-header p{color:#859289;font-size:13px;line-height:1.8}.rules-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:32px}.rules-summary>div{border:1px solid #e3e9df;border-radius:12px;background:white;padding:22px;display:flex;gap:14px;align-items:center}.rules-summary strong{font-family:var(--serif);font-size:32px;color:#335c4a}.rules-summary span{font-size:12px;color:#8a968d}.spaced{margin-top:34px}.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(171px,1fr));gap:11px}.rule-tile{background:white;border:1px solid #e6ebe3;border-radius:10px;padding:18px}.rule-tile .vowel{font-family:var(--serif);font-size:34px;color:#234638}.rule-tile .vowel-name{font-size:11px;color:#9aa79d;margin-left:7px}.rule-tile .rule-motion{font-size:12px;color:#6e8273;line-height:1.7;margin-top:9px;min-height:38px}.rule-tile .polarity{font-size:10px;color:#8f9b90;font-weight:700}.consonant-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.group-card{background:white;border:1px solid #e6ebe3;border-radius:11px;padding:22px}.group-card h3{font-family:var(--serif);color:#2c4838;margin:8px 0;font-size:25px}.group-card strong{font-size:12px;color:#647868}.group-card p{font-size:12px;line-height:1.8;color:#8b978c}.rule-alert{display:flex;gap:14px;margin-top:26px;padding:18px;background:#f0f3ec;border-radius:9px;color:#687d6d}.rule-alert span{display:grid;place-items:center;border:1px solid #9aab9a;border-radius:50%;height:25px;width:25px;flex-shrink:0;font-weight:700}.rule-alert p{margin:0;font-size:12px;line-height:1.8}
.big-compass-area{background:#fff;border:1px solid #e6ebe3;border-radius:14px;padding:38px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px}.compass-intro h2{font-family:var(--serif);font-size:29px;line-height:1.5;color:#294c3c;margin:12px 0 16px}.compass-intro p{font-size:12px;line-height:2;color:#87988b;max-width:340px}.big-compass-area .compass{max-width:325px}.cycle-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cycle-card{background:#fff;border:1px solid #e6ebe3;border-radius:11px;padding:24px}.cycle-card small{font-size:11px;letter-spacing:.6px;color:#98a79b}.cycle-card strong{display:block;color:#3f6451;font-size:17px;margin:17px 0 12px;letter-spacing:1px}.cycle-card p{font-size:11px;color:#93a095;line-height:1.7}.footer{border-top:1px solid #e7e9e1;max-width:1340px;margin:0 auto;padding:22px 57px 28px;color:#a9b3ab;display:flex;justify-content:space-between;gap:18px;font-size:10px;line-height:1.7}
@media(max-width:1200px){main{padding-left:35px;padding-right:35px}.topbar{padding:0 35px}.hero-ornament{right:0;opacity:.7}.bottom-grid{grid-template-columns:1fr 1fr}.footer{padding-left:35px;padding-right:35px}}@media(max-width:920px){.sidebar{width:70px;padding:20px 10px}.brand{padding:3px 4px 35px}.brand>span:nth-child(2),.side-eyebrow,.nav-link span:not(.nav-symbol),.sidebar-words,.side-divider,.side-bottom{display:none}.nav-link{justify-content:center;padding:0}.nav-symbol{width:auto}.main-column{margin-left:70px;width:calc(100% - 70px)}.hero-ornament{right:-60px;opacity:.45}.bottom-grid{grid-template-columns:1fr}}@media(max-width:630px){.sidebar{width:100%;height:61px;bottom:auto;flex-direction:row;align-items:center;padding:8px 15px;justify-content:space-between;border-right:0;border-bottom:1px solid #e6eae1}.brand{padding:0}.brand-icon{width:34px;height:34px;font-size:30px;border-radius:10px;padding-bottom:12px}.brand>span:nth-child(2){display:block}.brand b{font-size:15px}.brand small{font-size:7px}.side-nav{flex-direction:row;gap:4px}.nav-link{height:39px;width:41px}.nav-link .nav-symbol{font-size:18px}.main-column{width:100%;margin-left:0;padding-top:61px}.topbar{height:56px;padding:0 18px}.top-right{font-size:10px}main{padding:20px 15px 50px}.hero{min-height:290px;padding:30px 23px 22px}.hero h1{font-size:28px;position:relative;z-index:2}.hero-ornament{right:-110px;top:5px;opacity:.27}.hero-lower{font-size:9px}.search-section{padding-top:33px}.section-heading h2{font-size:21px}.section-side-note{display:none}.search-field{padding-left:13px;gap:3px}.search-field input{font-size:12px}.search-field button{height:43px;min-width:91px;font-size:11px}.search-field button span{display:none}.analysis-cards{grid-template-columns:1fr;gap:10px}.analysis-card{min-height:175px;padding:20px}.big-word{font-size:38px;margin:13px 0}.result-head h2{font-size:24px}.result-head{align-items:start}.reference-action{padding:8px;font-size:10px}.analysis-panel{padding:16px}.token-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-grid,.bottom-grid,.cycle-grid,.big-compass-area{grid-template-columns:1fr}.panel-head{align-items:start}.panel-note{max-width:140px}.static-view-header h1{font-size:29px}.rules-summary{gap:7px}.rules-summary>div{padding:14px;flex-direction:column;gap:3px;text-align:center}.rules-summary span{font-size:10px}.big-compass-area{padding:22px}.footer{padding:18px 16px;flex-direction:column}}