/* ============================================================
   网站UI设计页 - 布艺配饰风自由聚散布局
   独立样式,与全站共享 style.css 配合使用
   ============================================================ */

/* ---------- Banner 区:布料悬挂感 ---------- */
.ui-banner { padding-top: 170px; }
.ui-banner h1 em {
    font-style: normal; color: var(--lotus-deep); position: relative;
}
.ui-banner h1 em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 10px;
    background: var(--sage-soft); z-index: -1; border-radius: 6px;
}
.banner-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }

/* Banner 视觉区:悬挂吊牌 */
.ui-banner-visual { position: relative; height: 380px; }
.ui-banner-visual img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 8px;
    box-shadow: var(--shadow); transform: rotate(1.5deg);
}
.ui-banner-visual .pb-tag {
    position: absolute; bottom: -16px; left: -10px; background: var(--white);
    padding: 10px 18px; border-radius: 8px; box-shadow: var(--shadow-sm);
    font-size: .85rem; color: var(--ink); font-weight: 500;
}
/* 悬挂色值吊牌 */
.hang-tag {
    position: absolute; background: var(--white); padding: 8px 14px;
    border-radius: 6px; box-shadow: var(--shadow-sm); font-size: .78rem;
    color: var(--ink); font-weight: 500; z-index: 3;
}
.hang-tag::before {
    content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 14px; background: var(--ink-mute);
}
.hang-tag.ht-1 { top: -18px; right: 8%; transform: rotate(-7deg); }
.hang-tag.ht-2 { top: 38%; left: -6%; transform: rotate(6deg); background: var(--sage-soft); }

/* ---------- 设计体系展示区:错落三大块 ---------- */
.design-system { padding-top: clamp(60px, 8vw, 100px); }
.ds-head { text-align: center; margin-bottom: 64px; }
.ds-head .tag-label { margin-bottom: 18px; }
.ds-head .sec-desc { margin: 0 auto; }

/* 三块错落排布:色卡偏左 / 字体居中下沉 / 组件偏右 */
.ds-block {
    background: var(--white); border-radius: var(--radius-lg); padding: 40px 38px;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative;
    margin-bottom: 36px;
}
.ds-block:nth-of-type(1) { margin-left: 0; margin-right: 8%; }
.ds-block:nth-of-type(2) { margin-left: 12%; margin-right: 4%; transform: translateY(20px); }
.ds-block:nth-of-type(3) { margin-left: 6%; margin-right: 0; transform: translateY(-10px); }

/* 块标签 */
.ds-block-label { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
.ds-block-label .ds-no {
    font-family: var(--f-serif); font-size: 2rem; color: var(--lotus-deep); font-weight: 600;
    line-height: 1; flex-shrink: 0;
}
.ds-block-label h3 { margin-bottom: 4px; }
.ds-block-label p { font-size: .9rem; }

/* ---------- 色彩色卡:圆形色块阵列 ---------- */
.color-array {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 22px;
}
.swatch {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.swatch .dot {
    width: 78px; height: 78px; border-radius: 50%;
    box-shadow: 0 8px 20px -10px rgba(74,69,64,.35), inset 0 0 0 6px var(--white);
    transition: transform .4s;
}
.swatch:hover .dot { transform: scale(1.08) rotate(8deg); }
.swatch .name { font-size: .92rem; color: var(--ink); font-weight: 500; }
.swatch .hex { font-size: .78rem; color: var(--ink-mute); letter-spacing: 1px; font-family: monospace; }

/* ---------- 字体规范 ---------- */
.type-spec { display: flex; flex-direction: column; gap: 4px; }
.type-row {
    display: grid; grid-template-columns: 90px 1fr 180px; align-items: baseline; gap: 24px;
    padding: 18px 0; border-bottom: 1px dashed var(--line);
}
.type-row:last-child { border-bottom: none; }
.type-row .t-label {
    font-size: .78rem; letter-spacing: 2px; color: var(--lotus-deep);
    text-transform: uppercase; font-weight: 500;
}
.type-row .t-meta { font-size: .76rem; color: var(--ink-mute); font-family: monospace; text-align: right; }
.type-h1 .t-sample { font-family: var(--f-serif); font-size: 2.2rem; font-weight: 600; color: var(--ink); }
.type-h2 .t-sample { font-family: var(--f-serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); }
.type-h3 .t-sample { font-family: var(--f-serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.type-body .t-sample { font-family: var(--f-sans); font-size: 1rem; color: var(--ink-soft); }
.type-cap .t-sample { font-family: var(--f-sans); font-size: .8rem; color: var(--ink-soft); letter-spacing: 2px; }

/* ---------- 组件库 ---------- */
.comp-showcase { display: flex; flex-direction: column; gap: 26px; }
.comp-group {
    display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 24px;
}
.comp-title {
    font-size: .82rem; letter-spacing: 2px; color: var(--sage-deep);
    font-weight: 500; text-transform: uppercase;
}
.comp-items { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.comp-input {
    padding: 11px 18px; border: 1.5px solid var(--line); border-radius: 30px;
    background: var(--cream); font-size: .92rem; color: var(--ink); min-width: 220px;
    transition: border-color .3s;
}
.comp-input:focus { outline: none; border-color: var(--lotus-deep); }
.comp-chip {
    display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 20px;
    font-size: .82rem; font-weight: 500;
}
.comp-chip.ch-lotus { background: var(--lotus-soft); color: var(--lotus-deep); }
.comp-chip.ch-sage { background: var(--sage-soft); color: var(--sage-deep); }
.comp-chip.ch-cream { background: var(--cream-2); color: var(--ink-soft); }
.comp-chip.ch-line { background: transparent; color: var(--ink); border: 1px dashed var(--line); }

/* ---------- 设计流程:横向步骤 + SVG 图标 ---------- */
.ui-steps {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative;
}
.ui-steps::before {
    content: ""; position: absolute; top: 36px; left: 10%; right: 10%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--lotus) 0 10px, transparent 10px 20px);
    z-index: 0;
}
.ui-step {
    text-align: center; position: relative; z-index: 1;
    background: var(--white); border-radius: var(--radius); padding: 36px 24px 28px;
    border: 1px solid var(--line); transition: transform .4s, box-shadow .4s;
}
.ui-step:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.ui-step-ic {
    width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
    background: var(--cream-2); display: grid; place-items: center;
    border: 2px dashed var(--lotus-deep);
}
.ui-step:nth-child(even) .ui-step-ic { border-color: var(--sage-deep); }
.ui-step-ic svg { width: 38px; height: 38px; }
.ui-step-no {
    position: absolute; top: 14px; right: 20px; font-family: var(--f-serif);
    font-size: 1.4rem; color: var(--cream-3); font-weight: 600;
}
.ui-step h4 { margin-bottom: 8px; }
.ui-step p { font-size: .88rem; }

/* ---------- 作品对比展示 ---------- */
.ui-compare { background: var(--cream); }
.compare-pair {
    display: grid; grid-template-columns: 1fr 80px 1fr; gap: 20px; align-items: stretch;
}
.compare-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 30px;
    border: 1px solid var(--line); position: relative; box-shadow: var(--shadow-sm);
}
.compare-card.before { transform: rotate(-1deg); }
.compare-card.after { transform: rotate(1deg); }
.compare-flag {
    position: absolute; top: -14px; left: 24px; background: var(--ink-mute); color: var(--white);
    padding: 6px 18px; border-radius: 20px; font-size: .8rem; letter-spacing: 2px; font-weight: 500;
}
.compare-flag.flag-after { background: var(--lotus-deep); }
/* 网页骨架 mock */
.compare-mock {
    background: var(--cream-2); border-radius: 10px; padding: 14px; margin: 16px 0 22px; min-height: 200px;
}
.mock-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--cream-3); }
.mock-bar span:nth-child(1) { background: var(--lotus-deep); }
.mock-bar span:nth-child(2) { background: var(--sage-deep); }
.mock-hero {
    height: 70px; border-radius: 6px; margin-bottom: 12px;
}
.mock-before .mock-hero { background: repeating-linear-gradient(45deg, #d4c5b5 0 8px, #c9b8a6 8px 16px); }
.mock-after .mock-hero {
    background: linear-gradient(135deg, var(--lotus-soft), var(--sage-soft));
}
.mock-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mock-row span { height: 36px; border-radius: 4px; }
.mock-before .mock-row span { background: #c9b8a6; }
.mock-after .mock-row span { background: var(--sage-soft); }
.mock-text { display: flex; flex-direction: column; gap: 6px; }
.mock-text span { height: 8px; border-radius: 4px; }
.mock-before .mock-text span { background: #cdbfae; }
.mock-before .mock-text span:nth-child(2) { width: 80%; }
.mock-before .mock-text span:nth-child(3) { width: 60%; }
.mock-after .mock-text span { background: var(--lotus); }
.mock-after .mock-text span:nth-child(2) { width: 75%; }
.mock-after .mock-text span:nth-child(3) { width: 55%; }
.compare-points { display: flex; flex-direction: column; gap: 10px; }
.compare-points li {
    position: relative; padding-left: 22px; font-size: .9rem; color: var(--ink-soft);
}
.compare-points li::before {
    content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--lotus-deep);
}
.compare-card.after .compare-points li::before { background: var(--sage-deep); }
/* 中间箭头 */
.compare-arrow {
    display: grid; place-items: center; align-self: center;
}
.compare-arrow svg { width: 56px; height: 56px; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .ds-block:nth-of-type(1),
    .ds-block:nth-of-type(2),
    .ds-block:nth-of-type(3) {
        margin-left: 0; margin-right: 0; transform: none;
    }
    .color-array { grid-template-columns: repeat(4, 1fr); gap: 22px 16px; }
    .ui-steps { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .ui-steps::before { display: none; }
    .compare-pair { grid-template-columns: 1fr; }
    .compare-arrow { transform: rotate(90deg); padding: 10px 0; }
    .compare-card.before, .compare-card.after { transform: none; }
}
@media (max-width: 720px) {
    .type-row { grid-template-columns: 70px 1fr; }
    .type-row .t-meta { grid-column: 2; text-align: left; margin-top: 4px; }
    .comp-group { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
    .ui-banner-visual { height: 260px; }
    .color-array { grid-template-columns: repeat(2, 1fr); }
    .swatch .dot { width: 64px; height: 64px; }
    .ui-steps { grid-template-columns: 1fr; }
    .ds-block { padding: 28px 22px; }
    .compare-card { padding: 22px; }
    .ui-banner h1 { font-size: 1.8rem; }
}