/* REDTUNE_FILE_CHARTER_v1
 * PLANE: Frontend
 * ROLE: Thumbnail discovery presentation
 * RESPONSIBILITY: Provides responsive gallery, filters and design details.
 * SIDE_EFFECTS: None; tg-prefixed scope only.
 * END_REDTUNE_FILE_CHARTER_v1 */
#main.tg-page { --tg-blue:#2478ad; --tg-ink:#262824; --tg-muted:#767b79; --tg-line:#e3e7e6; --rt-font-serif:"Redtune Noto Serif JP","Noto Serif JP","Hiragino Mincho ProN",serif; width:min(var(--rt-page),calc(100% - var(--rt-gutter) * 2)); margin:0 auto; padding-block:clamp(28px,4vw,56px) clamp(80px,9vw,132px); color:var(--tg-ink); }
.tg-page *, .tg-page *::before, .tg-page *::after { box-sizing:border-box; }
.tg-page a { color:inherit; text-decoration:none; }
.tg-heading { padding:20px 0 28px; margin:0 0 36px; border-bottom:1px solid var(--tg-line); }
.tg-heading>p { margin:0 0 14px; font-size:11px; letter-spacing:.16em; color:var(--tg-blue); }
.tg-heading h1 { font:700 clamp(32px,3.6vw,44px)/1.4 var(--rt-font-serif); margin:0; letter-spacing:-.025em; }
.tg-workspace { --tg-sidebar:228px; --tg-column-gap:40px; display:grid; grid-template-columns:var(--tg-sidebar) minmax(0,1fr); column-gap:var(--tg-column-gap); row-gap:28px; }
.tg-filters { min-width:0; margin:0; }
.tg-filter-panel>summary { display:none; }
.tg-filter-panel>summary>span[aria-hidden] { display:none; }
.tg-page button { font:inherit; cursor:pointer; }
.tg-label { display:block; font-size:13px; font-weight:500; margin-bottom:8px; }
.tg-page select { appearance:none; width:100%; border:1px solid var(--tg-line); border-radius:12px; padding:12px 36px 12px 14px; color:var(--tg-ink); font:400 14px/1.5 var(--rt-font-sans,sans-serif); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23767b79' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center/16px no-repeat; cursor:pointer; }
.tg-color-group { margin-top:24px; border-top:1px solid var(--tg-line); }
.tg-colors { border:0; min-width:0; margin:0; padding:20px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 8px; }
.tg-color-option { display:flex; align-items:center; flex-direction:column; gap:6px; position:relative; cursor:pointer; font-size:10px; color:var(--tg-muted); min-height:48px; }
.tg-color-option input { appearance:none; width:28px; height:28px; margin:0; border-radius:50%; border:1px solid rgb(0 0 0/8%); background:var(--swatch); cursor:pointer; transition:box-shadow 160ms ease; }
.tg-color-option input:checked { box-shadow:0 0 0 3px #fff,0 0 0 5px var(--tg-blue); }
.tg-filter-group { padding:18px 0; border-bottom:1px solid var(--tg-line); }
.tg-filter-group summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:flex-start; gap:12px; text-align:left; font-size:13px; font-weight:500; }
.tg-filter-group summary::-webkit-details-marker { display:none; }
.tg-filter-group>div { display:flex; flex-wrap:wrap; gap:8px; padding-top:16px; }
.tg-option { position:relative; cursor:pointer; }
.tg-option input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.tg-option span { display:block; border:1px solid var(--tg-line); border-radius:8px; padding:8px 10px; color:#656c69; font-size:12px; transition:background 160ms ease,color 160ms ease,border-color 160ms ease; }
.tg-option input:checked+span { background:#edf5fb; border-color:#8eb6d0; color:#1e6087; }
.tg-page :is(a,button,input,select,summary):focus-visible { outline:2px solid var(--tg-blue); outline-offset:4px; }
.tg-option input:focus-visible+span { outline:2px solid var(--tg-blue); outline-offset:3px; }
.tg-results { min-width:0; }
.tg-toolbar { grid-column:1/-1; display:grid; grid-template-columns:var(--tg-sidebar) minmax(0,1fr) var(--tg-sidebar); align-items:end; gap:var(--tg-column-gap); }
.tg-page .tg-clear { justify-self:start; height:48px; border:0; padding:0; background:transparent; color:var(--tg-blue); font-size:13px; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#b7cbd7; }
.tg-search { min-width:0; height:48px; display:flex; align-items:center; gap:12px; border:1px solid var(--tg-line); border-radius:999px; padding:12px 18px; background:#fff; transition:border-color 160ms ease,box-shadow 160ms ease; }
.tg-search:focus-within { border-color:#8ab5d0; box-shadow:0 0 0 3px #eef5fa; }
.tg-search svg { width:21px; height:21px; flex-shrink:0; fill:none; stroke:#626a68; stroke-width:1.7; }
body[data-rt-design="approved"] .tg-search input { appearance:none; width:100%; min-width:0; min-height:0; height:auto; padding:0; margin:0; border:0; border-radius:0; box-shadow:none; background:none; outline:0; font:400 14px/1.6 var(--rt-font-sans,sans-serif); color:var(--tg-ink); }
.tg-search input::placeholder { color:#8b918e; }
.tg-sort { min-width:0; font-size:13px; color:var(--tg-muted); }
.tg-sort :is(select,.rt-select) { margin-top:8px; }
.tg-page .rt-select { font:400 14px/1.5 var(--rt-font-sans,sans-serif); color:var(--tg-ink); }
.tg-page :is(select,.rt-select-button) { height:48px; border-radius:12px; }
.tg-page .rt-select-menu { width:100%; }
.tg-result-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin:28px 0 20px; }
#tg-result-count { font-size:11px; color:var(--tg-muted); letter-spacing:.05em; margin:0; }
#tg-selected { display:flex; flex-wrap:wrap; gap:6px; }
#tg-selected button { border:0; border-radius:6px; background:#edf5fb; color:#24648a; padding:6px 8px; font-size:11px; }
.tg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; row-gap:36px; }
.tg-card { min-width:0; }
.tg-image { display:block; border-radius:10px; overflow:hidden; background:#f2f4f5; aspect-ratio:16/9; }
.tg-image img { display:block; width:100%; height:100%; object-fit:contain; }
.tg-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:14px 0 10px; }
.tg-design-link { color:var(--tg-blue)!important; font-size:11px; white-space:nowrap; }
.tg-design-link span { padding-left:3px; }
.tg-card h2 { font:500 13px/1.7 var(--rt-font-sans,sans-serif); height:3.4em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 12px; }
.tg-card h2 a:hover { color:var(--tg-blue); }
.tg-channel { display:flex; align-items:center; gap:8px; color:var(--tg-muted)!important; font-size:11px; overflow-wrap:anywhere; }
.tg-channel img { border-radius:50%; flex-shrink:0; }
.tg-mini-palette { display:flex; gap:5px; }
.tg-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--tg-line); border-radius:8px; font-size:12px; margin:0 6px 8px 0; }
.tg-chip:hover { border-color:#91b5cd; background:#f6fafd; }
.tg-swatch::before { content:''; display:inline-block; width:18px; height:18px; border-radius:50%; border:1px solid rgb(0 0 0/8%); background:var(--swatch); flex-shrink:0; }
.tg-mini-palette .tg-chip { width:22px; height:26px; padding:0; border:0; margin:0; font-size:0; }
.tg-mini-palette .tg-chip::before { width:15px; height:15px; }
.tg-empty { text-align:center; padding:80px 20px; border:1px dashed var(--tg-line); border-radius:16px; margin-top:24px; }
.tg-empty>span { font-size:42px; color:#85a9c0; }
.tg-empty h2 { font-size:17px; font-weight:400; margin:18px 0; }
.tg-empty button { border:1px solid var(--tg-line); border-radius:999px; background:#fff; padding:12px 20px; color:var(--tg-blue); }
.tg-pagination { margin-top:48px; }
.tg-page [hidden] { display:none!important; }
.tg-detail-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:56px; }
.tg-detail .tg-heading { max-width:1120px; }
.tg-detail .tg-heading h1 { font-size:clamp(26px,3vw,38px); }
.tg-hero { border-radius:16px; }
.tg-video-link { display:flex; justify-content:space-between; align-items:center; color:var(--tg-blue)!important; font-size:14px; padding:20px 0; margin-bottom:20px; border-bottom:1px solid var(--tg-line); }
.tg-detail .tg-channel { font-size:14px; }
.tg-analysis h2 { font:700 24px/1.6 var(--rt-font-serif); margin:0 0 20px; }
.tg-analysis p { color:#626b67; font-size:14px; line-height:1.9; }
.tg-analysis dl { margin:28px 0; }
.tg-analysis dl>div { border-top:1px solid var(--tg-line); padding:20px 0 12px; }
.tg-analysis dt { font-size:12px; color:var(--tg-muted); margin-bottom:12px; }
.tg-analysis dd { margin:0; }
.tg-analysis .tg-credit { font-size:11px; color:#929996; margin-top:28px; }
@media(min-width:1500px) { .tg-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1100px) { .tg-workspace { --tg-sidebar:200px; --tg-column-gap:28px; } .tg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tg-detail-layout { gap:32px; } }
@media(max-width:760px) { .tg-heading { margin-bottom:24px; } .tg-workspace,.tg-detail-layout { grid-template-columns:1fr; gap:24px; } .tg-filter-panel>summary { display:flex; padding:14px 18px; list-style:none; cursor:pointer; border:1px solid var(--tg-line); border-radius:12px; font-size:14px; } .tg-filter-panel>summary::-webkit-details-marker { display:none; } .tg-filter-content { border:1px solid var(--tg-line); border-radius:12px; padding:20px; margin-top:12px; } .tg-toolbar { grid-template-columns:minmax(0,1fr) 180px; gap:12px; } .tg-search { grid-column:1/-1; grid-row:1; } .tg-clear { grid-column:1; grid-row:2; } .tg-sort { grid-column:2; grid-row:2; } .tg-grid { gap:28px 14px; } .tg-card h2 { font-size:12px; } .tg-mini-palette { gap:2px; } .tg-mini-palette .tg-chip { width:14px; } .tg-mini-palette .tg-chip::before { width:12px; height:12px; } .tg-card-meta { gap:4px; } .tg-design-link { font-size:10px; } .tg-detail .tg-heading { margin-bottom:24px; } }
@media(max-width:380px) { .tg-mini-palette .tg-chip:nth-child(3) { display:none; } }
@media(prefers-reduced-motion:reduce) { .tg-page * { transition:none!important; } }

.tg-design-link { display:inline-flex; align-items:center; min-height:26px; }
@media(max-width:600px) { .tg-mini-palette .tg-chip { width:24px; min-height:26px; justify-content:center; } .tg-mini-palette .tg-chip:nth-child(3) { display:none; } }