/* --- Root Variables --- */
:root {
  --fz-l2: clamp(2.4rem, 5vw, 3.2rem);
  --fw-l2: 550;
  --fz-card-title: 1.65rem;
  --fw-card-title: 600;
  --fz-modal-title: 2.0rem;
  --fw-modal-title: 600;
  --fz-lead: 1.25rem;
  --fw-lead: 400;
  --fz-body: 1.5rem;
  --fw-body: 400;
  --apple-red: #cf3a3a;
  --apple-red-strong: #a82626;
  --apple-green: #2aa85c;
  --apple-brown: #5b3a1e;
  --ink-dark: #1b1b1b;
  --ink-light: #495057;
  --border: #e7d3c8;
  --radius: 14px;
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  --font-article: "筑須A丸ゴシック Std M", "Tsukushi A Maru Gothic Std", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --ig: #E4405F;
  --fb: #1877F2;
  --x: #000000;
  --line: #06C755;
  --tt: #010101;
  --web: #5b667a;
  --ec: #0ea5e9;
  --table-head-bg: #fff3f2;
  --table-head-fg: #a82626;
  --table-cell-bg: #ffffff;
  --table-row-gap: 6px;
  --table-cell-pad: 10px 12px;
  --fz-l3: 1.85rem;
  --loading-h: clamp(220px, 38vh, 360px);
}


/* --- Base Styles --- */
.lz-section, .lz-nav, .lz-backdrop, .lz-modal {
  font-family: var(--font-base);
  font-weight: var(--fw-body);
  font-size: var(--fz-body);
  color: var(--ink-dark);
}

.lz-lead, .lz-lead-strong, .lz-txt {
  font-family: var(--font-article);
}

/* --- L2 Title --- */
.lz-head { margin: 0 0 16px; padding: 0; }
.lz-titlewrap {
  display: block; width: 100%; background: var(--apple-red); color: #fff; border-radius: var(--radius);
  padding: 14px 16px; box-sizing: border-box;
}
.lz-title { margin: 0; font-weight: var(--fw-l2); font-size: var(--fz-l2); letter-spacing: .02em; white-space: nowrap; }

/* --- Peraichi Header Patch --- */
.pera1-header .logo, .pera1-header .site-title, .pera1-header [class*="logo"] {
  white-space: nowrap;
}

/* --- L3 Heading --- */
.lz-l3head { display: flex; align-items: center; gap: .55em; margin: 18px 2px 10px; }
.lz-l3bar { width: 10px; height: 1.4em; background: var(--apple-brown); border: none; border-radius: 3px; flex: 0 0 auto; }
.lz-l3title { margin: 0; font-weight: 600; font-size: var(--fz-l3); color: var(--apple-brown); line-height: 1.25; }

/* --- Section & Track --- */
.lz-section { visibility: hidden; margin: 32px 0; contain: content; }
.lz-section.lz-ready { visibility: visible; }
.lz-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cw, 33.33%); gap: 12px; overflow: auto; padding: 2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lz-track::-webkit-scrollbar { display: none; }

/* --- Card --- */
.lz-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; scroll-snap-align: start; cursor: pointer; background: #fff; transition: transform .08s ease, border-color .08s ease; }
.lz-card:hover { transform: translateY(-1px); border-color: #dba5a5; }
.lz-media { position: relative; background: #f6f7f9; }
.lz-media::before { content: ""; display: block; padding-top: var(--ratio, 56.25%); }
.lz-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lz-media.is-empty::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(45%, 220px); aspect-ratio: 1/1;
  background-image: url('https://s3-ap-northeast-1.amazonaws.com/s3.peraichi.com/userData/cadd36d5-015f-4440-aa3c-b426c32c22a0/img/8ca4e300-96ba-013e-36ff-0a58a9feac02/%E3%82%8A%E3%82%93%E3%81%93%E3%82%99%E3%83%AD%E3%82%B3%E3%82%99_%E8%B5%A4.png');
  background-position: center; background-repeat: no-repeat; background-size: contain; opacity: .2;
}

.lz-body { padding: 10px; display: grid; gap: 6px; }
.lz-title-sm { margin: 0; font-weight: var(--fw-card-title); font-size: var(--fz-card-title); color: var(--apple-brown); }
.lz-lead { font-weight: var(--fw-lead); font-size: var(--fz-lead); line-height: 1.6; color: var(--ink-light); min-height: 2.2em; }

/* --- Loading --- */
.lz-loading { position: relative; display: flex; align-items: center; justify-content: center; height: var(--loading-h); margin: 8px 0 4px; border: 1px dashed var(--border); border-radius: 12px; background: #fffaf8; }
.lz-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #a94a4a; }
.lz-loading .lz-loading-label { font-weight: 550; letter-spacing: .02em; }
.lz-logo { width: 160px; height: 160px; }
.lz-logo-path { fill: none; stroke: #cf3a3a; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: lz-draw 2.4s ease-in-out infinite alternate; }
@keyframes lz-draw { from { stroke-dashoffset: 1000; opacity: .8; } to { stroke-dashoffset: 0; opacity: 1; } }
.lz-loading .lz-logo { margin-left: -70px; }

/* --- Modal --- */
.lz-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: none; align-items: center; justify-content: center; z-index: 9999; }
.lz-backdrop.open { display: flex; }
.lz-shell { position: relative; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.lz-modal { position: relative; width: min(860px, 92vw); max-height: 88vh; overflow: auto; background: #fff; border: 2px solid var(--apple-red); border-radius: 12px; }
@media(max-width:768px) { .lz-modal { max-height: 82svh; } }

.lz-mh { background: #fff; border-bottom: 1px solid var(--border); padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; position: sticky; top: 0; z-index: 1; }
.lz-mt { margin: 0; font-weight: var(--fw-modal-title); font-size: var(--fz-modal-title); color: var(--apple-red-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-actions { display: flex; gap: 8px; align-items: center; }
.lz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--apple-red); background: #fff; border-radius: 999px; padding: .42em .8em; cursor: pointer; color: var(--apple-red); font-weight: 500; line-height: 1; transition: .15s; }
.lz-btn:hover { background: var(--apple-red); color: #fff; }
.lz-btn svg { width: 18px; height: 18px; }
.lz-btn .lz-label { display: inline; }
@media (max-width:768px) { .lz-btn { width: 36px; height: 36px; padding: 0; } .lz-btn .lz-label { display: none; } .lz-btn svg { width: 16px; height: 16px; } .lz-mh { padding: 8px; } }

.lz-mm { position: relative; background: #faf7f5; overflow: hidden; }
.lz-mm::before { content: ""; display: block; padding-top: 56.25%; }
.lz-mm > img { position: absolute; inset: 0; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; transition: opacity .22s ease; opacity: 1; }
.lz-mm > img.lz-fadeout { opacity: 0; }

.lz-info { margin: 12px 12px 0; width: calc(100% - 24px); border-collapse: separate; border-spacing: 0 var(--table-row-gap); }
.lz-info th, .lz-info td { padding: var(--table-cell-pad); vertical-align: top; }
.lz-info th { width: 9em; font-weight: 600; color: var(--table-head-fg); background: var(--table-head-bg); text-align: left; border-right: 1px solid #f0e2de; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.lz-info td { background: var(--table-cell-bg); color: var(--ink-dark); border-top-right-radius: 8px; border-bottom-right-radius: 8px; word-break: break-word; }
.lz-info a { color: var(--apple-green); text-decoration: none; font-weight: 500; word-break: break-all; }
@media (max-width:768px) { .lz-info th, .lz-info td { display: block; width: auto; border-radius: 0; } .lz-info th { border-right: none; border-top-left-radius: 8px; border-top-right-radius: 8px; } .lz-info td { border-top: 1px dashed #f0e2de; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } }

/* --- SNS --- */
.lz-sns { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 12px 0; margin-bottom: 16px; }
.lz-sns a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; transition: all .2s ease; }
.lz-sns a svg { width: 20px; height: 20px; fill: currentColor; }
.lz-sns a[data-sns="web"] { background: var(--web); }
.lz-sns a[data-sns="ec"] { background: var(--ec); }
.lz-sns a[data-sns="ig"] { background: var(--ig); }
.lz-sns a[data-sns="fb"] { background: var(--fb); }
.lz-sns a[data-sns="x"] { background: var(--x); }
.lz-sns a[data-sns="line"] { background: var(--line); }
.lz-sns a[data-sns="tt"] { background: var(--tt); }
.lz-sns a:hover { opacity: .85; }

.lz-lead-strong { padding: 12px 12px 0; font-weight: var(--fw-card-title); font-size: var(--fz-body); color: var(--ink-dark); line-height: 1.7; }
.lz-txt { padding: 12px; font-weight: var(--fw-body); font-size: var(--fz-body); color: var(--ink-light); line-height: 1.75; white-space: pre-wrap; }
.lz-g { padding: 0 12px 12px; display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); }
.lz-g img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: contain; background: #f6f7f9; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.lz-g img:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.lz-g img.is-active { outline: 2px solid var(--apple-red); outline-offset: 2px; }

/* --- Navigation & Toast --- */
.lz-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .92); border: 1px solid var(--apple-red); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10000; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.lz-arrow svg { width: 20px; height: 20px; stroke: var(--apple-red); }
.lz-prev { left: -60px; } .lz-next { right: -60px; }
@media(max-width:768px) { .lz-prev, .lz-next { top: auto; bottom: -54px; left: 50%; transform: none; } .lz-prev { transform: translateX(-120%); } .lz-next { transform: translateX(20%); } }

.lz-nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: none; }
.lz-nav-inner { display: flex; gap: 8px; overflow: auto; padding: 10px 8px; }
.lz-nav-inner::-webkit-scrollbar { display: none; }
.lz-nav a { display: inline-block; padding: .5em .95em; border: 1px solid var(--apple-red); border-radius: 999px; text-decoration: none; color: var(--apple-red); white-space: nowrap; font-weight: 600; background: #fff; }
.lz-nav a:hover { background: var(--apple-red); color: #fff; }
.lz-nav a.is-active { background: #b92a2a; color: #fff; border-color: #b92a2a; }

.lz-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: rgba(17, 17, 17, .88); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 13px; z-index: 10001; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lz-toast.show { opacity: 1; }