<?php
$_skin_dark = (!empty($_COOKIE['vpnlink_dark']) && $_COOKIE['vpnlink_dark'] === '1');
$_dark_th_style = $_skin_dark ? ' style="background-color:#1e1e24;color:#9ca3af;"' : '';
$_dark_tbl_style = $_skin_dark ? ' style="background-color:#1e1e24;"' : '';
?><!DOCTYPE html>
<html lang="ko"<?php echo $_skin_dark ? ' data-site-theme="dark"' : ''; ?>>
<head>
<meta charset="utf-8">
<title>Dark Mode th Test</title>
<link rel="stylesheet" href="/css/default_shop.css">
<link rel="stylesheet" href="/css/apms.css">
<link rel="stylesheet" href="/thema/Basic/assets/bs3/css/bootstrap.min.css">
<link rel="stylesheet" href="/thema/Basic/colorset/Basic/colorset.css">
<link rel="stylesheet" href="/thema/Basic/colorset/Basic/darkmode.css">
<link rel="stylesheet" href="/thema/Basic/widget/basic-sidebar/widget.css">
<link rel="stylesheet" href="/css/tone-overrides.css">
<link rel="stylesheet" href="/css/level/basic.css">
<script src="/thema/Basic/assets/js/darkmode.js"></script>
<style>
body { background: #121218; color: #e4e4e7; padding: 20px; }
.result { margin: 10px 0; padding: 8px; border: 1px solid #444; }
</style>
</head>
<body>

<!-- Skin body <style> block (exact copy of relevant rules from skin file) -->
<style>
/* ── 이 페이지 전용: tr-head / btn-gray 다크모드 보정 ── */
[data-site-theme="dark"] .tr-head {
    background-color: #1e1e24 !important;
    border-color: #3a3a42 !important;
}
[data-site-theme="dark"] .tr-head > th {
    color: #9ca3af !important;
    border-color: #3a3a42 !important;
    background-color: #1e1e24 !important;
}
html[data-site-theme="dark"] .tr-head > th {
    background-color: #1e1e24 !important;
    color: #9ca3af !important;
    border-color: #3a3a42 !important;
}
html[data-site-theme="dark"] .bsk-tbl th,
html[data-site-theme="dark"] .bsk-tbl td {
    background-color: #18181e !important;
    color: #c4c4cc !important;
    border-color: #3a3a42 !important;
}
</style>

<!-- Skin IIFE (located BEFORE the table, just like in the real skin) -->
<script>
(function () {
    var ATTR = 'data-site-theme';
    function sp(el, prop, val, pri) {
        try { el.style.setProperty(prop, val, pri); } catch(e) { el.style[prop] = val; }
    }
    function applyOrderDark() {
        var isDark = (document.documentElement.getAttribute(ATTR) === 'dark');
        var pri = isDark ? 'important' : '';
        var ths = document.querySelectorAll('.tr-head > th');
        for (var i = 0; i < ths.length; i++) {
            sp(ths[i], 'background-color', isDark ? '#1e1e24' : '', pri);
            sp(ths[i], 'color',            isDark ? '#9ca3af' : '', pri);
        }
        var trs = document.querySelectorAll('.tr-head');
        for (var j = 0; j < trs.length; j++) {
            sp(trs[j], 'background-color', isDark ? '#1e1e24' : '', pri);
        }
    }
    applyOrderDark();
    document.addEventListener('DOMContentLoaded', applyOrderDark);
    if (window.MutationObserver) {
        new MutationObserver(function (ms) {
            for (var i = 0; i < ms.length; i++) {
                if (ms[i].attributeName === ATTR) { applyOrderDark(); return; }
            }
        }).observe(document.documentElement, { attributes: true });
    }
}());
</script>

<div class="result">
  Cookie vpnlink_dark = <b><?php echo htmlspecialchars(isset($_COOKIE['vpnlink_dark']) ? $_COOKIE['vpnlink_dark'] : '(not set)'); ?></b><br>
  $_skin_dark = <b><?php echo $_skin_dark ? 'TRUE' : 'FALSE'; ?></b><br>
  data-site-theme on html = <b id="theme-val">?</b>
</div>

<!-- Exact table structure from skin file -->
<table class="div-table table bsk-tbl bg-white">
<tbody>
  <tr class="tr-head border-black"<?php echo $_dark_tbl_style; ?>>
    <th scope="col"<?php echo $_dark_th_style; ?>><span>운영체제</span></th>
    <th scope="col"<?php echo $_dark_th_style; ?>><span>상품명</span></th>
    <th scope="col"<?php echo $_dark_th_style; ?>><span>상태</span></th>
  </tr>
  <tr>
    <td>Windows 10</td>
    <td>Test Product</td>
    <td>완료</td>
  </tr>
</tbody>
</table>

<div class="result" id="computed-bg">th computed background-color: <b id="th-bg">?</b></div>

<script>
document.getElementById('theme-val').textContent = document.documentElement.getAttribute('data-site-theme') || '(not set)';
document.addEventListener('DOMContentLoaded', function() {
  var th = document.querySelector('.tr-head > th');
  if (th) {
    var computed = window.getComputedStyle(th).backgroundColor;
    var inlineStyle = th.style.getPropertyValue('background-color');
    var inlinePriority = th.style.getPropertyPriority('background-color');
    document.getElementById('th-bg').textContent =
      'computed: ' + computed +
      ' | inline: ' + (inlineStyle || '(none)') +
      ' | inline priority: ' + (inlinePriority || '(none)') +
      ' | data-site-theme: ' + document.documentElement.getAttribute('data-site-theme');
    document.getElementById('computed-bg').style.background = computed;
  }
});
</script>
</body>
</html>
