:root{--bg:#fff;--fg:#111;--mut:#4b5563;--line:#e5e7eb;--soft:#f8f7fb;--pri:#6d28d9;--pri-d:#5b21b6;--acc:#ea580c;--acc-d:#c2410c;--r:14px;--f-h:"Kanit","Noto Sans Thai",system-ui,sans-serif;--f-b:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.75 var(--f-b);overflow-wrap:break-word}
img,svg,canvas{max-width:100%}
img{height:auto;display:block;margin:0 auto}
a{color:var(--pri)}
a:hover{color:var(--pri-d)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.wl-skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100}
.wl-skip:focus{left:8px;top:8px}
.wl-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.wl-head{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.wl-head__in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.wl-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--fg);font:700 1.25rem var(--f-h)}
.wl-nav__list,.wl-foot__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.wl-nav__list a,.wl-foot__list a{color:var(--fg);text-decoration:none;padding:10px 4px;display:inline-block;min-height:44px}
.wl-nav__list a:hover,.wl-foot__list a:hover{color:var(--pri);text-decoration:underline}
.wl-main{min-height:60vh}
.wl-h1{font:700 clamp(1.6rem,5.2vw,2.5rem)/1.3 var(--f-h);margin:20px 0 8px}
.wl-lead p{font-size:1.06rem;margin:0 0 16px;color:#1f2937;max-width:75ch}
.wl-h2{font:600 clamp(1.3rem,3.6vw,1.75rem)/1.35 var(--f-h);margin:0 0 8px}
.wl-h3{font:600 1.1rem/1.4 var(--f-h);margin:0 0 8px}
.wl-tool{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0 28px}
.wl-tool__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.wl-stage{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center}
.wl-wheelbox{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1}
.wl-wheelbox canvas{width:100%;height:100%;display:block;cursor:pointer;touch-action:manipulation}
.wl-pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:3;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid var(--fg);filter:drop-shadow(0 2px 0 #fff)}
.wl-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22%;aspect-ratio:1/1;min-width:64px;border-radius:50%;border:4px solid var(--fg);background:#fff;color:var(--fg);font:700 clamp(.9rem,3vw,1.2rem) var(--f-h);cursor:pointer;z-index:4}
.wl-hub:hover:not(:disabled){background:var(--acc);color:#fff;border-color:var(--fg)}
.wl-hub:disabled{opacity:.55;cursor:not-allowed}
.wl-result{margin:14px auto 0;max-width:520px;border:2px dashed var(--pri);border-radius:var(--r);padding:10px 14px;background:#faf5ff}
.wl-result__lab{display:block;font-size:.85rem;color:var(--mut)}
.wl-result__val{display:block;font:700 clamp(1.3rem,5vw,2rem)/1.35 var(--f-h);word-break:break-word}
.wl-result__act{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.wl-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.wl-lab{display:block;font-weight:600;margin:10px 0 4px}
.wl-count{font-weight:400;color:var(--mut);font-size:.9rem;margin-left:6px}
.wl-input{width:100%;font:inherit;padding:10px 12px;border:1px solid #9ca3af;border-radius:10px;background:#fff;color:var(--fg);min-height:44px}
.wl-ta{resize:vertical;line-height:1.6}
.wl-hint,.wl-note{font-size:.88rem;color:var(--mut);margin:4px 0 0;min-height:1.4em}
.wl-opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0}
.wl-chk,.wl-sel{display:flex;align-items:center;gap:8px;min-height:44px}
.wl-chk input{width:20px;height:20px;accent-color:var(--pri)}
.wl-sel select{font:inherit;padding:8px;border:1px solid #9ca3af;border-radius:8px;min-height:44px;background:#fff}
.wl-row{display:flex;flex-wrap:wrap;gap:8px}
.wl-btn{font:600 .95rem var(--f-b);padding:10px 16px;min-height:44px;border-radius:10px;border:2px solid var(--pri);background:#fff;color:var(--pri);cursor:pointer}
.wl-btn:hover:not(:disabled){background:var(--pri);color:#fff}
.wl-btn:disabled{opacity:.5;cursor:not-allowed}
.wl-btn--ghost{border-color:#6b7280;color:#111}
.wl-btn--ghost:hover:not(:disabled){background:#111;border-color:#111}
.wl-btn--solid{background:var(--pri);color:#fff}
.wl-btn--solid:hover{background:var(--pri-d)}
.wl-hist{margin-top:14px}
.wl-hist__list{margin:0;padding-left:1.4rem;max-height:200px;overflow:auto}
.wl-hist__empty{list-style:none;margin-left:-1.4rem;color:var(--mut)}
.wl-gal,.wl-ugc{margin-top:28px}
.wl-gal__sub{margin:0 0 12px;color:var(--mut)}
.wl-gal__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wl-chip{font:500 .95rem var(--f-b);padding:10px 16px;min-height:44px;border-radius:999px;border:1px solid #9ca3af;background:#fff;color:var(--fg);cursor:pointer}
.wl-chip:hover{border-color:var(--acc);background:#fff7ed}
.wl-empty{color:var(--mut)}
.wl-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:14px;max-width:640px}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-prose{max-width:820px;padding-top:24px;padding-bottom:32px}
.wl-prose h1{font:700 clamp(1.6rem,5vw,2.2rem)/1.3 var(--f-h);margin:0 0 8px}
.wl-prose h2{font:600 clamp(1.25rem,3.6vw,1.6rem)/1.4 var(--f-h);margin:2rem 0 .5rem}
.wl-prose h3{font:600 1.1rem/1.45 var(--f-h);margin:1.4rem 0 .3rem}
.wl-prose p,.wl-prose li{max-width:75ch}
.wl-prose table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.wl-prose th,.wl-prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.wl-prose th{background:var(--soft)}
.wl-prose .wp-block-table,.wl-prose .wl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wl-prose .wp-block-table table{min-width:560px}
.wl-prose figure{margin:1.2rem 0;text-align:center}
.wl-prose figure img{margin:0 auto}
.wl-prose .rank-math-question{font:600 1.05rem/1.5 var(--f-h);margin:1.2rem 0 .2rem}
.wl-prose .rank-math-answer{margin:0}
.wl-guide{max-width:820px}
.wl-upd{font-size:.88rem;color:var(--mut);margin:.2rem 0 1rem}
.wl-foot{border-top:1px solid var(--line);padding:20px 0;margin-top:32px;background:#fff}
.wl-foot__copy{margin:8px 0 0;color:var(--mut);font-size:.9rem}
.wl-stage:fullscreen{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto}
.wl-stage:fullscreen .wl-wheelbox{max-width:min(78vh,92vw)}
@media (min-width:900px){.wl-tool__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.wl-prose figure img,.wl-prose img.aligncenter{display:block;margin:0 auto;width:100%;max-width:560px;height:auto}
.wl-prose figcaption{text-align:center;font-size:.88rem;color:var(--mut);margin-top:6px}
.wl-prose ul.wl-star{list-style:none;padding-left:0}
.wl-prose ul.wl-star li{margin:.45rem 0}