/*
Theme Name: Timecard Kiosk
Theme URI: https://example.com/
Author: Wait+
Description: シンプル勤怠タイムカード専用のキオスクテーマ。教室のタブレットでの打刻に最適化した、クリーム×グリーンの温かいデザイン。プラグイン「シンプル勤怠タイムカード」と併用してください。
Version: 1.9.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0+
Text Domain: timecard-kiosk
*/

:root{
  /* ===== ブランドカラー(Wait+に合わせる場合はここを変更) ===== */
  --bg:#f6f3ec;            /* 背景クリーム */
  --paper:#fffdf8;         /* カード */
  --ink:#2b2a26;           /* 文字 */
  --muted:#8a8578;         /* 補助文字 */
  --line:#e6e0d2;          /* 罫線 */
  --green:#1f7a4d;         /* 出勤 */
  --green-soft:#e3f2e9;
  --red:#c2452d;           /* 退勤 */
  --red-soft:#fbe9e4;
  --amber:#f5edd6;         /* 合計/強調 */
  --accent:#0f4c5c;        /* 見出しアクセント */
  --radius:14px;
  --shadow:0 2px 6px rgba(43,42,38,.06),0 12px 28px rgba(43,42,38,.07);
  --font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  background-image:radial-gradient(rgba(43,42,38,.045) 1px,transparent 1px);
  background-size:22px 22px;
  min-height:100vh;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
img{max-width:100%;height:auto}

/* ===== ヘッダー ===== */
.tk-header{
  background:transparent;color:var(--accent);
  border:none;border-radius:0;
  padding:10px 16px;
  width:calc(100% - 32px);max-width:640px;margin:12px auto 2px;
  box-sizing:border-box;
  display:flex;justify-content:space-between;align-items:center;
  box-shadow:none;
}
.tk-header .brand{
  display:flex;align-items:center;gap:.7em;
  font-weight:900;letter-spacing:.04em;font-size:1.05rem;
  color:var(--accent);text-decoration:none;
}
.tk-header .brand img{width:32px;height:32px;border-radius:8px}
.tk-header .brand small{font-weight:500;opacity:.7}
.tk-header .tk-co{
  font-weight:700;font-size:1rem;letter-spacing:.02em;color:var(--accent);
}
.tk-header .tk-clock{
  font-family:var(--mono);font-size:.95rem;font-weight:600;
  font-variant-numeric:tabular-nums;opacity:.9;
}
/* 三本線メニュー / 会社名 */
.tk-menu-btn{
  background:none;border:2px solid var(--accent);border-radius:7px;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:8px;
}
.tk-menu-btn span{display:block;height:3px;width:100%;background:var(--accent);border-radius:2px;}
.tk-coname{
  text-align:center;font-weight:800;color:var(--accent);
  font-size:1.15rem;letter-spacing:.02em;margin:10px 16px 0;
}
.tk-menu{
  position:absolute;top:64px;z-index:200;
  right:max(16px, calc((100% - 640px) / 2 + 16px)); /* コンテンツ(640px)の右端に合わせる */
  width:min(260px, calc(100% - 32px));
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:14px;padding:8px;box-shadow:0 10px 28px rgba(0,0,0,.2);
}
@media(min-width:768px){ .tk-menu{top:84px;} }
.tk-menu-list{list-style:none;margin:0;padding:0;}
.tk-menu-list li{margin:0;}
.tk-menu-list a{
  display:block;padding:.75em 1em;color:var(--accent);
  text-decoration:none;border-radius:9px;font-weight:700;
}
.tk-menu-list a:hover{background:#efeadd;}
body.admin-bar .tk-menu{top:92px;}

/* ===== メイン ===== */
.tk-main{
  max-width:640px;margin:0 auto;padding:28px 16px 64px;
}

/* 収まらないテキストは語句・(   )の切れ目で折り返す(スマホ対策) */
.tk-main,.stc-kiosk,.stc-mgr,.tk-card,.tk-header .tk-co{
  overflow-wrap:anywhere;line-break:strict;
}
.tk-main,.stc-kiosk,.stc-mgr{
  word-break:normal;word-break:auto-phrase; /* 対応ブラウザは文節で改行 */
}
.tk-card{
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow);
  padding:26px 22px;animation:tk-rise .4s ease both;
}
@keyframes tk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tk-bigclock{
  font-family:var(--mono);font-size:2.6rem;font-weight:600;text-align:center;
  letter-spacing:.04em;margin:4px 0 2px;font-variant-numeric:tabular-nums;
}
.tk-bigdate{
  font-family:var(--mono);font-size:1.72rem;font-weight:700;text-align:center;
  letter-spacing:.04em;color:var(--green);margin:0 0 14px;
}

/* ===== プラグイン側の補正(.stc-kiosk) ===== */
.stc-kiosk{max-width:100%!important}
.stc-kiosk a{transition:.15s}
.stc-kiosk a:hover{border-color:var(--accent)!important}
.stc-kiosk button{font-family:var(--font);transition:transform .12s}
.stc-kiosk button:active{transform:scale(.985)}
.stc-kiosk table{font-variant-numeric:tabular-nums}
.stc-kiosk input,.stc-kiosk select{font-family:var(--font)}
.stc-kiosk details summary{outline:none}

/* ===== フッター ===== */
.tk-footer{
  text-align:center;font-size:.75rem;color:var(--muted);
  padding:20px 16px 36px;
}

/* ===== 汎用記事(打刻以外のページ用 最低限) ===== */
.tk-main h1,.tk-main h2{font-weight:900;line-height:1.4;margin:1em 0 .5em}
.tk-main h1{font-size:1.4rem}
.tk-main h2{font-size:1.15rem}
.tk-main h2::before{content:"●";color:var(--green);font-size:.6em;vertical-align:middle;margin-right:.6em}
.tk-main p{margin:.7em 0}
.tk-main ul,.tk-main ol{padding-left:1.4em;margin:.7em 0}

@media(max-width:480px){
  .tk-bigclock{font-size:2.1rem}
  .tk-card{padding:20px 14px}
  .tk-header .tk-clock{display:none}
}

/* PCではヘッダーを大きく(枠なし) */
@media(min-width:768px){
  .tk-header{max-width:640px;padding:14px 16px;margin-top:18px;}
  .tk-header .brand{font-size:1.7rem;gap:.55em;}
  .tk-header .brand img{width:48px;height:48px;border-radius:11px;}
  .tk-menu-btn{width:50px;height:50px;padding:11px;border-radius:9px;}
  .tk-menu-btn span{height:4px;}
}