/* ============================================================
   CLZT Theme — Trust Finance Style
   Compiled from approved HTML previews (yulan/)
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
    --blue: #0055aa;
    --blue-hover: #003d80;
    --blue-subtle: rgba(0,85,170,0.05);
    --blue-line: rgba(0,85,170,0.2);
    --gold: #a67c00;
    --gold-dark: #8a6600;
    --bg: #f8f7f5;
    --bg-white: #ffffff;
    --bg-muted: #f1efec;
    --ink: #1a1a1a;
    --body: #3a3a3a;
    --caption: #6b6b6b;
    --mute: #6d6d6d;
    --rule: #d4d0c8;
    --rule-light: #e8e5df;
    --green: #0d805b;
    --green-bg: #eaf5ef;
    --red: #c0392b;
    --orange: #d4820a;
    --orange-bg: #fef5e7;
    --gray: #6b6b6b;
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.serif { font-family: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif SC', Georgia, 'Noto Serif', serif; letter-spacing:0.02em; }
.mono { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace; font-variant-numeric: tabular-nums; }
img { max-width:100%; height:auto; display:block; }
a { color: inherit; }

/* ===== LAYOUT ===== */
.container { max-width:960px; margin:0 auto; padding:0 24px; }

/* ===== SKIP LINK ===== */
.skip-link {
    position:absolute; top:-100%; left:50%; transform:translateX(-50%);
    background:var(--blue); color:white; padding:8px 16px; font-size:14px; font-weight:600;
    text-decoration:none; z-index:9999; transition:top 0.2s;
}
.skip-link:focus { top:8px; }

/* ===== HEADER ===== */
.header {
    background:var(--bg-white); border-bottom:1px solid var(--rule);
    position:sticky; top:0; z-index:100; transition:box-shadow 0.2s;
}
.header.scrolled { box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-mark {
    width:32px; height:32px; border:2px solid var(--blue);
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:14px; color:var(--blue); line-height:1;
}
.logo-name { font-size:18px; font-weight:800; color:var(--ink); letter-spacing:2px; }
.nav { display:flex; align-items:center; gap:6px; }
.nav-search {
    border:1px solid var(--rule); background:var(--bg);
    padding:6px 12px; font-size:13px; width:180px; outline:none; color:var(--body);
    transition:border-color 0.15s;
}
.nav-search:focus { border-color:var(--blue); }
.nav-search::placeholder { color:var(--mute); }
.nav-link { font-size:13px; color:var(--caption); text-decoration:none; padding:4px 10px; transition:color 0.15s; }
.nav-link:hover { color:var(--blue); }
.nav-divider { width:1px; height:16px; background:var(--rule-light); margin:0 4px; }

/* ===== BREADCRUMB ===== */
.breadcrumb { padding:16px 0; border-bottom:1px solid var(--rule-light); background:var(--bg-white); }
.breadcrumb-list { display:flex; align-items:center; list-style:none; font-size:13px; flex-wrap:wrap; gap:0; }
.breadcrumb-item a { color:var(--caption); text-decoration:none; }
.breadcrumb-item a:hover { color:var(--blue); }
.breadcrumb-item.active { color:var(--ink); font-weight:500; }
.breadcrumb-item + .breadcrumb-item::before { content:"/"; color:var(--mute); margin:0 8px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== FOOTER ===== */
.footer { border-top:2px solid var(--ink); padding:28px 0; background:var(--bg-white); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; }
.footer-links { display:flex; gap:16px; }
.footer-links a { font-size:12px; color:var(--caption); text-decoration:none; }
.footer-links a:hover { color:var(--blue); }
.footer-copy { font-size:12px; color:var(--mute); }

/* ===== BACK TO TOP ===== */
.back-to-top {
    position:fixed; bottom:24px; right:24px; width:40px; height:40px;
    border:1px solid var(--rule); background:var(--bg-white); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity 0.2s, visibility 0.2s; z-index:50;
}
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { border-color:var(--blue); }
.back-to-top svg { width:18px; height:18px; stroke:var(--caption); fill:none; stroke-width:2; }

/* ============================================================
   HOME PAGE
   ============================================================ */

/* Hero */
.hero { padding:56px 0 48px; border-bottom:1px solid var(--rule-light); }
.hero-grid { display:grid; grid-template-columns:1fr 280px; gap:40px; align-items:start; }
.hero h1 { font-size:32px; font-weight:900; color:var(--ink); line-height:1.3; margin-bottom:16px; }
.hero-desc { font-size:15px; color:var(--caption); line-height:1.9; max-width:560px; margin-bottom:24px; }
.hero-features { display:flex; gap:24px; flex-wrap:wrap; }
.hero-feat { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--body); font-weight:500; }
.hero-feat-icon {
    width:28px; height:28px; border:1.5px solid var(--blue-line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero-feat-icon svg { width:14px; height:14px; stroke:var(--blue); fill:none; stroke-width:1.8; }
.hero-aside-card { background:var(--bg-muted); padding:20px; border:1px solid var(--rule-light); }
.aside-title {
    font-size:12px; font-weight:700; color:var(--mute); letter-spacing:2px;
    text-transform:uppercase; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--rule);
}
.aside-stat { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--rule-light); }
.aside-stat:last-child { border-bottom:none; }
.aside-stat-label { font-size:13px; color:var(--caption); }
.aside-stat-value { font-size:15px; font-weight:700; color:var(--ink); }
.aside-stat-value.blue { color:var(--blue); }

/* Product Section (Home) */
.product-section { padding:40px 0; background:var(--bg-white); }
.product-section-title {
    font-size:18px; font-weight:700; color:var(--ink);
    margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block;
}
.product-list { display:flex; flex-direction:column; gap:0; }

/* Product Card (used on Home and Search) */
.product-item {
    display:grid; grid-template-columns:64px 1fr auto;
    gap:16px; align-items:center; padding:16px 0;
    border-bottom:1px solid var(--rule-light); text-decoration:none; color:inherit; transition:background 0.1s;
}
.product-item:last-child { border-bottom:none; }
.product-item:hover {
    background:var(--blue-subtle); margin:0 -12px; padding:16px 12px; border-radius:4px; border-color:transparent;
}
.product-img-wrap {
    width:64px; height:64px; background:var(--bg-muted); border:1px solid var(--rule-light);
    display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.product-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.product-img-placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #e8e5df 0%, #f1efec 100%);
}
.product-img-placeholder svg { width:28px; height:28px; stroke:var(--mute); fill:none; stroke-width:1.2; }
.product-info-cell { min-width:0; }
.product-name {
    font-size:14px; font-weight:500; color:var(--ink); margin-bottom:4px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-item:hover .product-name { color:var(--blue); }
.product-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.product-tag { font-size:11px; padding:1px 6px; border:1px solid var(--rule); color:var(--caption); line-height:1.6; }
.product-tag.active-tag { border-color:var(--blue-line); color:var(--blue); background:var(--blue-subtle); }
.product-stock { font-size:12px; color:var(--green); display:flex; align-items:center; gap:4px; }
.stock-indicator { width:6px; height:6px; border-radius:50%; background:var(--green); }
.product-price-cell { display:flex; flex-direction:row; align-items:center; gap:16px; white-space:nowrap; }
.product-price { font-size:18px; font-weight:700; color:var(--gold-dark); }
.product-price .yen { font-size:13px; font-weight:400; }
.buy-link {
    font-size:13px; font-weight:600; color:var(--blue); text-decoration:none;
    padding:4px 12px; border:1px solid var(--blue-line); transition:all 0.15s;
}
.buy-link:hover { background:var(--blue); color:white; border-color:var(--blue); }

/* Category Label */
.category-label {
    font-size:16px; font-weight:700; color:var(--ink); margin:24px 0 12px;
    padding-bottom:8px; border-bottom:2px solid var(--ink); display:inline-block;
}
.category-label:first-child { margin-top:0; }

/* Trust Signals */
.trust-section { padding:36px 0; border-top:3px solid var(--blue); background:var(--bg-white); }
.trust-section > .container > h2 {
    font-size:18px; font-weight:700; color:var(--ink);
    margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block;
}
.trust-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.trust-item { text-align:center; padding:20px 8px; border-right:1px solid var(--rule-light); }
.trust-item:last-child { border-right:none; }
.trust-num { font-size:28px; font-weight:800; color:var(--blue); line-height:1; margin-bottom:6px; }
.trust-label { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.trust-desc { font-size:12px; color:var(--mute); margin:0; }

/* Guarantee Section */
.guarantee-section { padding:44px 0 40px; background:var(--bg); }
.guarantee-section > .container > h2 {
    font-size:18px; font-weight:700; color:var(--ink);
    margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block;
}
.guarantee-list { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); }
.guarantee-item { padding:20px; border-bottom:1px solid var(--rule-light); border-right:1px solid var(--rule-light); }
.guarantee-item:nth-child(even) { border-right:none; }
.guarantee-item:nth-last-child(-n+2) { border-bottom:none; }
.guarantee-item-title {
    font-size:14px; font-weight:700; color:var(--ink); margin-bottom:6px;
    display:flex; align-items:center; gap:8px;
}
.guarantee-item-title svg { width:16px; height:16px; stroke:var(--blue); fill:none; stroke-width:1.8; flex-shrink:0; }
.guarantee-item p { font-size:13px; color:var(--caption); line-height:1.7; }

/* Steps Section */
.steps-section { padding:40px 0; background:var(--bg-white); }
.steps-section > .container > h2 {
    font-size:18px; font-weight:700; color:var(--ink);
    margin-bottom:28px; padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block;
}
.steps-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.step-card { display:flex; gap:14px; align-items:flex-start; }
.step-num-wrap { flex-shrink:0; }
.step-num {
    width:36px; height:36px; background:var(--blue); color:white;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:800;
}
.step-content h3 { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px; line-height:1.4; padding-top:6px; }
.step-content p { font-size:12px; color:var(--caption); line-height:1.6; }

/* FAQ Section */
.faq-section { padding:44px 0; background:var(--bg); }
.faq-section > .container > h2 {
    font-size:18px; font-weight:700; color:var(--ink);
    margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block;
}
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); }
.faq-item { padding:20px; border-bottom:1px solid var(--rule-light); border-right:1px solid var(--rule-light); }
.faq-item:nth-child(even) { border-right:none; }
.faq-item:nth-last-child(-n+2) { border-bottom:none; }
.faq-q {
    font-size:14px; font-weight:700; color:var(--ink); margin-bottom:8px;
    display:flex; align-items:flex-start; gap:8px;
}
.faq-q::before {
    content:'Q'; font-size:11px; font-weight:700; color:var(--blue); line-height:1.6;
    border:1px solid var(--blue-line); padding:0 5px; flex-shrink:0; margin-top:1px;
}
.faq-a { font-size:13px; color:var(--caption); line-height:1.8; padding-left:28px; }

/* Articles Section (Home) */
.articles-section { padding:40px 0 48px; background:var(--bg-white); }
.articles-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
.articles-top h2 {
    font-size:18px; font-weight:700; color:var(--ink);
    padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block;
}
.articles-more { font-size:13px; color:var(--blue); text-decoration:none; }
.articles-more:hover { text-decoration:underline; }
.article-item {
    display:block; padding:14px 0; border-bottom:1px solid var(--rule-light);
    text-decoration:none; color:inherit;
}
.article-item:last-child { border-bottom:none; }
.article-item:hover .article-item-title { color:var(--blue); }
.article-meta { font-size:11px; color:var(--mute); margin-bottom:3px; display:flex; gap:8px; }
.article-item-title { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:3px; transition:color 0.15s; }
.article-item-desc {
    font-size:13px; color:var(--caption); line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

/* Announcement (Home) */
.info-section { padding:44px 0 40px; background:var(--bg-white); }
.info-section > .container > h2 {
    font-size:18px; font-weight:700; color:var(--ink);
    margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block;
}
.info-card { border:1px solid var(--rule-light); padding:24px; }
.info-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.info-icon {
    width:36px; height:36px; background:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-icon svg { width:18px; height:18px; stroke:white; fill:none; stroke-width:2; }
.announcement-content { font-size:14px; color:var(--body); line-height:1.8; }
.announcement-content p { margin-bottom:8px; }

/* Guide Steps (Home — 5-step variant) */
.guide-steps-five { display:flex; list-style:none; gap:0; flex-wrap:wrap; padding:0; }
.guide-step-five {
    flex:1; min-width:120px; text-align:center; padding:0 8px; position:relative;
}
.guide-step-number-five {
    width:32px; height:32px; background:var(--blue); color:white;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:800; margin-bottom:10px;
}
.guide-step-title-five { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.guide-step-desc-five { font-size:12px; color:var(--caption); line-height:1.5; }
.guide-step-arrow {
    display:none; margin-top:12px; color:var(--rule);
}
.guide-step-arrow svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* ============================================================
   BUY PAGE (Product Detail)
   ============================================================ */
.product-page { padding:40px 0 0; background:var(--bg-white); }
.product-top { display:grid; grid-template-columns:140px 1fr; gap:24px; align-items:start; }
.product-image {
    width:140px; height:140px; background:var(--bg-muted); border:1px solid var(--rule-light);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-image img { width:100%; height:100%; object-fit:cover; }
.product-image svg { width:48px; height:48px; stroke:var(--mute); fill:none; stroke-width:1; }
.product-info {}
.product-title { font-size:20px; font-weight:800; color:var(--ink); line-height:1.4; margin-bottom:10px; }
.product-tags-buy { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.product-tag-buy { font-size:11px; padding:2px 8px; border:1px solid var(--rule); color:var(--caption); line-height:1.6; }
.product-tag-buy.active { border-color:var(--blue-line); color:var(--blue); background:var(--blue-subtle); }
.product-stock-info { font-size:13px; color:var(--green); display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.stock-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
.product-update-time { color:var(--caption); font-size:12px; margin-bottom:2px; }
.product-brief { font-size:13px; color:var(--caption); line-height:1.7; }

/* Price Bar */
.price-bar {
    padding:16px 0; border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);
    margin-top:24px; display:flex; align-items:baseline; justify-content:space-between;
}
.price-label { font-size:13px; color:var(--caption); margin-right:8px; }
.price-value { font-size:28px; font-weight:800; color:var(--gold-dark); }
.price-value .yen { font-size:16px; font-weight:400; }
.stock-text { font-size:12px; color:var(--mute); }

/* Purchase Form */
.purchase-form { padding:28px 0; border-bottom:1px solid var(--rule-light); }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.form-label .req { color:var(--red); margin-left:2px; }
.form-input {
    width:100%; padding:10px 14px; border:1px solid var(--rule); font-size:14px;
    outline:none; transition:border-color 0.15s; background:var(--bg-white); color:var(--body);
}
.form-input:focus { border-color:var(--blue); }
.form-input::placeholder { color:var(--mute); }
.form-input.input-error { border-color:var(--red); }
.form-error { font-size:12px; color:var(--red); margin-top:4px; }
.form-row { display:grid; grid-template-columns:1fr 200px; gap:16px; }

/* Quantity */
.qty-control { display:flex; align-items:center; gap:0; border:1px solid var(--rule); width:fit-content; }
.qty-btn {
    width:36px; height:36px; border:none; background:var(--bg);
    font-size:16px; color:var(--body); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.qty-btn:hover { background:var(--bg-muted); }
.qty-input {
    width:48px; height:36px; border:none; border-left:1px solid var(--rule); border-right:1px solid var(--rule);
    text-align:center; font-size:14px; font-weight:600; outline:none; color:var(--ink);
    -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Payment */
.payment-fieldset { border:none; padding:0; margin:0; }
.payment-options { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.payment-radio { display:flex; align-items:center; gap:0; border:1px solid var(--rule); cursor:pointer; }
.payment-radio input { display:none; }
.payment-radio label {
    padding:8px 16px; font-size:13px; color:var(--caption); cursor:pointer; display:block; transition:all 0.1s;
}
.payment-radio input:checked + label { background:var(--blue); color:white; font-weight:600; }
.payment-radio:hover label { border-color:var(--blue-line); }

/* Buy Button */
.btn-buy {
    display:block; width:100%; padding:14px; border:none;
    background:var(--blue); color:white; font-size:16px; font-weight:700;
    cursor:pointer; letter-spacing:1px; transition:background 0.15s;
}
.btn-buy:hover { background:var(--blue-hover); }
.btn-buy:disabled { background:var(--mute); cursor:not-allowed; }

.order-link { margin-top:12px; font-size:12px; color:var(--mute); }
.order-link a { color:var(--blue); text-decoration:none; }
.order-link a:hover { text-decoration:underline; }

/* Product Description */
.detail-section { padding:32px 0; background:var(--bg); }
.detail-content {
    background:var(--bg-white); padding:24px; border:1px solid var(--rule-light);
    font-size:14px; color:var(--body); line-height:1.9;
}
.detail-content h2 { font-size:16px; font-weight:700; color:var(--ink); margin:20px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule-light); }
.detail-content h2:first-child { margin-top:0; }
.detail-content h3 { font-size:14px; font-weight:700; color:var(--ink); margin:16px 0 8px; }
.detail-content p { margin-bottom:12px; }
.detail-content ul, .detail-content ol { padding-left:20px; margin-bottom:12px; }
.detail-content li { margin-bottom:4px; }
.detail-content code { background:var(--bg-muted); padding:1px 6px; font-size:13px; border-radius:2px; }
.detail-content pre { background:var(--ink); color:#e8e5df; padding:14px; overflow-x:auto; margin-bottom:16px; font-size:13px; line-height:1.6; }
.detail-content img { max-width:100%; height:auto; }
.detail-content a { color:var(--blue); text-decoration:underline; }
.detail-content a:hover { text-decoration:underline; }

/* Buy Prompt (merged into description) */
.buy-prompt-section {
    margin-top:20px; padding:16px 20px; border:1px solid var(--orange-bg);
    background:var(--orange-bg); border:1px solid rgba(212,130,10,0.2);
}
.buy-prompt-title {
    font-size:14px; font-weight:700; color:var(--orange); margin-bottom:8px;
    display:flex; align-items:center; gap:8px;
}
.buy-prompt-title svg { width:16px; height:16px; stroke:var(--orange); fill:none; stroke-width:2; }
.buy-prompt-content { font-size:13px; color:var(--caption); line-height:1.8; }

/* Related Products */
.related-section { padding:32px 0; background:var(--bg-white); }
.related-title {
    font-size:16px; font-weight:700; color:var(--ink);
    margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid var(--ink); display:inline-block;
}
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related-card {
    display:block; border:1px solid var(--rule-light); padding:12px;
    text-decoration:none; color:inherit; transition:border-color 0.15s;
}
.related-card:hover { border-color:var(--blue-line); }
.related-card-image {
    width:100%; height:100px; background:var(--bg-muted);
    display:flex; align-items:center; justify-content:center; margin-bottom:10px; overflow:hidden;
}
.related-card-image img { width:100%; height:100%; object-fit:cover; }
.related-card-image svg { width:28px; height:28px; stroke:var(--mute); fill:none; stroke-width:1.2; }
.related-card-title {
    font-size:13px; font-weight:500; color:var(--ink); margin-bottom:6px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.related-card-footer { display:flex; justify-content:space-between; align-items:baseline; }
.related-card-price { font-size:14px; font-weight:700; color:var(--gold-dark); }
.related-card-stock { font-size:11px; color:var(--green); }

/* Contact Button */
.contact-section { padding:0 0 40px; background:var(--bg-white); }
.contact-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 20px; border:1px solid var(--blue-line);
    font-size:13px; font-weight:600; color:var(--blue); text-decoration:none; transition:all 0.15s;
}
.contact-btn:hover { background:var(--blue); color:white; border-color:var(--blue); }
.contact-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ============================================================
   ARTICLE PAGES
   ============================================================ */

/* Article List Page */
.page-header { padding:32px 0 24px; background:var(--bg-white); border-bottom:1px solid var(--rule-light); }
.page-title { font-size:22px; font-weight:800; color:var(--ink); margin-bottom:6px; padding-bottom:10px; border-bottom:2px solid var(--ink); display:inline-block; }
.page-subtitle { font-size:14px; color:var(--caption); margin-top:8px; }
.article-list-section { padding:32px 0; background:var(--bg); }
.article-list { display:flex; flex-direction:column; }

/* Article List Item (more detailed than Home) */
.article-list .article-item { padding:18px 0; }
.article-list .article-item:hover { background:var(--blue-subtle); margin:0 -12px; padding:18px 12px; border-radius:2px; }
.article-date { font-size:12px; color:var(--mute); margin-bottom:4px; }
.article-list .article-item-title { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:4px; line-height:1.5; transition:color 0.15s; }
.article-item-excerpt {
    font-size:13px; color:var(--caption); line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.article-item-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.article-author { font-size:12px; color:var(--mute); display:flex; align-items:center; gap:6px; }
.author-avatar {
    width:20px; height:20px; background:var(--blue); color:white;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; border-radius:50%;
}
.read-more { font-size:12px; color:var(--blue); display:flex; align-items:center; gap:4px; }
.read-more svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:4px; padding-top:24px; }
.page-btn {
    min-width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--rule); font-size:13px; color:var(--body); text-decoration:none; transition:all 0.15s;
}
.page-btn:hover { border-color:var(--blue-line); color:var(--blue); }
.page-btn.active { background:var(--blue); color:white; border-color:var(--blue); }
.page-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.page-btn.disabled { opacity:0.4; cursor:not-allowed; }

/* Article Detail */
.article-page { padding:40px 0 48px; }
.article-header { padding-bottom:24px; border-bottom:1px solid var(--rule-light); margin-bottom:28px; }
.article-detail-title { font-size:24px; font-weight:800; color:var(--ink); line-height:1.5; margin-bottom:12px; }
.article-detail-meta { display:flex; align-items:center; gap:16px; font-size:13px; color:var(--caption); flex-wrap:wrap; }
.article-meta-item { display:flex; align-items:center; gap:5px; }
.article-meta-item svg { width:14px; height:14px; stroke:var(--caption); fill:none; stroke-width:2; }
.article-intro {
    font-size:14px; color:var(--caption); line-height:1.9; padding:0;
    margin-bottom:28px; border-bottom:1px solid var(--rule-light); padding-bottom:20px;
}
.article-layout { display:grid; grid-template-columns:220px 1fr; gap:32px; }

/* TOC Sidebar (Desktop) */
.toc { position:sticky; top:80px; border:1px solid var(--rule-light); padding:0; overflow:hidden; max-height:calc(100vh - 100px); overflow-y:auto; }
.toc-header {
    padding:12px 16px; font-size:13px; font-weight:700; color:var(--ink);
    border-bottom:1px solid var(--rule-light); display:flex; align-items:center; gap:6px;
}
.toc-header svg { width:14px; height:14px; stroke:var(--blue); fill:none; stroke-width:2; }
.article-toc-list { list-style:none; padding:8px 0; margin:0; }
.article-toc-list a {
    display:block; padding:6px 16px; font-size:12px; color:var(--caption); text-decoration:none;
    border-left:2px solid transparent; transition:all 0.15s; line-height:1.5;
    overflow-wrap:break-word; word-break:break-word;
}
.article-toc-list a:hover { color:var(--blue); border-left-color:var(--blue); background:var(--blue-subtle); }
.article-toc-list a.active { color:var(--blue); font-weight:600; border-left-color:var(--blue); }
.article-toc-list .toc-h3 a { padding-left:28px; font-size:11px; }
.article-toc-list ol { list-style:none; padding:0; margin:0; }
.article-toc-list ol a { padding-left:28px; font-size:11px; }

/* Mobile TOC */
.toc-mobile { display:none; margin-bottom:20px; border:1px solid var(--rule-light); }
.toc-mobile-toggle {
    width:100%; padding:12px 16px; border:none; background:var(--bg-white);
    font-size:13px; font-weight:700; color:var(--ink); cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
}
.toc-mobile-toggle svg { width:14px; height:14px; stroke:var(--caption); fill:none; stroke-width:2; transition:transform 0.2s; }
.toc-mobile-toggle.open svg { transform:rotate(180deg); }
.toc-mobile-body { max-height:0; overflow:hidden; transition:max-height 0.25s ease; }
.toc-mobile-body.open { max-height:400px; }
.toc-mobile-body .article-toc-list { padding:0 0 8px; }

/* Article Body */
.article-body { min-width:0; }
.article-body h2 { font-size:18px; font-weight:700; color:var(--ink); margin:28px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--rule-light); }
.article-body h3 { font-size:15px; font-weight:700; color:var(--ink); margin:20px 0 8px; }
.article-body p { font-size:14px; color:var(--body); line-height:1.9; margin-bottom:14px; }
.article-body ul, .article-body ol { padding-left:22px; margin-bottom:14px; }
.article-body li { font-size:14px; color:var(--body); line-height:1.8; margin-bottom:4px; }
.article-body strong { color:var(--ink); font-weight:600; }
.article-body code { background:var(--bg-muted); padding:1px 6px; font-size:13px; border-radius:2px; }
.article-body a { color:var(--blue); text-decoration:none; }
.article-body a:hover { text-decoration:underline; }

/* Article Related */
.article-related { padding-top:32px; border-top:1px solid var(--rule-light); margin-top:32px; }
.article-related-title {
    font-size:16px; font-weight:700; color:var(--ink);
    margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid var(--ink); display:inline-block;
}
.article-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.article-related-card {
    display:block; border:1px solid var(--rule-light); padding:12px;
    text-decoration:none; color:inherit; transition:border-color 0.15s;
}
.article-related-card:hover { border-color:var(--blue-line); }
.article-related-card-title {
    font-size:13px; font-weight:500; color:var(--ink); margin-bottom:6px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.article-related-card-meta { font-size:11px; color:var(--mute); }

/* ============================================================
   ORDER PAGES
   ============================================================ */

/* Order Search */
.search-page { padding:60px 0; min-height:50vh; }
.search-card { max-width:440px; margin:0 auto; text-align:center; }
.search-icon { margin-bottom:20px; }
.search-icon svg { width:48px; height:48px; stroke:var(--blue); fill:none; stroke-width:1.5; }
.search-title { font-size:22px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.search-desc { font-size:14px; color:var(--caption); margin-bottom:28px; line-height:1.7; }
.search-form { display:flex; flex-direction:column; gap:12px; }
.search-input {
    width:100%; padding:12px 16px; border:1px solid var(--rule); font-size:14px;
    outline:none; background:var(--bg-white); color:var(--body); transition:border-color 0.15s;
}
.search-input:focus { border-color:var(--blue); }
.search-input::placeholder { color:var(--mute); }
.search-btn {
    width:100%; padding:14px; border:none; background:var(--blue); color:white;
    font-size:15px; font-weight:700; cursor:pointer; letter-spacing:1px; transition:background 0.15s;
}
.search-btn:hover { background:var(--blue-hover); }
.search-btn:disabled { background:var(--mute); cursor:not-allowed; }
.search-hint { margin-top:16px; font-size:12px; color:var(--mute); }
.error-notice {
    display:none; margin-top:16px; padding:12px 16px; background:#fef5f5;
    border:1px solid rgba(192,57,43,0.2); font-size:13px; color:var(--red);
}
.error-notice.visible { display:block; }

/* Bill Page */
.bill-page { padding:48px 0; min-height:60vh; }
.bill-card { max-width:480px; margin:0 auto; background:var(--bg-white); border:1px solid var(--rule); padding:32px; }
.bill-title { font-size:20px; font-weight:800; color:var(--ink); margin-bottom:24px; text-align:center; }
.bill-info { margin-bottom:24px; }
.bill-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--rule-light); font-size:13px; }
.bill-row:last-child { border-bottom:none; }
.bill-label { color:var(--caption); }
.bill-value { color:var(--ink); font-weight:500; text-align:right; }
.bill-amount { text-align:center; padding:20px 0; margin:20px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--rule-light); }
.bill-amount-label { font-size:13px; color:var(--caption); margin-bottom:4px; }
.bill-amount-value { font-size:32px; font-weight:800; color:var(--gold-dark); }
.bill-amount-value .yen { font-size:18px; font-weight:400; }
.payment-area { text-align:center; padding:24px 0; }
.payment-icon { margin-bottom:16px; }
.payment-icon svg { width:40px; height:40px; stroke:var(--blue); fill:none; stroke-width:1.5; }
.payment-name { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.payment-hint { font-size:12px; color:var(--caption); }
.waiting-status { text-align:center; padding:12px 0; font-size:13px; color:var(--blue); }
.waiting-dot {
    display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--blue);
    animation:pulse 1.5s infinite; margin-right:6px; vertical-align:middle;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.back-link { display:block; text-align:center; margin-top:24px; font-size:13px; color:var(--caption); text-decoration:none; }
.back-link:hover { color:var(--blue); }

/* Order Info Page */
.order-page { padding:40px 0 48px; }
.order-card { max-width:560px; margin:0 auto; background:var(--bg-white); border:1px solid var(--rule); padding:28px; }
.order-card + .order-card { margin-top:20px; }
.order-status { display:flex; align-items:center; gap:8px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--rule-light); }
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; font-size:13px; font-weight:600; }
.status-badge svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.status-paid { background:var(--green-bg); color:var(--green); }
.status-pending { background:var(--orange-bg); color:var(--orange); }
.status-expired { background:var(--bg-muted); color:var(--gray); }
.status-failed { background:#fef5f5; color:var(--red); }
.order-sn { font-size:12px; color:var(--mute); margin-left:auto; }
.order-info { margin-bottom:20px; }
.order-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--rule-light); font-size:13px; }
.order-row:last-child { border-bottom:none; }
.order-label { color:var(--caption); }
.order-value { color:var(--ink); font-weight:500; text-align:right; max-width:60%; word-break:break-all; }

/* Carmi Section */
.carmi-section { margin:20px 0; padding:16px; background:var(--bg); border:1px solid var(--rule-light); }
.carmi-title { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.carmi-title svg { width:14px; height:14px; stroke:var(--blue); fill:none; stroke-width:2; }
.carmi-value-row { display:flex; align-items:flex-start; gap:12px; }
.carmi-value {
    color:var(--ink); font-family:'SF Mono','Fira Code',monospace; font-size:13px;
    word-break:break-all; flex:1; line-height:1.7; padding:8px 12px;
    background:var(--bg-white); border:1px solid var(--rule-light);
}
.copy-btn {
    padding:6px 12px; border:1px solid var(--blue-line); background:none;
    font-size:12px; color:var(--blue); cursor:pointer; white-space:nowrap;
    transition:all 0.1s; flex-shrink:0; min-height:36px;
}
.copy-btn:hover { background:var(--blue); color:white; border-color:var(--blue); }
.copy-btn.copied { background:var(--green); color:white; border-color:var(--green); }

/* Order Actions */
.order-actions { display:flex; gap:12px; margin-top:24px; }
.action-btn {
    flex:1; padding:12px; text-align:center; font-size:13px; font-weight:600;
    text-decoration:none; cursor:pointer; border:none; transition:all 0.15s;
}
.action-btn-primary { background:var(--blue); color:white; }
.action-btn-primary:hover { background:var(--blue-hover); }
.action-btn-secondary { background:var(--bg-muted); color:var(--ink); border:1px solid var(--rule); }
.action-btn-secondary:hover { border-color:var(--blue-line); color:var(--blue); }

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.search-result-page { padding:32px 0 48px; }
.search-header { padding-bottom:20px; border-bottom:1px solid var(--rule-light); margin-bottom:28px; }
.search-query { font-size:20px; font-weight:800; color:var(--ink); margin-bottom:4px; }
.search-meta { font-size:13px; color:var(--caption); }
.result-section { margin-bottom:36px; }
.result-title {
    font-size:16px; font-weight:700; color:var(--ink); margin-bottom:16px;
    padding-bottom:8px; border-bottom:2px solid var(--ink); display:inline-block;
}

/* No Results */
.no-results { text-align:center; padding:60px 0; }
.no-results-icon svg { width:48px; height:48px; stroke:var(--mute); fill:none; stroke-width:1.5; }
.no-results-title { font-size:18px; font-weight:700; color:var(--ink); margin:16px 0 6px; }
.no-results-desc { font-size:14px; color:var(--caption); margin-bottom:20px; }
.btn-back { font-size:13px; color:var(--blue); text-decoration:none; border:1px solid var(--blue-line); padding:8px 20px; }
.btn-back:hover { background:var(--blue); color:white; border-color:var(--blue); }

/* ============================================================
   ERROR PAGES
   ============================================================ */
.error-demo { padding:48px 0; min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.error-card { text-align:center; max-width:400px; }
.error-code { font-size:64px; font-weight:900; color:var(--ink); line-height:1; margin-bottom:8px; font-family:'SF Mono','Fira Code',monospace; }
.error-title { font-size:18px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.error-desc { font-size:14px; color:var(--caption); margin-bottom:28px; line-height:1.7; }
.error-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.error-btn {
    padding:10px 24px; font-size:13px; font-weight:600; text-decoration:none;
    border:1px solid var(--blue-line); color:var(--blue); transition:all 0.15s;
}
.error-btn:hover { background:var(--blue); color:white; border-color:var(--blue); }
.error-btn-primary { background:var(--blue); color:white; border-color:var(--blue); }
.error-btn-primary:hover { background:var(--blue-hover); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Default hidden on desktop, shown on mobile via media queries */
.hero-stats { display:none; }
.bottom-bar { display:none; position:sticky; bottom:0; z-index:100; background:var(--bg-white); border-top:1px solid var(--rule); padding:8px 16px; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)); gap:8px; }
@media(max-width:768px) {
    .hero-grid { grid-template-columns:1fr; }
    .hero-aside { display:none; }
    .hero-stats { display:flex; }
    .article-layout { grid-template-columns:1fr; }
    .toc-sidebar { display:none; }
    .toc-mobile { display:block; }
    .article-related-grid { grid-template-columns:1fr 1fr; }
    /* Header: compact single-row on mobile */
    .header-inner { gap:12px; }
    .logo img { height:24px !important; width:auto !important; }
    .logo-mark { width:26px; height:26px; font-size:12px; }
    .logo-name { font-size:15px; letter-spacing:1px; }
    .nav { gap:4px; }
    .nav-search { width:88px; font-size:12px; padding:4px 8px; border:none; background:var(--bg-muted); border-radius:4px; }
    .nav-search:focus { background:var(--bg-white); box-shadow:0 0 0 1.5px var(--blue); outline:none; }
    .nav-search::placeholder { color:var(--mute); }
    .nav-link { font-size:12px; padding:12px 5px; }
    .nav-divider { display:none; }
    .trust-row { grid-template-columns:1fr 1fr; }

    /* Section padding - mobile */
    .hero { padding:24px 0 20px; }
    .product-section { padding:28px 0; }
    .guarantee-section { padding:28px 0; }
    .steps-section { padding:28px 0; }
    .faq-section { padding:28px 0; }
    .articles-section { padding:28px 0 32px; }
    .info-section { padding:28px 0; }

    /* Bottom bar visible on mobile */
    .bottom-bar { display:flex; }
}

@media(max-width:640px) {
    /* Typography */
    .hero h1 { font-size:20px; margin-bottom:10px; }
    .hero-desc { font-size:13px; margin-bottom:16px; }
    .hero-grid { gap:24px; }
    .hero-features { display:grid; grid-template-columns:1fr 1fr; gap:0; }
    .hero-feat { font-size:12px; padding:4px 0; }
    .hero-feat-icon { width:20px; height:20px; }
    .hero-feat-icon svg { width:10px; height:10px; }

    /* Hero stats strip (mobile only) */
    .hero-stats {
        display:flex; gap:0; margin-top:12px; padding-top:12px;
        border-top:1px solid var(--rule-light);
    }
    .hero-stat { flex:1; text-align:center; padding:4px 0; border-right:1px solid var(--rule-light); }
    .hero-stat:last-child { border-right:none; }
    .hero-stat-val { font-size:15px; font-weight:800; color:var(--blue); line-height:1.2; }
    .hero-stat-label { font-size:10px; color:var(--mute); margin-top:1px; }

    /* Product Card (Home) - mobile layout with image, tags, stock, buy button */
    .product-item { grid-template-columns:44px 1fr auto; gap:12px; }
    .product-img-wrap { width:44px; height:44px; }
    .product-img-wrap svg { width:20px; height:20px; }
    .product-name { font-size:13px; -webkit-line-clamp:2; }
    .product-tags { display:flex; gap:6px; margin-bottom:3px; }
    .product-tag { font-size:10px; padding:0 4px; line-height:1.6; }
    .product-stock { display:flex; font-size:10px; }
    .product-price-cell { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
    .product-price { font-size:15px; }
    .product-price .yen { font-size:11px; }
    .buy-link { font-size:11px; padding:3px 10px; }

    /* Container - remove side padding on mobile, sections handle their own */
    .container { padding:0 16px; }

    /* Section titles mobile style */
    .guarantee-section > .container > h2,
    .steps-section > .container > h2,
    .faq-section > .container > h2,
    .info-section > .container > h2 {
        font-size:16px; margin-bottom:16px; padding-bottom:8px;
        border-bottom:2px solid var(--ink); display:inline-block;
    }
    .category-label { font-size:16px; margin-bottom:16px; }

    /* Guarantee items mobile */
    .guarantee-list { grid-template-columns:1fr; border:1px solid var(--rule); }
    .guarantee-item { padding:16px; border-bottom:1px solid var(--rule-light); }
    .guarantee-item:last-child { border-bottom:none; }
    .guarantee-item-title { font-size:13px; margin-bottom:5px; gap:7px; }
    .guarantee-item-title svg { width:14px; height:14px; }
    .guarantee-item p { font-size:12px; }

    /* Steps mobile - vertical list with connector lines */
    .steps-grid { grid-template-columns:1fr; gap:0; }
    .step-card { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--rule-light); }
    .step-card:last-child { border-bottom:none; }
    .step-num-wrap { width:28px; height:28px; flex-shrink:0; }
    .step-num { width:28px; height:28px; font-size:13px; }
    .step-content h3 { font-size:13px; padding-top:3px; }
    .step-content p { font-size:11px; }

    /* FAQ mobile */
    .faq-grid { grid-template-columns:1fr; border:1px solid var(--rule); }
    .faq-item { padding:16px; border-bottom:1px solid var(--rule-light); }
    .faq-item:last-child { border-bottom:none; }
    .faq-q { font-size:13px; margin-bottom:6px; }
    .faq-a { font-size:12px; padding-left:24px; }

    /* Articles mobile */
    .article-list .article-item { padding:12px 0; }
    .article-list .article-item-title { font-size:13px; }
    .article-list .article-item-excerpt { font-size:12px; -webkit-line-clamp:1; }

    /* Trust section mobile - 2x2 grid with borders */
    .trust-row { gap:0; }
    .trust-item { text-align:center; padding:16px 8px; border-right:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light); }
    .trust-item:nth-child(even) { border-right:none; }
    .trust-item:nth-last-child(-n+2) { border-bottom:none; }
    .trust-num { font-size:22px; margin-bottom:4px; }
    .trust-label { font-size:13px; margin-bottom:1px; }
    .trust-desc { font-size:10px; }

    /* Buy Page */
    .product-top { grid-template-columns:80px 1fr; gap:14px; }
    .product-image { width:80px; height:80px; }
    .product-image svg { width:28px; height:28px; }
    .product-title { font-size:17px; }
    .price-value { font-size:22px; }
    .form-row { grid-template-columns:1fr; }
    .related-grid { grid-template-columns:1fr 1fr; }

    /* Article List */
    .page-title { font-size:18px; }

    /* Article Detail */
    .article-detail-title { font-size:20px; }
    .article-related-grid { grid-template-columns:1fr; }

    /* Order */
    .bill-card { padding:24px 16px; }
    .order-card { padding:20px 16px; }

    /* Error */
    .error-code { font-size:48px; }

    /* Footer - mobile compact */
    .footer-inner { flex-direction:column; gap:12px; text-align:center; }
    .footer-links { flex-wrap:wrap; gap:8px 14px; }
    .footer-links a { font-size:11px; }
    .footer-copy { font-size:10px; }
}

/* ===== HERO STATS (Mobile) ===== */
.hero-stat-val { font-variant-numeric:tabular-nums; }

/* ===== BOTTOM CTA BAR (Mobile) ===== */
.bottom-bar-btn {
    flex:1; height:48px; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; text-decoration:none;
    border:none; cursor:pointer; transition:background 0.15s;
}
.bottom-bar-btn.primary { background:var(--blue); color:white; }
.bottom-bar-btn.secondary { background:var(--bg-muted); color:var(--ink); border:1px solid var(--rule); }