/* ===========================================================
   T-LINK 現場アプリ（フロント）— ダークUI
   モバイルファースト設計：
     ・基準はスマホ（本文16px／タップ領域52px以上／1カラム）
     ・700px以上でPC向けに調整（2カラム・余白拡大）
   入力欄は16px以上（iOS Safariの自動ズームを防ぐため）
   クラス名は従来のまま（PHP側の変更は不要）
   =========================================================== */

.tlink-app{
	color-scheme:dark;            /* ネイティブUI（selectの一覧など）をダークで描画 */
	--tl-bg:#0c111e;
	--tl-surface:rgba(255,255,255,.05);
	--tl-border:rgba(255,255,255,.11);
	--tl-border-2:rgba(120,160,235,.32);
	--tl-text:#eef3fb;
	--tl-muted:#a2b0c6;
	--tl-muted-2:#7c8899;
	--tl-accent:#22d3ee;
	--tl-accent-bg:rgba(34,211,238,.14);
	--tl-blue:#3b82f6;
	--tl-violet:#8b5cf6;
	--tl-green:#34d399;
	--tl-red:#f87171;

	width:100%; max-width:none; margin:0; padding:18px 10px 72px;
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
	font-size:17px; color:var(--tl-text); line-height:1.7; box-sizing:border-box;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:rgba(59,130,246,.18);
}
.tlink-app *{box-sizing:border-box;}
.tlink-app a{color:var(--tl-accent);}

/* ブランドバー */
.tlink-brandbar{display:flex;align-items:center;gap:10px;padding:0 0 20px;}
.tlink-brandbar svg{width:30px;height:30px;}
.tlink-brandword{font-size:19px;font-weight:300;letter-spacing:.20em;color:#fff;padding-left:.08em;}

/* 見出し */
.tlink-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
	margin-bottom:16px;flex-wrap:wrap;}
.tlink-title{font-size:25px;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.35;}
.tlink-chip{font-size:13px;color:var(--tl-muted);background:var(--tl-surface);
	border:1px solid var(--tl-border);padding:6px 13px;border-radius:20px;white-space:nowrap;}
.tlink-muted{color:var(--tl-muted);font-size:16px;margin:0 0 18px;}
.tlink-sub{font-size:14px;color:var(--tl-muted);margin:26px 0 12px;
	border-top:1px solid var(--tl-border);padding-top:18px;}
.tlink-section-label{font-size:19px;font-weight:700;color:#fff;
	margin:26px 0 10px;display:flex;align-items:center;gap:9px;}
.tlink-section-label::before{content:"";width:4px;height:18px;border-radius:2px;flex:none;
	background:linear-gradient(180deg,var(--tl-blue),var(--tl-accent));}

/* 行ボタン（店舗選択・遷移） */
.tlink-store-form{margin:0 0 12px;}
.tlink-row-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;
	text-align:left;text-decoration:none;color:var(--tl-text);
	background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
	border:1px solid var(--tl-border);border-radius:16px;
	padding:16px 18px;cursor:pointer;font-size:17px;font-family:inherit;
	transition:border-color .16s, background .16s, transform .16s;}
.tlink-row-btn:active{transform:scale(.99);}
.tlink-row-main{flex:1;font-weight:600;}
.tlink-row-arrow{color:var(--tl-muted-2);font-size:23px;line-height:1;}

/* 汎用ボタン */
.tlink-btn{display:inline-block;min-height:52px;border:1px solid var(--tl-border);
	background:var(--tl-surface);color:var(--tl-text);border-radius:12px;
	padding:14px 22px;font-size:16px;font-family:inherit;font-weight:600;
	cursor:pointer;text-decoration:none;transition:background .16s,border-color .16s;}
.tlink-btn-primary{background:linear-gradient(90deg,var(--tl-blue),var(--tl-violet));
	border-color:transparent;color:#fff;box-shadow:0 6px 22px rgba(79,110,247,.34);}
.tlink-btn-primary:active{filter:brightness(.95);}
.tlink-btn-block{display:block;width:100%;text-align:center;margin-top:18px;}

.tlink-note{border-radius:14px;padding:15px 16px;font-size:15px;margin:0 0 16px;
	border:1px solid var(--tl-border);background:var(--tl-surface);}
.tlink-note-ok{background:rgba(52,211,153,.11);border-color:rgba(52,211,153,.3);color:#7fe8c6;}

/* 出勤カード：1枚のカードを横スワイプで2面（出勤／本日やること）切替 */
.tlink-att-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:10px 0 26px;}
.tlink-att-form{margin:0;}
.tlink-att-card{position:relative;border:1px solid var(--tl-border);border-radius:20px;
	background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
	overflow:hidden;transition:border-color .16s,box-shadow .16s,opacity .16s;}
.tlink-att-card.is-off{opacity:.62;}
.tlink-att-card.is-on{opacity:1;border-color:rgba(52,211,153,.36);
	background:linear-gradient(180deg,rgba(52,211,153,.08),rgba(255,255,255,.02));
	box-shadow:0 0 0 1px rgba(52,211,153,.1), 0 8px 26px rgba(0,0,0,.35);}

/* 横スクロール＝スワイプ。1面ずつピタッと止まる */
.tlink-att-pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;}
.tlink-att-pages::-webkit-scrollbar{display:none;}
.tlink-att-page{flex:0 0 100%;width:100%;scroll-snap-align:start;padding:18px 18px 8px;
	min-width:0;}
.tlink-att-face{display:block;width:100%;text-align:left;font:inherit;color:var(--tl-text);
	background:none;border:0;padding:0;}
button.tlink-att-face{cursor:pointer;}
button.tlink-att-face:active{transform:scale(.995);}
/* タップで出勤できる面。押せることが分かるよう、うっすら反応させる */
.tlink-att-tap{border-radius:14px;transition:background .16s;}
.tlink-att-tap:active{background:rgba(59,130,246,.10);}
.tlink-att-form{margin:0;}

/* 面のインジケータ（●○）とヒント */
.tlink-att-nav{display:flex;align-items:center;gap:7px;padding:2px 18px 14px;}
.tlink-att-pill{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);
	transition:background .2s,width .2s;}
.tlink-att-pill.is-on{background:var(--tl-accent);width:20px;border-radius:4px;}
.tlink-att-hint{margin-left:auto;font-size:13px;color:var(--tl-muted-2);}

/* やること面 */
.tlink-att-todopage .tlink-todo-head{margin-bottom:12px;}
.tlink-att-todopage .tlink-todo-group{margin-bottom:12px;}
.tlink-att-top{display:flex;align-items:center;gap:14px;}
.tlink-att-av{position:relative;width:56px;height:56px;border-radius:50%;flex:none;
	display:grid;place-items:center;background:linear-gradient(135deg,#2b3550,#151b2e);
	color:#a8bcdd;font-weight:800;font-size:21px;}
.tlink-att-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.tlink-att-card.is-on .tlink-att-av{color:#d7e6ff;}
.tlink-att-dot{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;
	background:var(--tl-green);border:2.5px solid #0d1017;}
.tlink-att-id{flex:1;min-width:0;}
.tlink-att-name{font-weight:800;font-size:21px;line-height:1.3;color:#fff;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tlink-att-sub{font-size:15px;color:var(--tl-muted);margin-top:3px;}
.tlink-att-badge{flex:none;font-size:13px;font-weight:700;padding:6px 13px;border-radius:20px;
	border:1px solid rgba(52,211,153,.5);color:#5eead4;white-space:nowrap;}
.tlink-att-badge.is-ghost{border-color:rgba(150,160,180,.34);color:#a2adbf;}
.tlink-att-stats{margin-top:14px;border-top:1px solid var(--tl-border);padding-top:12px;
	display:flex;flex-direction:column;gap:10px;}
.tlink-att-stat{display:flex;justify-content:space-between;align-items:center;font-size:16px;}
.tlink-att-stat span{color:var(--tl-muted);}
.tlink-att-stat b{font-weight:800;color:#fff;font-size:16px;}

/* 出勤チェックリスト（旧UI・互換用） */
.tlink-check-list{list-style:none;margin:0 0 10px;padding:0;}
.tlink-check-item{border:1px solid var(--tl-border);border-radius:14px;
	margin-bottom:10px;background:var(--tl-surface);}
.tlink-check-item label{display:flex;align-items:center;gap:14px;padding:16px 17px;
	cursor:pointer;min-height:60px;}
.tlink-check-item input[type=checkbox]{width:24px;height:24px;flex:none;accent-color:var(--tl-blue);}
.tlink-check-name{flex:1;font-size:17px;font-weight:600;}
.tlink-check-days{font-size:15px;color:var(--tl-muted);}

/* 本日やること */
.tlink-todo{border:1px solid var(--tl-border);border-radius:16px;padding:15px 17px;
	margin-bottom:12px;background:var(--tl-surface);}
.tlink-todo-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap;}
.tlink-todo-name{font-size:17px;font-weight:700;color:#fff;}
.tlink-todo-stage{font-size:13px;color:var(--tl-muted);background:rgba(255,255,255,.06);
	border:1px solid var(--tl-border);padding:4px 12px;border-radius:20px;}
.tlink-todo-group{display:flex;gap:10px;margin-bottom:10px;}
.tlink-todo-group ul{margin:0;padding-left:0;list-style:none;flex:1;}
.tlink-todo-group li{font-size:16.5px;margin-bottom:6px;color:#dbe3ef;line-height:1.6;}
.tlink-todo-tag{font-size:12.5px;padding:4px 11px;border-radius:20px;white-space:nowrap;
	height:fit-content;background:rgba(255,255,255,.06);color:var(--tl-muted);
	border:1px solid var(--tl-border);}
.tlink-tag-koekake{background:var(--tl-accent-bg);color:#7ce9f9;border-color:rgba(34,211,238,.3);}

/* 日報入力＋当日ログ */
.tlink-report-form{margin-bottom:16px;}
.tlink-report-row{display:flex;gap:10px;margin-bottom:11px;flex-wrap:wrap;}
.tlink-report-row select,
.tlink-report-form textarea{
	background:rgba(255,255,255,.05);border:1px solid var(--tl-border);border-radius:13px;
	color:var(--tl-text);font-family:inherit;
	font-size:16px;              /* 16px未満だとiOSが自動ズームするため下げない */
	padding:14px 15px;min-height:52px;
	transition:border-color .16s,background .16s;}
.tlink-report-row select{flex:1 1 100%;}
.tlink-report-form textarea{width:100%;resize:vertical;line-height:1.65;min-height:96px;}
.tlink-report-row select:focus,
.tlink-report-form textarea:focus{outline:none;border-color:rgba(96,165,250,.6);
	background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(59,130,246,.14);}
.tlink-report-form textarea::placeholder{color:var(--tl-muted-2);}

/* プルダウンの一覧（option）はOS側描画のため明示指定 */
.tlink-app select{color-scheme:dark;
	-webkit-appearance:none;appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2b0c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 13px center;background-size:19px 19px;
	padding-right:40px;}
.tlink-app select option,
.tlink-app select optgroup{background-color:#12161f;color:#eef3fb;}
.tlink-app select option:checked{background-color:#1e3a63;color:#fff;}
.tlink-app select option[value=""]{color:#a2b0c6;}

.tlink-log{margin-top:10px;}
.tlink-log-item{border:1px solid var(--tl-border);border-radius:14px;padding:13px 15px;
	margin-bottom:9px;background:var(--tl-surface);}
.tlink-log-meta{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap;}
.tlink-log-name{font-size:15px;font-weight:700;color:#fff;}
.tlink-log-cat{font-size:12.5px;color:var(--tl-muted);background:rgba(255,255,255,.06);
	border:1px solid var(--tl-border);padding:3px 11px;border-radius:20px;}
.tlink-log-lock{font-size:12.5px;color:var(--tl-muted-2);}
.tlink-log-text{font-size:16.5px;color:#dbe3ef;line-height:1.6;}

/* 対応タスク */
.tlink-task{border:1px solid var(--tl-border);border-radius:16px;padding:15px 16px;
	margin-bottom:11px;background:var(--tl-surface);}
.tlink-task.is-urgent{border-left:4px solid var(--tl-red);
	background:linear-gradient(90deg,rgba(248,113,113,.09),var(--tl-surface));}
.tlink-task-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px;}
.tlink-task-type{font-size:12.5px;padding:4px 11px;border-radius:20px;
	background:var(--tl-accent-bg);color:#7ce9f9;border:1px solid rgba(34,211,238,.3);}
.tlink-task-urgent{font-size:12.5px;padding:4px 11px;border-radius:20px;
	background:rgba(248,113,113,.15);color:#fca5a5;border:1px solid rgba(248,113,113,.32);}
.tlink-task-who{font-size:14px;color:var(--tl-muted);}
.tlink-task-status{font-size:12.5px;color:var(--tl-muted-2);margin-left:auto;}
.tlink-task-content{font-size:16.5px;line-height:1.6;margin-bottom:12px;color:#dbe3ef;}

/* 通知 */
.tlink-notes{border:1px solid var(--tl-border);border-radius:16px;padding:15px 16px;
	margin-bottom:20px;background:linear-gradient(180deg,rgba(59,130,246,.09),rgba(255,255,255,.02));}
.tlink-notes-head{display:flex;align-items:center;justify-content:space-between;
	font-size:15px;font-weight:700;margin-bottom:9px;color:#fff;}
.tlink-notes-clear{background:none;border:none;color:var(--tl-muted);font-size:14px;
	cursor:pointer;padding:6px;font-family:inherit;}
.tlink-note-item{display:flex;align-items:center;gap:10px;font-size:15px;padding:8px 0;}
.tlink-note-tier{font-size:12.5px;padding:3px 11px;border-radius:20px;
	background:rgba(255,255,255,.06);color:var(--tl-muted);
	border:1px solid var(--tl-border);white-space:nowrap;}
.tlink-tier-urgent .tlink-note-tier{background:rgba(248,113,113,.15);color:#fca5a5;
	border-color:rgba(248,113,113,.32);}

/* 音声入力 */
.tlink-mic-row{display:flex;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap;}
#tlink-mic.is-rec{background:var(--tl-red);border-color:transparent;color:#fff;
	box-shadow:0 0 0 4px rgba(248,113,113,.2);}
#tlink-mic-status{font-size:14.5px;color:var(--tl-muted);}

.tlink-switch{margin-top:30px;text-align:center;}
.tlink-switch a{font-size:15px;color:var(--tl-muted);text-decoration:none;padding:10px;
	display:inline-block;}

/* ===== PC・タブレット（700px〜） ===== */
@media (min-width:700px){
	.tlink-app{font-size:16px;}
	.tlink-brandbar{padding-bottom:22px;}
	.tlink-title{font-size:26px;}
	.tlink-section-label{font-size:16px;margin-top:30px;}

	/* 店舗選択は2列 */
	.tlink-store-form{display:inline-block;width:calc(50% - 6px);vertical-align:top;}
	.tlink-store-form:nth-child(odd){margin-right:9px;}
	.tlink-row-btn{min-height:auto;font-size:16px;}
	.tlink-row-btn:hover{border-color:var(--tl-border-2);
		background:linear-gradient(180deg,rgba(59,130,246,.13),rgba(255,255,255,.02));
		transform:translateY(-1px);}

	/* PCは横幅を活かし、出勤カードを2列。スワイプはそのまま使える */
	.tlink-app{max-width:1100px;margin:0 auto;padding:30px 24px 72px;}
	.tlink-att-grid{grid-template-columns:1fr 1fr;gap:14px;}
	.tlink-att-name{font-size:19px;}
	.tlink-att-av{width:50px;height:50px;font-size:19px;}
	.tlink-att-card.is-off:hover{opacity:.92;border-color:var(--tl-border-2);}
	.tlink-att-hint::after{content:"（ドラッグでも切替）";opacity:.7;}

	/* 日報：区分は横並び */
	.tlink-report-row select{flex:1 1 auto;min-width:170px;}
	.tlink-report-form textarea{min-height:82px;}

	.tlink-btn{min-height:auto;padding:12px 20px;font-size:15px;}
	.tlink-btn:hover{background:rgba(59,130,246,.13);border-color:var(--tl-border-2);color:#fff;}
	.tlink-btn-primary:hover{filter:brightness(1.08);
		background:linear-gradient(90deg,var(--tl-blue),var(--tl-violet));}
	.tlink-check-item label{min-height:auto;padding:13px 15px;}
	.tlink-switch a:hover{color:#fff;text-decoration:underline;}
	.tlink-notes-clear:hover{color:#fff;}
}

/* ===== 小さめのスマホ（〜360px） ===== */
@media (max-width:360px){
	.tlink-app{padding:18px 13px 64px;}
	.tlink-title{font-size:21px;}
	.tlink-att-name{font-size:18px;}
	.tlink-att-av{width:50px;height:50px;font-size:19px;}
}

@media (prefers-reduced-motion:reduce){
	.tlink-app *{transition:none !important;}
}

/* 解放メニュー／デビュー進捗（やること面） */
.tlink-menu-open{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
	border:1px solid rgba(34,211,238,.3);background:rgba(34,211,238,.09);
	border-radius:13px;padding:11px 14px;margin-bottom:13px;}
.tlink-menu-label{font-size:12.5px;font-weight:700;color:#7ce9f9;white-space:nowrap;}
.tlink-menu-name{font-size:16px;font-weight:700;color:#fff;}
.tlink-menu-name em{font-style:normal;font-size:13.5px;color:var(--tl-muted);margin-left:7px;}
.tlink-debut{margin-bottom:14px;}
.tlink-debut-top{display:flex;justify-content:space-between;align-items:baseline;
	font-size:13.5px;color:var(--tl-muted);margin-bottom:6px;}
.tlink-debut-top b{color:#fff;font-size:14px;}
.tlink-debut-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;}
.tlink-debut-bar i{display:block;height:100%;border-radius:5px;
	background:linear-gradient(90deg,var(--tl-blue),var(--tl-violet));}
/* 区分タグの色分け（7種） */
.tlink-tag-practice{background:rgba(59,130,246,.16);color:#93c5fd;border-color:rgba(59,130,246,.3);}
.tlink-tag-prep{background:rgba(139,92,246,.16);color:#c4b5fd;border-color:rgba(139,92,246,.3);}
.tlink-tag-spare{background:rgba(148,163,184,.14);color:#cbd5e1;border-color:rgba(148,163,184,.3);}
.tlink-tag-check{background:rgba(52,211,153,.14);color:#6ee7c0;border-color:rgba(52,211,153,.3);}
.tlink-tag-mindset{background:rgba(251,191,36,.14);color:#fcd34d;border-color:rgba(251,191,36,.3);}
.tlink-tag-conduct{background:rgba(248,113,113,.13);color:#fca5a5;border-color:rgba(248,113,113,.28);}