/* Tiles — Xmodoki2の既存機能を残し、一覧を画面幅いっぱいに配置 */
:root { --main-text-color:#303735; --light-text-color:#707d77; --a-color:#4a7561; --main-bg-color:#f3f4f0; --light-bg-color:#e8ede6; --lighter-color:#e0e5de; --tile-min:320px; --tile-gap:18px; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,"Noto Sans JP",sans-serif; font-size:15px; }
.wrapper { max-width:none; margin:0; padding:26px 30px; display:flex; flex-direction:column; gap:0; container-type:normal; }
.container { width:100%; min-width:0; border:0; }
.tile-header { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 22px; margin:0 0 18px; }
.tile-header h1 { margin:0; font-size:25px; letter-spacing:.04em; }
.tile-header h1 a { color:var(--main-text-color); }
.tile-header p { margin:0; color:var(--light-text-color); font-size:13px; }
.tile-header>span { margin-left:auto; color:var(--light-text-color); font-size:11px; letter-spacing:.12em; }
.tile-nav { order:-1; width:100%; margin:0 0 20px; }
.tile-nav ul { display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.tile-nav a,.tile-nav label { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--light-text-color); font-size:13px; }
.tile-nav a:hover,.tile-nav label:hover { background:var(--light-bg-color); text-decoration:none; }
.tile-nav small { font-size:inherit; }
.tile-nav li:last-child { margin-left:auto; }
.tile-nav label[for=quickpost_toggle] { background:var(--a-color); color:white; }
.contents>label[for*=tab] { flex:0 1 auto; width:auto; margin-right:24px; }
.contents>label[for*=tab] a { padding:8px 2px 14px; font-size:13px; }
.contents>label[for*=tab]::after { width:100%!important; height:2px!important; }
body:not(.mode-gallery,.onelog) .contents label[for=tab1] a { pointer-events:auto!important; }
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tile-min)),1fr)); gap:var(--tile-gap); padding-top:22px; align-items:start; }
.tile-grid>.tile-card { display:block; min-width:0; width:100%; padding:20px; background:#fff; border:1px solid #e0e5de; border-radius:14px; box-shadow:0 3px 12px #26392b05; }
.tile-grid>.tile-card:hover { background:#fff; border-color:#bdcbbc; }
.tile-card .post_body { min-width:0; width:100%; }
.tile-card .post_info { display:flex; justify-content:space-between; gap:12px; margin:0 0 14px; font-size:11px; letter-spacing:.025em; }
.tile-card .post_info a { color:var(--light-text-color); }
.tile-id { white-space:nowrap; }
.tile-card .post_content { line-height:1.85; overflow-wrap:anywhere; min-width:0; }
.tile-card .post_content :where(img,video,iframe,audio,figure) { max-width:100%; }
.tile-card .post_content img:not(.emoji):not(.customemoji) { height:auto; border-radius:8px; }
.tile-card .post_content :where(video,iframe[src*="youtube"],iframe[src*="youtu.be"],iframe[src*="vimeo"]) { width:100%; height:auto; aspect-ratio:16/9; border:0; border-radius:8px; }
.tile-card .post_content iframe { min-width:0!important; }
.tile-card .post_content pre { max-width:100%; overflow:auto; white-space:pre; }
.tile-card .post_content table { display:block; max-width:100%; overflow:auto; }
.tile-card .post_content img.emoji { width:1.2em; height:1.2em; vertical-align:-.2em; }
.tile-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; font-size:11px; color:var(--light-text-color); }
.tile-edit { margin-left:auto; padding:3px 6px; }
@media (hover:hover) { .tile-edit { opacity:0; } .tile-card:hover .tile-edit,.tile-card:focus-within .tile-edit { opacity:1; } }
.tile-grid>.tile-card.logstatus-fixed::before { margin:0 0 12px; }
.tile-grid>.utilitylinks { grid-column:1/-1; }
body.onelog .tile-grid { display:block; max-width:900px; margin:auto; }
.gallery_container { gap:var(--tile-gap); }
.gallery_container .gallery_contents { border-radius:12px; overflow:hidden; min-width:0; }
.gallery_container .gallery_contents img { object-fit:cover; }
.page_nav { flex-wrap:wrap; gap:10px; margin-top:22px; }
body:not(.onelog) .page_nav :is(.prevlink,.nextlink) { display:block; }
.categoryTree,.hashtag,.archives,.freespace { background:white; margin-top:16px; border:1px solid var(--lighter-color); border-radius:12px; }
.tab_content .archives { flex-wrap:wrap; }
.archives .calendar { max-width:340px; }
.global_footer { font-size:11px; color:var(--light-text-color); padding:20px 30px; }
#preloader { display:none!important; }
:focus-visible { outline:2px solid var(--a-color); outline-offset:4px; }
@media(min-width:1800px) { :root { --tile-min:350px; } }
@media(max-width:700px) { .wrapper { padding:16px 12px; } :root { --tile-min:270px; --tile-gap:12px; } .tile-header h1 { font-size:21px; } .tile-header p { width:100%; order:2; } .tile-nav { margin-bottom:16px; } .tile-nav a,.tile-nav label { padding:7px; font-size:12px; } .tile-nav i { display:none; } .tile-grid>.tile-card { padding:17px; } }