@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--ink:#22312c;--muted:#778079;--paper:#f7f7f2;--line:#e3e5dc;--green:#2f4c40;--lime:#dbe9ba;--side:244px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--paper);font:14px 'Noto Sans Thai',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #9aa877;outline-offset:4px}.skip{position:fixed;left:15px;top:-100px;background:white;padding:12px;z-index:100}.skip:focus{top:15px}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:#243b33;color:#e7ede6;padding:35px 22px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;gap:12px;align-items:center;font:600 13px Georgia,serif;letter-spacing:1.6px}.brand small{display:block;font:8px Arial,sans-serif;letter-spacing:2px;margin-top:6px;color:#aebfb1}.brand-mark{font:24px Georgia,serif;border:1px solid #93a58c;padding:7px 5px;color:#dbe9ba;position:relative}.brand-mark span{font-size:17px}.project-label{font:9px Arial,sans-serif;color:#9aaf9e;letter-spacing:2px;margin-top:54px}.project-name{font-size:23px;font-weight:500;margin-top:12px}.project-name span{display:block;font:12px Arial,sans-serif;color:#afc0b2;margin-top:9px}.sidebar nav{margin-top:38px;display:grid;gap:7px}.nav-link{font-size:12px;padding:12px 10px;display:flex;gap:10px;align-items:center;color:#becbc0;border-radius:6px}.nav-link>span{font-size:19px;line-height:1}.nav-link b{font:10px Arial;margin-left:auto;padding:4px 6px;background:#ffffff12;border-radius:4px}.nav-link:hover,.nav-link.active{background:#dce8c01b;color:#edf3df}.nav-link.active{box-shadow:inset 2px 0 #d9e7b7}.side-bottom{margin-top:auto;font-size:10px;color:#c0cebf;padding-top:25px;border-top:1px solid #ffffff18}.side-bottom small{display:block;margin:8px 0 0 13px;font-size:9px;color:#94ab98}.dot,.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c7db9e;margin-right:6px}.workspace{margin-left:var(--side)}.topbar{height:73px;border-bottom:1px solid var(--line);padding:0 45px;display:flex;align-items:center;justify-content:space-between;background:#fafaf6}.breadcrumb{font-size:11px;color:var(--muted)}.breadcrumb span{margin:0 14px;color:#c3c8bb}.breadcrumb strong{font-weight:500;color:var(--ink)}.top-meta{font:9px Arial,sans-serif;letter-spacing:1.4px;display:flex;align-items:center;gap:22px;color:#777e70}.avatar{background:#e8ebdf;border:1px solid #dde3d1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#4f6443;font:12px Georgia,serif}main{max-width:1520px;margin:auto;padding:43px 45px 0}.eyebrow{font:10px Arial,sans-serif;letter-spacing:2px;color:#839074}.page-heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 28px;gap:20px}h1{font-size:clamp(25px,2.8vw,39px);font-weight:500;letter-spacing:-.8px;margin:0;line-height:1.45}.page-heading p,.section-heading p,.materials>div>p{font-size:12px;color:var(--muted);margin:8px 0 0}.mobile-break{display:none}.outline-button{display:flex;align-items:center;gap:32px;border:1px solid #cad2c2;padding:10px 16px;font-size:11px;border-radius:4px;white-space:nowrap}.outline-button:hover{background:#e8eedf}.outline-button span{font-size:17px}.project-strip{display:grid;grid-template-columns:1.5fr 1fr 1.25fr 1.2fr;border:1px solid var(--line);background:#fcfcf8;border-radius:5px;margin-bottom:24px;padding:19px 0}.project-strip>div{padding:0 23px;border-left:1px solid var(--line)}.project-strip>div:first-child{border:0}.project-strip small{display:block;color:#8a9187;font-size:9px;margin-bottom:6px}.project-strip strong{font-size:11px;font-weight:500}.status-dot{width:5px;height:5px;background:#8eaa66}.hero{position:relative;display:block;padding:0;width:100%;border:0;border-radius:6px;overflow:hidden;background:#dcdcd3;text-align:left;aspect-ratio:1.8}.hero img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.hero:hover img{transform:scale(1.015)}.hero:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#15231d9c);pointer-events:none}.hero-tag{position:absolute;top:22px;left:24px;padding:7px 11px;border:1px solid #ffffff60;background:#ffffffb8;color:#334235;font-size:10px;border-radius:3px}.hero-caption{position:absolute;z-index:1;bottom:26px;left:27px;right:27px;display:flex;align-items:end;justify-content:space-between;color:white}.hero-caption small{font:9px Arial,sans-serif;letter-spacing:1.7px;opacity:.8}.hero-caption strong{display:block;font:30px Georgia,serif;margin-top:10px}.zoom-circle{width:37px;height:37px;border:1px solid #ffffff70;border-radius:50%;display:grid;place-items:center;font-size:20px}.image-footnote{display:flex;justify-content:space-between;font-size:9px;color:#8b9288;margin-top:10px;gap:15px}.tiny-square{display:inline-block;width:5px;height:5px;border:1px solid #9ba48e;margin-right:6px}.section-block{padding-top:57px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}h2{font-size:25px;font-weight:500;letter-spacing:-.5px;margin:8px 0 0}.count-pill{border:1px solid var(--line);border-radius:30px;padding:6px 11px;color:#829073;font-size:10px}.filters{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px}.filter{border:1px solid transparent;background:transparent;color:#838b80;padding:9px 14px;border-radius:4px;font-size:11px}.filter span{margin-left:7px;opacity:.75;font:9px Arial}.filter.active{background:var(--green);color:#f2f6e8}.filter:hover:not(.active){background:#e8ecdf}.results-summary{font-size:10px;color:#8b9483;margin:13px 0}.item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.item-card{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;transition:border-color .2s,transform .2s}.item-card:hover{border-color:#9fac91;transform:translateY(-2px)}.card-image{width:100%;aspect-ratio:1.48;position:relative;border:0;display:block;padding:0;background:#edefe7;overflow:hidden}.card-image img{display:block;width:100%;height:100%;object-fit:cover}.card-code{position:absolute;top:13px;left:13px;background:#fffffff0;color:#3c4f3a;padding:5px 8px;border-radius:2px;font:10px Arial,sans-serif;letter-spacing:1px}.shared-tag{position:absolute;bottom:12px;left:13px;color:white;background:#253a32b5;font-size:9px;padding:4px 7px;border-radius:3px}.placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#f7f8f2,#e9ede1);color:#8e9a80}.placeholder svg{width:110px;height:90px;stroke:#a4af97;fill:none;stroke-width:1.1;opacity:.8}.placeholder strong{font-size:11px;font-weight:500;margin-top:7px}.placeholder small{font:8px Arial;letter-spacing:2px;margin-top:6px;opacity:.7}.card-body{padding:17px 17px 13px}.card-title{font-size:13px;font-weight:500;margin:0 0 8px}.card-dimension{font-size:10px;color:#8a9284;min-height:32px;line-height:1.6;margin:0}.card-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eef0e8;margin-top:13px;padding-top:11px;gap:5px}.badge{font-size:8px;background:#f0f3e8;color:#7f8c67;border-radius:3px;padding:4px 6px}.badge.ready{background:#e7eee2;color:#527345}.detail-button{border:0;background:none;font-size:10px;color:#4b6543;padding:5px}.detail-button:hover{text-decoration:underline}.drawing-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:30px}.plan-preview{border:1px solid var(--line);background:white;border-radius:5px;overflow:hidden}.plan-preview img{width:100%;height:230px;object-fit:contain;padding:14px;display:block}.plan-preview>span{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:13px 18px;font-size:10px}.document-list{display:flex;flex-direction:column;gap:14px}.doc-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:#fff;padding:18px;border-radius:5px}.doc-row:hover{border-color:#9aaa89}.doc-icon{border:1px solid #d7decf;color:#6f835c;font:9px Arial;padding:12px 7px;background:#f5f7f1}.doc-row>span:nth-child(2){flex:1}.doc-row strong{display:block;font-size:12px;font-weight:500}.doc-row small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.drawing-note{display:flex;gap:10px;padding:0 8px;color:#88917f;font-size:10px}.drawing-note p{margin:0;line-height:1.8}.materials{border-top:1px solid var(--line);margin-top:53px;padding-top:36px;display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:26px;align-items:start}.materials h2{font-size:22px}.material-card{display:flex;align-items:center;gap:14px}.swatch{width:70px;height:90px;flex-shrink:0;border-radius:3px;background:linear-gradient(110deg,#a4a49b,#81847c);box-shadow:inset 0 0 0 1px #00000010}.material-card small{font-size:9px;color:#8a9383}.material-card h3{font:19px Georgia,serif;margin:8px 0}.material-card p{font-size:10px;color:#8a9383;margin:0}.brief-points p{font-size:10px;margin:0 0 12px;color:#63705b}.brief-points p span{font:9px Arial;margin-right:10px;color:#9aab84}.brief-points>small{font-size:9px;line-height:1.8;color:#8a9282;display:block}footer{border-top:1px solid var(--line);margin-top:45px;padding:23px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#8a9282;font:9px Arial;letter-spacing:.5px}footer>span:first-child{color:#455c42;font-size:11px}footer small{font-size:7px;margin-left:5px}footer p{font-family:'Noto Sans Thai',sans-serif;font-size:9px;margin:0}.detail-dialog{width:min(920px,calc(100vw - 30px));max-height:90dvh;padding:0;border:1px solid #dce1d2;border-radius:8px;color:var(--ink);background:#fafbf6}.detail-dialog::backdrop{background:#17281ed1;backdrop-filter:blur(4px)}.modal-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;background:#fafbf6;border-bottom:1px solid var(--line);padding:13px 20px;font:10px Arial;letter-spacing:1.5px}.close-modal{border:0;background:#ecefe5;width:32px;height:32px;border-radius:50%;font-size:15px}.modal-content{padding:24px}.modal-content h2{font-size:24px;margin:0 0 8px}.modal-content p{font-size:12px;color:#7f8974;line-height:1.9}.modal-content .placeholder{aspect-ratio:1.8;border-radius:5px}.modal-image{display:block;max-height:65vh;max-width:100%;height:auto;margin:20px auto;border-radius:4px}.modal-drawing{display:block;width:100%;background:white;padding:10px;border:1px solid var(--line)}.modal-actions{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}.modal-caption{font-size:10px!important;margin:6px 0 20px!important}.modal-section-title{font-size:12px;font-weight:500;margin:26px 0 12px}.load-error{padding:25px;color:#8c4e38;background:#f6eee6;border-radius:5px}.hidden{display:none!important}@media(min-width:1600px){.hero{aspect-ratio:1.95}}@media(max-width:1150px){:root{--side:210px}.sidebar{padding:30px 15px}main{padding:32px 28px 0}.topbar{padding:0 28px}.project-strip>div{padding:0 13px}.item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.materials{grid-template-columns:1fr 1fr}.brief-points{grid-column:1/-1;display:flex;gap:20px;flex-wrap:wrap}.brief-points>small{width:100%}.hero{aspect-ratio:1.55}}@media(max-width:760px){:root{--side:0px}.sidebar{position:relative;width:100%;padding:17px 20px;display:block}.brand{font-size:11px;gap:10px}.brand-mark{font-size:18px}.brand small{font-size:7px;margin-top:3px}.project-label,.side-bottom{display:none}.project-name{position:absolute;right:20px;top:17px;font-size:16px;text-align:right;margin:0}.project-name span{font-size:9px;margin-top:5px}.sidebar nav{margin-top:20px;display:flex;overflow:auto;gap:3px;padding-bottom:1px}.nav-link{font-size:10px;padding:8px 10px;white-space:nowrap}.nav-link>span{font-size:15px}.nav-link b{display:none}.topbar{height:49px;padding:0 20px}.top-meta{font-size:8px;letter-spacing:.5px;gap:10px}.avatar{width:24px;height:24px}.workspace{margin-left:0}main{padding:28px 20px 0}.page-heading{align-items:start;margin-top:11px}h1{font-size:25px;letter-spacing:-.4px}.page-heading p{font-size:10px;max-width:190px;line-height:1.8}.outline-button{gap:13px;padding:8px 10px;font-size:10px;margin-top:7px}.project-strip{grid-template-columns:1fr 1fr;row-gap:18px;padding:16px 0;margin-bottom:17px}.project-strip>div{padding:0 13px}.project-strip>div:nth-child(3){border:0}.project-strip strong{font-size:10px}.project-strip small{font-size:8px}.hero{aspect-ratio:1.16}.hero img{object-position:center}.hero-tag{top:14px;left:14px;font-size:8px;padding:6px 8px}.hero-caption{bottom:18px;left:17px;right:17px}.hero-caption strong{font-size:23px}.hero-caption small{font-size:8px}.image-footnote{font-size:8px;line-height:1.6}.image-footnote>span:last-child{display:none}.section-block{padding-top:37px}h2{font-size:22px}.section-heading p{font-size:10px}.section-heading{margin-bottom:18px}.filters{gap:3px;padding-bottom:12px}.filter{font-size:9px;padding:8px 9px}.filter span{margin-left:4px}.item-grid{gap:12px}.card-body{padding:12px}.card-title{font-size:11px;min-height:33px}.card-dimension{font-size:9px;min-height:44px}.badge{font-size:7px;padding:4px}.detail-button{font-size:9px}.card-code{top:9px;left:9px;font-size:9px}.shared-tag{font-size:7px;bottom:8px;left:8px}.placeholder svg{height:65px;width:85px}.placeholder strong{font-size:9px}.placeholder small{font-size:6px}.drawing-layout{grid-template-columns:1fr;gap:17px}.plan-preview img{height:220px}.doc-row{padding:14px}.doc-row strong{font-size:11px}.doc-row small{font-size:8px}.materials{margin-top:35px;padding-top:28px;grid-template-columns:1fr;gap:23px}.brief-points{display:block;grid-column:auto}.material-card{padding:0}.swatch{width:60px;height:70px}.mobile-break{display:block}.materials h2{font-size:22px}footer{flex-wrap:wrap;margin-top:25px;gap:12px}footer>span:last-child{display:none}.modal-content{padding:17px}.modal-content h2{font-size:20px}.modal-content p{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero img,.item-card{transition:none}}