/* ผังทักษา M1.1 — ใช้ร่วมทุกหน้า (ผังดวง · ดวงนาม · ตั้งผังเอง · โต๊ะไพ่ · หน้าสอน) · โครง HTML จาก /js/chart-html.js
   ทุก class ขึ้นต้น tk- และทุกสีเป็นตัวแปร --tk-* → ไม่ชนกับ CSS ของหน้า (เช่น .num ของปุ่มเลขหน้าตั้งเอง)
   ค่าตั้งต้น (ไม่มีตั้งค่า เช่นหน้าสอน) = ผังกระดาษขาว · 9 กล่องแยก · ฟอนต์ของเครื่อง
   ตั้งค่าหน้าตามาจาก attribute บน <html> (/js/look.js): data-theme a|b|c · data-chart paper|match · data-grid boxes|lines
     · ฟอนต์ 3 ช่อง: data-font (หน้าเว็บ) · data-chart-font (ผัง) · data-card-font (ไพ่ทักษา · cards.css) [สเปก 1.3ค D13]
   ไม่มี style="" ใน HTML ของผัง (CSP style-src 'self') — แถวใช้ class tk-r1…tk-r6 · สีกลางใช้ class tk-d1…tk-d8
   ส่วนที่ JS ตั้งเองมีแค่ transform และ --tk-num ผ่าน CSSOM (/js/chart-fit.js) ซึ่ง CSP ไม่ห้าม */

:root{
  /* สีผัง: กระดาษขาว (ข้อ 7 ค่าตั้งต้น) */
  --tk-paper:#ffffff; --tk-ink:#111111; --tk-muted:#5d6169; --tk-line:#000000;
  --tk-label:#b22222; --tk-mark:#e01010; --tk-green:#1e803f; --tk-blue:#1a2a8a;
  --tk-box-line:#c9cad0; --tk-split:rgba(0,0,0,.35);
  /* สีกลางผังตามวันของผัง (ข้อ 1) · ๑ อาทิตย์ … ๗ เสาร์ · ๘ ราหู */
  --tk-d1:#FFA8A8; --tk-d2:#FFF09A; --tk-d3:#FFC4E1; --tk-d4:#C1FFC1;
  --tk-d5:#FFCF99; --tk-d6:#BDE0FF; --tk-d7:#D9C2FF; --tk-d8:#D0D0D0;
  /* ฟอนต์ 7 แบบ (ข้อ 7ข) — ฟอนต์สำรองชุดเดียวกันทุกช่อง · ตั้งแยกได้ 3 ช่อง [Berto 15 ต.ค. 2569 · สเปก 1.3ค D13]:
       --font = ฟอนต์หน้าเว็บ (data-font · body ใน style.css) · --tk-font = ฟอนต์ผัง (data-chart-font · .tk ทุกหน้า)
       --card-font = ฟอนต์ไพ่ (data-card-font · ไพ่ทักษาใน cards.css) · ไม่มี attribute (เช่นหน้าสอน) = ของเครื่องทั้ง 3 ช่อง
     --tk-ws = ย่อคำในช่องตามฟอนต์ผัง ให้คำแถวบน-ล่างไม่ชนกัน — ค่าของ M1.1 (ตั้งตอนระยะแถว 1.2w: ws = 1.2 ÷ r) ไม่เปลี่ยน
     ฟอนต์ของเครื่อง .91: วัดบน Mac (Chrome 14 ต.ค. 2569 · สเปก M1.1 ข้อ 5.7) Tahoma r 1.21 · Sukhumvit Set 1.15 · Thonburi 1.31 → 1.2 ÷ 1.31 = .916 ปัดลง
     --tk-wz = ขยายคำ ๖ ชั้น 1.08 (+8%) ทุกฟอนต์ คู่กับระยะแถว 1.3w (.tk-cell) [Berto 15 ต.ค. 2569 · สเปก 1.3ข D8]
       คำแถวติดกันไม่ชนกันเมื่อ ws × wz ≤ 1.3 ÷ r (r = ระยะเส้นฐานต่ำสุดที่คำแถวติดกันไม่แตะ วัดแบบเครื่องมือ M1.1-ทดสอบคำชนกัน · ตรวจด้วย test/browser/look-ui.mjs หัวข้อ L)
       Charmonman แตะกันอยู่แล้วตั้งแต่ M1.1 ตามที่ Berto เลือก — หัวข้อ L ตรวจว่าไม่มากกว่าเดิม */
  --ff-system:Tahoma,"Sukhumvit Set","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;
  --ff-sarabun:"Sarabun",Tahoma,"Sukhumvit Set","Noto Sans Thai",sans-serif;
  --ff-looped:"Noto Sans Thai Looped",Tahoma,"Sukhumvit Set","Noto Sans Thai",sans-serif;
  --ff-pridi:"Pridi",Tahoma,"Sukhumvit Set","Noto Sans Thai",serif;
  --ff-kanit:"Kanit",Tahoma,"Sukhumvit Set","Noto Sans Thai",sans-serif;
  --ff-mitr:"Mitr",Tahoma,"Sukhumvit Set","Noto Sans Thai",sans-serif;
  --ff-charmonman:"Charmonman",Tahoma,"Sukhumvit Set","Noto Sans Thai",cursive;
  --font:var(--ff-system); --tk-font:var(--ff-system); --card-font:var(--ff-system);
  --tk-ws:.91; --tk-wz:1.08;
}
/* ฟอนต์หน้าเว็บ */
html[data-font="sarabun"]{--font:var(--ff-sarabun)}
html[data-font="looped"]{--font:var(--ff-looped)}
html[data-font="pridi"]{--font:var(--ff-pridi)}
html[data-font="kanit"]{--font:var(--ff-kanit)}
html[data-font="mitr"]{--font:var(--ff-mitr)}
html[data-font="charmonman"]{--font:var(--ff-charmonman)}
/* ฟอนต์ผัง + ขนาดคำ ๖ ชั้นของฟอนต์นั้น (--tk-ws) */
html[data-chart-font="sarabun"]{--tk-font:var(--ff-sarabun);--tk-ws:.89}
html[data-chart-font="looped"]{--tk-font:var(--ff-looped);--tk-ws:.96}
html[data-chart-font="pridi"]{--tk-font:var(--ff-pridi);--tk-ws:1}
html[data-chart-font="kanit"]{--tk-font:var(--ff-kanit);--tk-ws:1}
html[data-chart-font="mitr"]{--tk-font:var(--ff-mitr);--tk-ws:1}
html[data-chart-font="charmonman"]{--tk-font:var(--ff-charmonman);--tk-ws:.8}
/* ฟอนต์ไพ่ (ไพ่ทักษา ๔๘ ใบ · cards.css) */
html[data-card-font="sarabun"]{--card-font:var(--ff-sarabun)}
html[data-card-font="looped"]{--card-font:var(--ff-looped)}
html[data-card-font="pridi"]{--card-font:var(--ff-pridi)}
html[data-card-font="kanit"]{--card-font:var(--ff-kanit)}
html[data-card-font="mitr"]{--card-font:var(--ff-mitr)}
html[data-card-font="charmonman"]{--card-font:var(--ff-charmonman)}

/* สีผัง "เหมือนหน้าเว็บ" — แบบ ค = ผังมืด (ตัวอักษรทุกสี ≥ 4.5:1 บนพื้นและบนสีกลางผังทุกวัน) · แบบ ข = กระดาษครีม เส้นกรมท่า · แบบ ก = เหมือนกระดาษขาว */
html[data-chart="match"][data-theme="c"]{
  --tk-paper:#11111a; --tk-ink:#ece8de; --tk-muted:#a7a3b3; --tk-line:#8d8a9c;
  --tk-label:#ff8a80; --tk-mark:#ff6b61; --tk-green:#5fd07f; --tk-blue:#cdd8ff;
  --tk-box-line:#3a3948; --tk-split:rgba(255,255,255,.35);
  --tk-d1:#7a2e2e; --tk-d2:#6b5f12; --tk-d3:#6e2f55; --tk-d4:#235c2e;
  --tk-d5:#77461c; --tk-d6:#22476b; --tk-d7:#4a3577; --tk-d8:#45454d;
}
html[data-chart="match"][data-theme="b"]{--tk-paper:#fbf7ef; --tk-line:#1a3a6b; --tk-box-line:#d8cdb6}

/* ---------- ทั้งชุด · การ์ดผัง (ข้อ 8) ---------- */
.tk{container:tk / inline-size;font-family:var(--tk-font)}
.tk-sheets{display:grid;grid-template-columns:minmax(0,480px);justify-content:center;gap:18px}
/* กล่องกว้าง ≥ 860px: ผังกำเนิดซ้าย ผังจรขวา (ตามความกว้างกล่อง ไม่ใช่จอ → หน้า ๓ ผังใช้ชิ้นเดียวกันได้) */
@container tk (min-width:860px){
  .tk-two .tk-sheets{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
/* จอแนวนอน (ทุกอุปกรณ์ ไม่มีขั้นต่ำความกว้าง): ผังกำเนิดซ้าย ผังจรขวาเสมอ [Berto 15 ต.ค. 2569 · สเปก 1.3ค D15]
   กล่องทั้งชุด ≥ 860px ใช้กฎข้างบน (หน้าตาเท่าเดิมบนคอม/แท็บเล็ต) · แคบกว่านั้น (มือถือแนวนอน) = ผังละครึ่งกล่อง ระยะแบบกระชับตามความกว้างของแต่ละผัง
   ผังย่อให้พอดีจอ ตัวอักษรเล็กลงได้ ผู้ใช้ซูมเอง (viewport ไม่ปิดการซูม) · หมุนจอ = กล่องเปลี่ยนขนาด → chart-fit.js จัดหมึกใหม่ (ResizeObserver) · ผังเดี่ยวไม่เปลี่ยน */
@media (orientation:landscape){
  @container tk (width < 860px){
    .tk-two .tk-sheets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .tk-two .tk-card{padding:8px 4px 10px;border-radius:10px}
    .tk-two .tk-head{padding:0 4px}
    .tk-two .tk-grid{gap:4px;font-size:calc((100cqw - 8px) / 3 / 10.4)}
  }
}
.tk-card{min-width:0;background:var(--tk-paper);color:var(--tk-ink);border:1px solid var(--card-line,#e3e3e3);border-radius:12px;padding:12px 10px 14px}
.tk-sheet{container:tks / inline-size;min-width:0}
/* ผังคู่วางซ้าย-ขวา: ตาราง 3×3 สองผังเริ่มที่ความสูงเดียวกัน แม้หัวผังตัดบรรทัดไม่เท่ากัน [Berto 15 ต.ค. 2569 · สเปก 1.3ง D16]
   การ์ดสองใบสูงเท่าแถวอยู่แล้ว (ช่องของ .tk-sheets ยืดเต็มแถว) → แผ่นผังยืดเต็มการ์ด แล้วดันตารางลงล่างสุด
   หัวผังชิดบนเหมือนเดิม · ที่ว่างที่เพิ่มอยู่ใต้หัวผังที่สั้นกว่า · ไม่ตัดหรือย่อข้อความหัวผัง
   เรียงบน-ล่าง (แถวละผัง) การ์ดสูงเท่าเนื้อหาของตัวเอง → ไม่มีที่ว่างเพิ่ม หน้าตาเท่าเดิม · ผังเดี่ยว (.tk-one) ไม่เกี่ยว */
.tk-two .tk-card{display:flex;flex-direction:column}
.tk-two .tk-sheet{flex:1 1 auto;display:flex;flex-direction:column}
.tk-two .tk-grid{margin-top:auto}

/* ---------- หัวผัง 3 บรรทัด (ข้อ 2 · ข้อ 9) · ตัวเลขอารบิก ---------- */
.tk-head{margin-bottom:8px;font-size:clamp(12.5px,3.15cqw,15px);line-height:1.75;overflow-wrap:anywhere}
.tk-lbl{color:var(--tk-label);font-weight:700;margin-right:.1em}
.tk-seg{white-space:nowrap}
.tk-count{white-space:normal} /* ดวงนาม: "นับ …" ของชื่อยาว ตัดบรรทัดได้ (จอแคบไม่เลื่อนซ้ายขวา · สเปก F1-6 รอบทดสอบ) */
.tk-yang{white-space:nowrap;margin-left:.75em}

/* ---------- ตาราง 3×3 (ข้อ 3) · ทุกช่องขนาดเท่ากัน กว้าง 10.4w × สูง 11w (ช่องสูงขึ้น 6% · เดิมจัตุรัส) [Berto 15 ต.ค. 2569 · สเปก 1.3ข D9] ----------
   หน่วย em ในตาราง = w = ขนาดคำ = กว้างช่อง ÷ 10.4 → ทั้งผังย่อ/ขยายเป็นภาพเดียวกัน
   ตั้งต้น: 9 กล่องแยก มุมมน 10px ช่องห่าง 6px ขอบ 1.5px (กล่องกลางมีขอบด้วย) */
.tk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:calc((100cqw - 12px) / 3 / 10.4)}
.tk-grid>*{--tk-bw:1.5px;min-width:0;aspect-ratio:10.4/11;background:var(--tk-paper);border:var(--tk-bw) solid var(--tk-box-line);border-radius:10px;overflow:hidden}
/* แบบเส้นตาราง: เส้นดำ 2px = ช่องว่าง 2px บนพื้นเส้น + กรอบนอก 2px → เนื้อในทุกช่องเท่ากันเป๊ะ */
html[data-grid="lines"] .tk-grid{gap:2px;background:var(--tk-line);border:2px solid var(--tk-line);font-size:calc((100cqw - 8px) / 3 / 10.4)}
html[data-grid="lines"] .tk-grid>*{--tk-bw:0px;border:0;border-radius:0}

/* มือถือแบบกระชับ (ข้อ 8): กล่องทั้งชุดแคบกว่า 480px → การ์ดชิดขอบ ช่องห่างกล่อง 4px → ตัวอักษรใหญ่ขึ้นราว 10% */
@container tk (max-width:480px){
  .tk-card{padding:8px 4px 10px;border-radius:10px}
  .tk-head{padding:0 4px}
  .tk-grid{gap:4px;font-size:calc((100cqw - 8px) / 3 / 10.4)}
}

/* เบราว์เซอร์เก่าที่ไม่รู้จัก container query (Safari ก่อน iOS 16) → ประมาณขนาดจากความกว้างจอ ผังเรียงลงทีละผัง (เครื่องใหม่ไม่ใช้ส่วนนี้) */
@supports not (width:1cqw){
  .tk-grid{font-size:calc((min(100vw, 480px) - 52px) / 3 / 10.4)}
  html[data-grid="lines"] .tk-grid{font-size:calc((min(100vw, 480px) - 48px) / 3 / 10.4)}
  .tk-head{font-size:13px}
}

/* ---------- ในช่องดาว (ข้อ 4) ----------
   กว้าง: ขอบ .52 + คำ 4.6 + ช่องว่าง (ที่เหลือ ≈ 1.6) + กรอบวิวาจร 1.15 + ดาวลับ .9 + วงกลม 1.1 + ขอบ .52 = 10.4
   สูง:   ขอบบน .82 + คำ 6 แถว × 1.3 + แถวล่าง (ที่เหลือ ≈ 1.86) + ขอบล่าง .52 = 11 (ระยะแถว 1.3w · เดิม 1.2w ในช่องสูง 10.4 → แถวล่างสูงเท่าเดิม [สเปก 1.3ข D8 D9])
   ขนาดตาม φ: เลขดาว ≤ 2.618w (fitNum) · ตัวในวงกลม/กรอบ/ดาวลับ/+/@ = .618w · วงกลมกว้าง 1w · กรอบอายุ .55w */
.tk-cell{display:grid;grid-template-columns:4.6em minmax(0,1fr) 1.15em .9em 1.1em;
  grid-template-rows:repeat(6,1.3em) minmax(0,1fr);line-height:1.2;
  /* ขอบกล่อง (--tk-bw) อยู่ในระยะขอบใน → เนื้อในช่องเท่ากันทั้ง 9 กล่องและเส้นตาราง (เทียบเป็น w) */
  padding:calc(.82em - var(--tk-bw,0px)) calc(.52em - var(--tk-bw,0px)) calc(.52em - var(--tk-bw,0px))}
.tk-r1{grid-row:1}.tk-r2{grid-row:2}.tk-r3{grid-row:3}.tk-r4{grid-row:4}.tk-r5{grid-row:5}.tk-r6{grid-row:6}
.tk-w{grid-column:1;justify-self:center;align-self:center;white-space:nowrap;font-size:calc(1em * var(--tk-ws) * var(--tk-wz,1));line-height:1.2}
/* กรอบวิวาจร อจ ปจ ดจ วจ (มุมมนเล็กน้อย) */
.tk-bx{grid-column:3;align-self:center;justify-self:center;display:inline-flex;align-items:center;justify-content:center;
  padding:.16em .2em;border:max(1px,.14em) solid var(--tk-green);border-radius:.32em;color:var(--tk-green);
  font-size:.618em;font-weight:700;line-height:1.3}
/* ดาวลับ ๑*–๔* · ✱ (sT) วาดเป็น SVG ในวงแดง */
.tk-sc{grid-column:4;align-self:center;justify-self:center;color:var(--tk-mark);font-size:.618em;font-weight:700;line-height:1;white-space:nowrap}
.tk-st{grid-column:4;align-self:center;justify-self:center;display:inline-flex;align-items:center;justify-content:center;
  width:1.375em;height:1.375em;border:max(1px,.14em) solid var(--tk-mark);border-radius:50%;color:var(--tk-mark);font-size:.618em;line-height:1}
.tk-st svg{display:block;width:72%;height:72%}
/* วงกลม ป ด ว วา · ☽ (ดิถี) วาดเป็น SVG ด้านนูนขวา */
.tk-ci{grid-column:5;align-self:center;justify-self:center;display:inline-flex;align-items:center;justify-content:center;
  width:1.618em;height:1.618em;border:max(1px,.14em) solid var(--tk-ink);border-radius:50%;font-size:.618em;font-weight:700;line-height:1}
.tk-ci.tk-wa{font-size:.5em;width:2em;height:2em}
.tk-ci.tk-moon svg{display:block;width:84%;height:84%}
/* ตัวอักษรในกรอบ/วงกลม: fitInk ขยับให้หมึกจริงอยู่กลาง (ทุกฟอนต์) */
.tk-t{display:block;line-height:1;white-space:nowrap}
/* กรอบอายุ (เฉพาะผังกำเนิด / ผังที่ใส่อายุ): ช่วงอายุ อจ (แถว ๖) ตรงเหนือกรอบย่าง (แถวล่าง) ขอบซ้ายตรงกันทุกช่อง */
.tk-age{grid-column:2 / 6;justify-self:start;margin-left:.33em;display:inline-flex;align-items:center;justify-content:center;
  padding:.22em .3em;border:1px solid var(--tk-ink);border-radius:.32em;background:var(--tk-paper);font-size:.55em;line-height:1;white-space:nowrap}
.tk-age.tk-ay{grid-row:6;align-self:center}
.tk-age.tk-py{grid-row:7;align-self:end;margin-bottom:.1em}
/* @ (ยามนาที) ใต้คำสุดท้าย · fitYm (chart-fit.js) ขยับแนวนอนให้กลางหมึกคำสุดท้าย */
.tk-ym{grid-column:1;grid-row:7;justify-self:center;align-self:start;margin-top:.35em;color:var(--tk-mark);font-weight:700;font-size:.618em;line-height:1}
/* เลขดาว: ช่องกว้างคงที่ + ที่ว่างของ + เสมอ → เลขทุกช่องอยู่ที่เดิม · + เป็นตัวยกมุมขวาบน (fitNum วางตามหมึกจริง) */
.tk-numg{grid-column:3 / 6;grid-row:7;display:flex;justify-content:flex-end;align-items:flex-end}
.tk-nslot{width:2.05em;text-align:right}
.tk-num{display:block;font-size:var(--tk-num,2.618em);font-weight:700;line-height:.71}
.tk-pslot{width:1em;align-self:flex-start;text-align:left;padding-left:.1em;color:var(--tk-mark);font-weight:700;font-size:.618em;line-height:1}

/* ---------- กลางผัง ภพ | ชาติ (ข้อ 5) · สีตามวันของผัง (ข้อ 1) ---------- */
.tk-center{display:grid;grid-template-columns:1fr 1fr}
.tk-center.tk-solo{grid-template-columns:1fr}
.tk-grid>.tk-d1{background:var(--tk-d1)}.tk-grid>.tk-d2{background:var(--tk-d2)}.tk-grid>.tk-d3{background:var(--tk-d3)}.tk-grid>.tk-d4{background:var(--tk-d4)}
.tk-grid>.tk-d5{background:var(--tk-d5)}.tk-grid>.tk-d6{background:var(--tk-d6)}.tk-grid>.tk-d7{background:var(--tk-d7)}.tk-grid>.tk-d8{background:var(--tk-d8)}
.tk-half{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.2em 0;min-width:0}
.tk-half+.tk-half{border-left:1.5px solid var(--tk-split)}
html[data-grid="lines"] .tk-half+.tk-half{border-left:2px solid var(--tk-line)}
.tk-pt{color:var(--tk-blue);font-weight:700;font-size:1em;margin-bottom:.3em}
.tk-pn{display:grid;grid-template-columns:repeat(3,1.45em);text-align:center;font-size:1em;line-height:1.55}

/* อังกฤษ: คำ ๖ ชั้นในช่องผังยาวกว่าไทย → ย่อ (สเปก Phase6-F6-8) */
html[lang="en"] .tk-w{font-size:calc(1em * var(--tk-ws) * var(--tk-wz,1) * .86)}