/* ============================================================
   พูลพานิชวูด — ธีมสีน้ำกลางทั้งเว็บ (อาชิสั่ง 23 ต.ค. 69: โทนเดิม + ศิลปะสีน้ำ ทางเดียวกันทั้งหมด)
   ใส่ทุกหน้าด้วย tools/wc_skin.py (แทรก <link> + หัวเว็บ/แถบภาพ/ท้ายเว็บ)
   สีโทนเดิม: กรมท่า #33415c · ไม้ #a8743f · ใบไม้ #4f7a4a · กระดาษครีม #f4f1ea
   ภาพสีน้ำ: SDXL สไตล์กลางเดียวกับบอร์ดโลกของยาง (art/wc/) · พื้นผิวกระดาษ: tools/make_wc_assets.py
   ============================================================ */
:root:root{
  --bg:#f4f1ea; --surface:#fffdf8; --surface-2:#efebe2; --line:#e2dcd0;
  --ink:#23201c; --ink-2:#6e675e;
  --navy:#33415c; --navy-ink:#fff; --wood:#a8743f; --wood-soft:#f3e9da; --leaf:#4f7a4a; --leaf-soft:#e8f0e4;
  --brand:#33415c; --brand-ink:#fff; --accent:#a8743f;
  /* ชื่อตัวแปรของหน้าอื่นๆ ในเว็บ (3 มิติ กฤษณา บ้านคิท) ชี้มาที่โทนเดียวกัน */
  --panel:var(--surface); --card:var(--surface); --dim:var(--ink-2); --soft:var(--ink-2);
  --sea:var(--navy); --acc:var(--navy); --acc2:var(--navy); --warm:var(--wood); --gold:var(--wood); --page:var(--bg); --stage:var(--surface-2);
  --paper:url(/assets/wc/paper.webp);
  --wc-shadow:0 1px 2px rgba(35,32,28,.06),0 14px 32px -20px rgba(35,32,28,.38);
}
@media (prefers-color-scheme:dark){
  :root:root{
    --bg:#17191d; --surface:#1f2227; --surface-2:#262a31; --line:#343944;
    --ink:#ece8e1; --ink-2:#a8a196;
    --navy:#9fb3d9; --navy-ink:#0f1522; --wood:#d9a469; --wood-soft:#2b2419; --leaf:#8fc287; --leaf-soft:#1c261a;
    --brand:#9fb3d9; --brand-ink:#0f1522; --accent:#d9a469;
    --panel:var(--surface); --card:var(--surface); --dim:var(--ink-2); --soft:var(--ink-2);
    --sea:var(--navy); --acc:var(--navy); --acc2:var(--navy); --warm:var(--wood); --gold:var(--wood); --page:var(--bg); --stage:var(--surface-2);
    --paper:url(/assets/wc/paper-dark.webp);
    --wc-shadow:none;
  }
}
html body{overflow-x:clip;background-color:var(--bg);background-image:var(--paper);background-size:640px 640px}

/* ---------- หัวเว็บกลาง ---------- */
header.wc-top{display:block;margin:0;padding:0;border:0;color:var(--ink);width:100vw;margin-left:calc(50% - 50vw)}
.wc-top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px)}
.wc-top::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:22px;pointer-events:none;
  background:url(/assets/wc/edge-wood.webp) center top/1600px 22px repeat-x;opacity:.5}
.wc-top .wc-in{max-width:1120px;margin-inline:auto;padding:0 clamp(1rem,4vw,2rem);display:flex;align-items:center;gap:.6rem;min-height:64px}
.wc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px;margin-right:auto}
.wc-brand img{width:38px;height:38px;flex:none}
.wc-brand b{font:700 1.12rem/1.1 "Anuphan","IBM Plex Sans Thai",sans-serif;display:block}
.wc-brand small{display:block;font:500 .78rem/1.3 "IBM Plex Sans Thai",sans-serif;color:var(--ink-2);letter-spacing:.06em}
.wc-nav{display:flex;gap:2px}
.wc-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;text-decoration:none;font:600 1rem/1 "IBM Plex Sans Thai",sans-serif;color:var(--ink-2);border-radius:999px}
.wc-nav a:hover{color:var(--navy);background:color-mix(in srgb,var(--wood) 12%,transparent)}
.wc-call{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--navy);color:var(--navy-ink);
  font:600 1rem/1 "IBM Plex Sans Thai",sans-serif;padding:12px 18px;border-radius:999px;min-height:44px;white-space:nowrap}
.wc-call svg{width:18px;height:18px}
@media (max-width:760px){.wc-nav{display:none}}
@media (max-width:420px){.wc-brand small{display:none}.wc-call{padding:11px 14px}}

/* ---------- แถบภาพสีน้ำประจำหน้า (หน้าใน) ---------- */
.wc-band{position:relative;max-width:1180px;margin:22px auto 0;padding:0 clamp(1rem,4vw,2rem)}
.wc-band .wc-art{position:relative;height:clamp(140px,21vw,260px);overflow:hidden}
.wc-band .wc-art img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 92%,transparent);
  mix-blend-mode:multiply}
.wc-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:500 .98rem/1.5 "IBM Plex Sans Thai",sans-serif;color:var(--ink-2);margin:8px 0 0}
.wc-crumb a{color:var(--navy);font-weight:600;text-decoration:none}
.wc-crumb a:hover{text-decoration:underline}

/* ภาพสีน้ำในโหมดมืด: วางบน "แผ่นกระดาษ" ให้สียังสด (multiply บนพื้นมืดจะดำหมด) */
@media (prefers-color-scheme:dark){
  .wc-band .wc-art,.wc-paint{background:#efe9dc url(/assets/wc/paper.webp);border-radius:22px;isolation:isolate}
  .wc-band .wc-art img{-webkit-mask:none;mask:none}
}

/* ---------- ภาพสีน้ำทั่วไป ---------- */
.wc-paint{display:block}
.wc-paint img{display:block;width:100%;height:auto;mix-blend-mode:multiply}

/* หัวข้อมีปาดพู่กันใต้ */
.wc-h{position:relative;display:inline-block;z-index:0}
.wc-h::after{content:"";position:absolute;left:-6px;right:-10px;bottom:-.05em;height:.55em;z-index:-1;
  background:url(/assets/wc/stroke-wood.webp) left center/100% 100% no-repeat;opacity:.55}
.wc-h.leaf::after{background-image:url(/assets/wc/stroke-leaf.webp)}
.wc-h.navy::after{background-image:url(/assets/wc/stroke-navy.webp)}

/* ---------- ท้ายเว็บกลาง ---------- */
footer.wc-foot{display:block;max-width:none;padding:0;margin-right:0;margin-bottom:0;gap:0;font-size:1rem;flex-direction:initial}
.wc-foot{position:relative;margin-top:150px;width:100vw;margin-left:calc(50% - 50vw);color:#e9e6df;background:#2b374e}
.wc-foot::before{content:"";position:absolute;left:0;right:0;top:-108px;height:110px;
  background:url(/assets/wc/edge-navy.webp) center bottom/1600px 110px repeat-x;pointer-events:none}
.wc-foot .wc-in{max-width:1120px;margin-inline:auto;padding:34px clamp(1rem,4vw,2rem) 40px;display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:760px){.wc-foot .wc-in{grid-template-columns:1.3fr 1fr 1fr}}
.wc-foot b{font:700 1.15rem/1.3 "Anuphan",sans-serif;color:#fff}
.wc-foot p{margin:.35rem 0;font:400 1rem/1.65 "IBM Plex Sans Thai",sans-serif;color:#cfd3dc}
.wc-foot h4{margin:0 0 .4rem;font:600 .95rem/1.4 "IBM Plex Sans Thai",sans-serif;color:#e8c9a2;letter-spacing:.04em}
.wc-foot a{color:#fff;text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
.wc-foot a:hover{text-decoration:underline}
.wc-foot ul{list-style:none;margin:0;padding:0}
.wc-foot .wc-tel{font:700 1.3rem/1.2 "Anuphan",sans-serif;font-variant-numeric:tabular-nums}
.wc-foot .wc-fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:14px;font-size:.9rem;color:#a9b0bd}


/* เครือหน้าความรู้: ลิงก์กลับหน้าแรกซ้ำกับ breadcrumb แล้ว · หัวหน้าใช้พื้นกระดาษเดียวกัน */
.wc-band ~ * .back-link,.wc-band ~ .back-link{display:none}
.wc-band ~ .page-head,.wc-band ~ main .page-head{background:transparent;border-bottom:0;padding-top:1.2rem}

/* แก้เฉพาะหน้า (ตัวเลือกด้วย data-wc ที่ wc_skin.py ใส่ให้ body) */
body[data-wc="3d"] .card .acts a:not(.pri),body[data-wc="3d-baan-kit-works"] .card .acts a:not(.pri){background:var(--surface-2);border-color:var(--line);color:var(--ink)}
body[data-wc="3d"] .card .acts a.pri{color:var(--navy-ink)}
body[data-wc="3d"] .wrap,body[data-wc="3d-baan-kit-works"] .wrap{padding-top:18px}
body[data-wc="teak"] .stat b{white-space:nowrap}
/* ปุ่มเมนูผลงาน 3 มิติ (nav.js) ลอยทับปุ่มโทรของหัวเว็บกลาง → เลื่อนลงมาใต้หัวเว็บ */
body[data-wc] #ppnNavBtn{position:absolute!important;top:84px!important}
/* หน้าที่เก็บหัวเว็บเดิม: หัวเดิมเป็นแถวที่ 2 ไม่ลอยทับหัวกลาง · ซ่อนแบรนด์ซ้ำ */
body[data-wc="join"] header.top,body[data-wc="join-privacy"] header.top,body[data-wc="logistic"] header.top,body[data-wc="plant-petunia"] nav.nav{position:static!important;top:auto}
body[data-wc="join"] header.top .brand,body[data-wc="join-privacy"] header.top .brand,body[data-wc="logistic"] header.top .home{display:none}
body[data-wc="join"] > footer:not(.wc-foot),body[data-wc="join-privacy"] > footer:not(.wc-foot){display:none}
body[data-wc="ch"] header:not(.wc-top){background:var(--navy)}

/* หน้าที่มีหัวเว็บเดิมของตัวเองถูกแทนแล้ว — ซ่อนตัวเก่าที่ตกค้าง */
.wc-replaced{display:none!important}
@media print{.wc-top,.wc-foot,.wc-band{display:none}}