:root{
  --green-deep:#0b3d2a;
  --green:#0f5a3c;
  --green-mid:#1c7a4f;
  --green-soft:#e6f0e9;
  --gold:#c9a227;
  --gold-deep:#a5811a;
  --gold-soft:#f6ecc9;
  --cream:#faf8f1;
  --white:#ffffff;
  --ink:#16241d;
  --ink-soft:#4a5a51;
  --line:#dce4dd;
  --shadow:0 6px 24px rgba(11,61,42,0.08);
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Sarabun',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
}
h1,h2,h3,h4{font-family:'Fraunces','Sarabun',serif;margin:0;}
::selection{background:var(--gold-soft);}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Header / Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--green-deep) 0%, var(--green) 55%, var(--green-mid) 100%);
  color:var(--white);
  padding:38px 5vw 28px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; right:-10%; top:-30%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,0.18), transparent 70%);
}
.hero-top{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:44px;height:44px;border-radius:10px;
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--green-deep);font-size:18px;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
  flex-shrink:0;
}
.brand-text{font-size:13px; letter-spacing:.06em; color:var(--gold-soft); opacity:.9;}
.hero h1{
  font-size:clamp(24px,3.4vw,38px);
  font-weight:700; margin-top:14px; max-width:900px;
  line-height:1.25;
}
.hero p.sub{color:#dce9df; margin-top:8px; font-size:15px; max-width:760px;}
.hero-divider{
  height:3px; width:120px; background:var(--gold); margin:18px 0 20px; border-radius:2px;
}
.stat-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px;}
.stat-chip{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px; padding:10px 16px; min-width:108px;
  backdrop-filter:blur(2px);
}
.stat-chip .num{font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:var(--gold-soft); line-height:1;}
.stat-chip .lbl{font-size:12px; color:#cfe3d5; margin-top:4px;}

/* ---------- Nav ---------- */
.tabbar{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
  display:flex; gap:4px; padding:0 5vw; overflow-x:auto;
}
.tabbar button{
  background:none;border:none; padding:14px 16px 12px;
  font-size:14.5px; font-weight:600; color:var(--ink-soft);
  border-bottom:3px solid transparent; white-space:nowrap;
  transition:.15s;
}
.tabbar button:hover{color:var(--green);}
.tabbar button.active{color:var(--green-deep); border-bottom-color:var(--gold);}

/* ---------- Layout ---------- */
.wrap{padding:28px 5vw 80px; max-width:1400px; margin:0 auto;}
.panel{display:none;}
.panel.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.section-title{display:flex; align-items:baseline; gap:10px; margin:0 0 4px;}
.section-title h2{font-size:22px; color:var(--green-deep);}
.section-title .count{font-size:13px; color:var(--gold-deep); font-weight:600; background:var(--gold-soft); padding:3px 10px; border-radius:20px;}
.section-desc{color:var(--ink-soft); font-size:14px; margin:6px 0 20px; max-width:820px;}

/* ---------- Strategy grid (overview) ---------- */
.strategy-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:18px;}
.strategy-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; cursor:pointer; transition:.18s; position:relative; overflow:hidden;
}
.strategy-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold);}
.strategy-card .idx{
  font-family:'Fraunces',serif; font-size:34px; font-weight:700; color:var(--green-soft);
  position:absolute; top:8px; right:14px; z-index:0;
}
.strategy-card h3{font-size:17px; color:var(--green-deep); position:relative; z-index:1; margin-bottom:10px; max-width:80%;}
.strategy-card .meta{display:flex; gap:10px; font-size:12.5px; color:var(--ink-soft); position:relative; z-index:1;}
.strategy-card .meta b{color:var(--gold-deep); font-weight:700;}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
.crumb button{background:none;border:none;color:var(--green); font-weight:600; padding:0; text-decoration:underline; font-size:13px;}

/* ---------- Strategy detail ---------- */
.strategy-header{
  background:linear-gradient(120deg,var(--green-soft), #fff);
  border:1px solid var(--line); border-left:5px solid var(--gold);
  border-radius:var(--radius); padding:22px 24px; margin-bottom:22px;
}
.strategy-header h2{color:var(--green-deep); font-size:24px;}
.strategy-header .en{color:var(--gold-deep); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;}
.strategy-header p{color:var(--ink-soft); font-size:14.5px; margin-top:10px; max-width:900px;}
.badge-row{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.badge{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:6px 12px; font-size:12.5px; color:var(--ink-soft);}
.badge b{color:var(--green-deep);}

.issue-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:14px; overflow:hidden;
}
.issue-head{
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; gap:12px;
}
.issue-head:hover{background:var(--cream);}
.issue-head .titleblock{display:flex; align-items:center; gap:12px;}
.issue-num{
  background:var(--green-deep); color:var(--gold-soft); font-weight:700; font-size:13px;
  border-radius:8px; padding:4px 10px; flex-shrink:0;
}
.issue-head h4{font-size:15.5px; color:var(--ink); font-weight:600;}
.issue-head .chev{transition:.2s; color:var(--gold-deep); font-size:14px;}
.issue-card.open .chev{transform:rotate(180deg);}
.issue-counts{font-size:12px; color:var(--ink-soft); white-space:nowrap;}
.issue-body{display:none; padding:0 20px 20px; border-top:1px solid var(--line);}
.issue-card.open .issue-body{display:block;}
.okr-box{background:var(--green-soft); border-radius:10px; padding:14px 16px; margin:16px 0;}
.okr-box .lbl{font-size:11.5px; font-weight:700; color:var(--green-deep); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;}
.okr-box ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink);}
.okr-box li{margin-bottom:4px;}
.goal-box{background:var(--gold-soft); border-radius:10px; padding:12px 16px; margin:0 0 16px; font-size:13.5px; color:#5c4a10;}
.goal-box .lbl{font-size:11.5px; font-weight:700; color:var(--gold-deep); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;}

/* ---------- KR table ---------- */
.kr-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px;}
table.kr{width:100%; border-collapse:collapse; font-size:13px; min-width:900px;}
table.kr th{
  background:var(--green-deep); color:var(--gold-soft); text-align:left;
  padding:10px 12px; font-weight:600; font-size:12px; white-space:nowrap;
  position:sticky; top:0;
}
table.kr td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
table.kr tr:hover td{background:var(--cream);}
table.kr td.code{font-weight:700; color:var(--green-deep); white-space:nowrap;}
table.kr td.target{white-space:nowrap; color:var(--gold-deep); font-weight:600;}
.agency-pill{
  display:inline-block; background:var(--green-soft); color:var(--green-deep);
  border:1px solid #cfe3d5; border-radius:20px; padding:2px 10px; font-size:11.5px;
  font-weight:600; cursor:pointer; margin:1px 2px 1px 0; transition:.15s;
}
.agency-pill:hover{background:var(--green); color:#fff;}
.agency-pill.r{background:var(--gold-soft); color:var(--gold-deep); border-color:#eadb9c;}
.agency-pill.r:hover{background:var(--gold); color:#fff;}
.budget-tag{font-size:11.5px; color:#7a6b1f; background:#fbf6e2; border-radius:6px; padding:2px 7px; display:inline-block; margin-top:3px;}
.proj-text{font-size:12.5px; color:var(--ink-soft); max-width:280px; display:inline-block;}
.empty-cell{color:#bcc6c0;}

/* ---------- Search ---------- */
.searchbar{
  display:flex; gap:10px; align-items:center; background:var(--white);
  border:1.5px solid var(--line); border-radius:12px; padding:10px 16px; margin-bottom:20px;
  max-width:640px;
}
.searchbar input{border:none; outline:none; font-size:14.5px; flex:1; font-family:inherit; background:none;}
.searchbar .icon{color:var(--gold-deep); font-size:16px;}

/* ---------- Filter chips ---------- */
.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.filter-chip{
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
}
.filter-chip.active{background:var(--green-deep); color:var(--gold-soft); border-color:var(--green-deep);}
.filter-chip:hover{border-color:var(--gold);}

/* ---------- Agency directory ---------- */
.agency-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;}
.agency-card{
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px;
  cursor:pointer; transition:.15s;
}
.agency-card:hover{border-color:var(--gold); box-shadow:var(--shadow);}
.agency-card .code{font-family:'Fraunces',serif; font-weight:700; font-size:19px; color:var(--green-deep);}
.agency-card .stats{display:flex; gap:14px; margin-top:10px; font-size:12px; color:var(--ink-soft);}
.agency-card .stats b{color:var(--gold-deep); font-size:15px; display:block; font-family:'Fraunces',serif;}

/* ---------- Project list ---------- */
.proj-card{
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:10px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.proj-card .p-title{font-size:14px; font-weight:600; color:var(--ink); max-width:640px;}
.proj-card .p-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.proj-card .p-right{text-align:right; min-width:140px;}
.proj-card .p-budget{font-family:'Fraunces',serif; font-weight:700; color:var(--gold-deep); font-size:15px;}
.tag{font-size:11px; background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:2px 8px; color:var(--ink-soft);}

/* ---------- Integration ---------- */
.integration-hero{
  background:linear-gradient(120deg, var(--green-deep), var(--green-mid));
  color:#fff; border-radius:var(--radius); padding:28px 30px; margin-bottom:24px; position:relative; overflow:hidden;
}
.integration-hero::before{
  content:"★"; position:absolute; right:24px; top:18px; font-size:70px; color:rgba(201,162,39,0.25);
}
.integration-hero h2{font-size:26px; color:#fff;}
.integration-hero .flag{display:inline-block; background:var(--gold); color:var(--green-deep); font-weight:700; font-size:11.5px; padding:4px 12px; border-radius:20px; margin-bottom:12px; letter-spacing:.04em;}
.int-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px;}
@media (max-width:820px){.int-grid{grid-template-columns:1fr;}}
.int-block{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.int-block h4{color:var(--green-deep); font-size:15px; margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.int-block h4::before{content:""; width:8px;height:8px;border-radius:50%;background:var(--gold);}
.int-block ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-soft);}
.int-block li{margin-bottom:8px;}
.agency-role{border-bottom:1px solid var(--line); padding:10px 0;}
.agency-role:last-child{border-bottom:none;}
.agency-role .aname{font-weight:700; color:var(--green-deep); font-size:13.5px;}
.agency-role .arole{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}

footer{text-align:center; padding:26px; font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:30px;}

.no-results{color:var(--ink-soft); font-size:14px; padding:30px; text-align:center; background:var(--white); border:1px dashed var(--line); border-radius:12px;}

@media(max-width:640px){
  .wrap{padding:20px 4vw 60px;}
  .hero{padding:28px 4vw 22px;}
  table.kr{font-size:12px;}
}
/* ---------- Additions for server-rendered PHP pages ---------- */
.pagination{display:flex; gap:6px; justify-content:center; margin:24px 0; flex-wrap:wrap;}
.pagination a, .pagination span{
  display:inline-block; padding:7px 13px; border-radius:8px; font-size:13px;
  border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;
}
.pagination a:hover{border-color:var(--gold); color:var(--green-deep);}
.pagination .current{background:var(--green-deep); color:var(--gold-soft); border-color:var(--green-deep); font-weight:700;}
.pagination .disabled{opacity:.4; pointer-events:none;}

.issue-link-card{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:12px; text-decoration:none; color:inherit; transition:.15s;
}
.issue-link-card:hover{border-color:var(--gold); box-shadow:var(--shadow);}
.issue-link-card .row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.issue-link-card h4{font-size:15.5px; margin:0;}

.tabbar a{
  background:none;border:none; padding:14px 16px 12px; text-decoration:none;
  font-size:14.5px; font-weight:600; color:var(--ink-soft); display:inline-block;
  border-bottom:3px solid transparent; white-space:nowrap;
}
.tabbar a:hover{color:var(--green);}
.tabbar a.active{color:var(--green-deep); border-bottom-color:var(--gold);}

.crumb a{color:var(--green); font-weight:600; text-decoration:underline;}

form.searchform{display:flex; gap:10px;}
form.searchform input[type=text]{
  flex:1; border:1.5px solid var(--line); border-radius:12px; padding:10px 16px; font-size:14.5px; font-family:inherit;
}
form.searchform button{
  background:var(--green-deep); color:var(--gold-soft); border:none; border-radius:12px; padding:10px 20px; font-weight:600; font-size:14px;
}
form.searchform button:hover{background:var(--green);}

.agency-select{border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-family:inherit; font-size:13.5px; background:var(--white);}

.small-note{font-size:12px; color:var(--ink-soft); margin-top:6px;}
a.plain{color:var(--green-deep); text-decoration:none; font-weight:600;}
a.plain:hover{text-decoration:underline;}