/* ===== หน้าเอกสารกฎหมาย #/legal/:doc — prefix .lg2- (กันชนกับ .lg- ของหน้า lounge) =====
   ธีมมืด (พื้นน้ำเงินกรมท่าของ base.css) + การ์ดกระจก อ่านยาว ๆ สบายตา */

.lg2-page{display:flex;flex-direction:column;gap:12px;padding:0 14px 26px;min-width:0}

/* --- แถบบน: ย้อนกลับ / ชื่อเอกสาร / แชร์ --- */
.lg2-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  margin:0 -14px;padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(10,26,52,.72);border-bottom:1px solid var(--glass-brd);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lg2-bar-title{flex:1;min-width:0;text-align:center;font-size:15px;font-weight:700;color:var(--ink)}
.lg2-icon{width:36px;height:36px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:var(--glass);border:1px solid var(--glass-brd);transition:transform .12s, background .15s}
.lg2-icon svg{width:18px;height:18px}
.lg2-icon:active{transform:scale(.92)}
.lg2-icon:hover{background:var(--glass-2)}
.lg2-icon-ghost{background:none;border-color:transparent;pointer-events:none}

/* --- การ์ดหัวเรื่อง --- */
.lg2-hero{padding:20px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.lg2-hero-ico{width:46px;height:46px;border-radius:15px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#04223f;
  background:var(--grad-cta);box-shadow:0 6px 20px rgba(47,139,255,.4)}
.lg2-hero-ico svg{width:23px;height:23px}
.lg2-hero-title{font-size:21px;font-weight:800;line-height:1.32;letter-spacing:.2px;color:var(--ink)}
.lg2-hero-sub{font-size:13.5px;line-height:1.65;color:var(--ink-dim)}
.lg2-date{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;color:var(--accent-2);
  background:rgba(87,230,168,.14);border:1px solid rgba(87,230,168,.4)}
.lg2-lead{font-size:14px;line-height:1.8;color:var(--ink-dim);margin-top:2px}

/* --- สารบัญ --- */
.lg2-toc{padding:15px 16px}
.lg2-toc-h{display:block;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:9px}
.lg2-toc-list{list-style:none;display:flex;flex-direction:column;gap:1px}
.lg2-toc-list li{min-width:0}
.lg2-toc-list button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13px;line-height:1.5;color:var(--ink-dim);transition:background .15s, color .15s}
.lg2-toc-list button:hover{background:var(--glass);color:var(--ink)}
.lg2-toc-list button:active{background:var(--glass-2)}

/* --- ส่วนเนื้อหา --- */
.lg2-doc{display:flex;flex-direction:column;gap:12px;min-width:0}
.lg2-sec{padding:17px 17px 19px;scroll-margin-top:74px;min-width:0}
.lg2-h2{font-size:16px;font-weight:800;line-height:1.45;color:var(--ink);margin-bottom:10px;
  padding-bottom:9px;border-bottom:1px solid var(--glass-brd)}
.lg2-h3{font-size:13.5px;font-weight:700;color:var(--accent-2);margin:14px 0 6px}
.lg2-h3:first-of-type{margin-top:8px}
.lg2-p{font-size:14px;line-height:1.85;color:var(--ink-dim);margin-bottom:10px}
.lg2-p:last-child{margin-bottom:0}
.lg2-sec strong{color:var(--ink);font-weight:700}

.lg2-ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0 12px}
.lg2-ul:last-child{margin-bottom:0}
.lg2-ul li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.75;color:var(--ink-dim);
  overflow-wrap:anywhere}
.lg2-ul li::before{content:'';position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:0 0 8px rgba(87,230,168,.5)}

/* --- ลิงก์ไปเอกสารอื่น --- */
.lg2-other{padding:4px 2px 0;display:flex;flex-direction:column;gap:9px}
.lg2-other-h{font-size:12px;font-weight:700;color:var(--ink-faint)}
.lg2-other-row{display:flex;flex-wrap:wrap;gap:8px}
.lg2-other-row .chip{color:var(--ink)}
.lg2-other-row .chip:active{transform:scale(.95)}

/* --- เมนูรวม 3 เอกสาร --- */
.lg2-menu{display:flex;flex-direction:column;gap:10px}
.lg2-menu-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 15px;color:var(--ink);transition:transform .12s, border-color .15s}
.lg2-menu-item:hover{border-color:var(--glass-brd-hi)}
.lg2-menu-item:active{transform:scale(.985)}
.lg2-menu-ico{width:38px;height:38px;flex:none;border-radius:13px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#2f8bff);box-shadow:0 4px 14px rgba(47,139,255,.35)}
.lg2-menu-ico svg{width:19px;height:19px}
.lg2-menu-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lg2-menu-title{font-size:14.5px;font-weight:700}
.lg2-menu-sub{font-size:11.5px;line-height:1.55;color:var(--ink-dim)}
.lg2-menu-chev{flex:none;display:flex;color:var(--ink-faint)}
.lg2-menu-chev svg{width:16px;height:16px}

/* --- ท้ายหน้า / ว่าง --- */
.lg2-foot{padding:14px 4px 0;text-align:center;font-size:11.5px;line-height:1.9;color:var(--ink-faint)}
.lg2-foot a{color:var(--accent-2);overflow-wrap:anywhere}
.lg2-empty{padding:34px 18px;text-align:center;font-size:14px;color:var(--ink-dim)}

/* --- จอแคบ ~360px: บีบระยะไม่ให้ล้น --- */
@media (max-width:379px){
  .lg2-page{padding:0 10px 22px}
  .lg2-bar{margin:0 -10px;padding-left:10px;padding-right:10px}
  .lg2-bar-title{font-size:14px}
  .lg2-hero{padding:17px 15px}
  .lg2-hero-title{font-size:19px}
  .lg2-sec{padding:15px 14px 17px}
  .lg2-h2{font-size:15px}
  .lg2-p,.lg2-lead{font-size:13.5px}
  .lg2-ul li{font-size:13px;padding-left:16px}
  .lg2-menu-item{padding:12px 12px;gap:11px}
}

/* ===== แผ่นลิงก์ (fallback ของปุ่มแชร์เมื่อ share/clipboard ใช้ไม่ได้) ===== */
.lg2-sheet-bg{position:fixed;inset:0;z-index:100;background:rgba(4,12,28,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:lg2Fade .25s ease}
@keyframes lg2Fade{from{opacity:0}to{opacity:1}}
.lg2-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:101;
  width:min(480px,100%);max-height:80dvh;overflow-y:auto;color:var(--ink);
  background:var(--glass);border:1px solid var(--glass-brd);border-bottom:none;
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-radius:26px 26px 0 0;padding:12px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 60px rgba(3,10,26,.55);
  animation:lg2Up .34s cubic-bezier(.32,.72,.22,1)}
@keyframes lg2Up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.lg2-sheet.closing{animation:lg2Down .2s ease forwards}
.lg2-sheet-bg.closing{animation:lg2FadeOut .2s ease forwards}
@keyframes lg2Down{to{transform:translate(-50%,100%)}}
@keyframes lg2FadeOut{to{opacity:0}}
.lg2-sheet .grab{width:40px;height:6px;border-radius:3px;background:rgba(148,178,214,.28);
  margin:0 auto 14px}
.lg2-sheet-h{font-size:16px;font-weight:700;margin-bottom:14px}
.lg2-link{width:100%;font-size:13px;overflow-wrap:anywhere}
.lg2-sheet-note{margin-top:10px;font-size:11.5px;line-height:1.7;color:var(--ink-dim)}
.lg2-sheet-cancel{display:block;width:100%;text-align:center;padding:13px;margin-top:12px;
  font-size:14px;color:var(--ink-dim)}