@charset "utf-8";
/* ==========================================================================
   skin.css  -  Skin Concern hub, concern guide (EN + Burmese), Skin Quiz, Result
   Design: SkinConcern, SkinConcernAcne, SkinConcernAcneMM, SkinQuiz, SkinQuizResult
   Shared from module.css: c-notice, c-ask, c-pillnav, c-grid, product card
   ========================================================================== */

/* ---------- shared ---------- */
.sk, .skd, .qr { padding-bottom: .56rem; }
.sk-head {
    padding: .2rem 0 .24rem;
    background: var(--c-warm);
}
.sk-head_title {
    margin-top: .08rem;
    font-size: .28rem;
    line-height: .36rem;
    font-weight: 700;
    text-transform: uppercase;
}
.sk-head_lead {
    max-width: 6rem;
    margin-top: .04rem;
    font-size: .14rem;
    line-height: .2rem;
    color: var(--c-ink-muted);
}
.sk-sec, .skd-sec, .qr-sec { margin-top: .44rem; }
.sk-sec_lead {
    margin: .04rem 0 .16rem;
    font-size: .13rem;
    line-height: .2rem;
    color: var(--c-ink-muted);
}
.sk-notice { margin-top: .4rem; }
.sk-notice_list {
    display: grid;
    gap: .04rem;
    margin-top: .08rem;
    padding-left: .16rem;
    list-style: disc;
    font-size: .12rem;
    line-height: .18rem;
    color: var(--c-ink-muted);
}
.sk .c-ask, .skd .c-ask, .qr .c-ask { margin-top: .32rem; }
.skd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    height: .44rem;
    padding: 0 .2rem;
    border-radius: .06rem;
    background: var(--c-ink);
    font-size: .14rem;
    font-weight: 600;
    color: var(--c-white);
    white-space: nowrap;
    transition: background-color var(--dur);
}
.skd-btn img { width: .18rem; filter: invert(1); }
.skd-btn:hover { background: #3A3531; }
.skd-btn.is-added { background: var(--c-sage-dark); }

/* ---------- hub ---------- */
.sk-quizband {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .14rem;
    margin-top: .24rem;
    padding: .18rem .16rem;
    border-radius: .12rem;
    background: var(--c-ink);
    color: var(--c-white);
}
.sk-quizband_icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    background: var(--c-gold);
    font-size: .22rem;
    font-weight: 700;
    color: var(--c-ink);
}
.sk-quizband_text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .02rem;
    min-width: 0;
}
.sk-quizband_kicker {
    font-size: .1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-gold);
}
.sk-quizband_title {
    font-size: .17rem;
    line-height: .24rem;
    font-weight: 700;
}
.sk-quizband_sub {
    font-size: .12rem;
    line-height: .18rem;
    color: var(--c-on-ink);
}
.sk-quizband_dots { display: flex; gap: .04rem; margin-top: .04rem; }
.sk-quizband_dots i {
    width: .14rem;
    height: 3px;
    border-radius: 2px;
    background: #57534E;
}
.sk-quizband_dots i:first-child { width: .3rem; background: var(--c-gold); }
.sk-quizband_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: .44rem;
    border-radius: .06rem;
    background: var(--c-gold);
    font-size: .14rem;
    font-weight: 700;
    color: var(--c-ink);
    transition: transform var(--dur) var(--ease);
}
.sk-quizband:hover .sk-quizband_btn { transform: translateX(.03rem); }

.sk-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .12rem;
}
.sk-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: .1rem;
    background: var(--c-white);
    transition: box-shadow var(--dur), transform var(--dur) var(--ease);
}
.sk-tile:hover {
    transform: translateY(-.02rem);
    box-shadow: var(--shadow-card);
}
.sk-tile_img {
    position: relative;
    display: grid;
    place-items: center;
    height: 1rem;
    background: var(--tile);
}
.sk-tile_icon {
    display: grid;
    place-items: center;
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: #fff;
}
.sk-tile_icon .icon { width: .26rem; height: .26rem; }
.sk-tile_ph {
    position: absolute;
    bottom: .04rem;
    font-size: .09rem;
    color: var(--c-ink-muted);
}
.sk-tile_body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .02rem;
    padding: .1rem .12rem .12rem;
}
.sk-tile_name {
    font-size: .14rem;
    line-height: .2rem;
    font-weight: 700;
}
.sk-tile_text {
    font-size: .11rem;
    line-height: .16rem;
    color: var(--c-ink-muted);
}
.sk-tile_count {
    margin-top: auto;
    padding-top: .06rem;
    font-size: .12rem;
    font-weight: 600;
}
.sk-tile--ask {
    align-items: center;
    justify-content: center;
    gap: .06rem;
    padding: .16rem .1rem;
    background: var(--c-warm);
    text-align: center;
}
.sk-tile_askicon {
    display: grid;
    place-items: center;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--c-ink);
    color: var(--c-white);
}
.sk-tile_askicon .icon { width: .2rem; height: .2rem; }

.sk-ings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .08rem;
}
.sk-ing {
    display: flex;
    align-items: center;
    gap: .1rem;
    height: 100%;
    padding: .1rem .12rem;
    border: 1px solid var(--c-line);
    border-radius: .08rem;
    font-size: .11rem;
    line-height: .16rem;
    color: var(--c-ink-muted);
    transition: border-color .2s;
}
.sk-ing:hover { border-color: var(--c-ink); }
.sk-ing strong {
    display: block;
    font-size: .13rem;
    line-height: .18rem;
    font-weight: 600;
    color: var(--c-ink);
}
.sk-ing_icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: #E6EBE7;
    color: var(--c-sage-dark);
}
.sk-ing_icon .icon { width: .16rem; height: .16rem; }

/* ---------- concern guide ---------- */
.skd-sample {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .08rem;
    padding: .08rem var(--side);
    background: var(--c-ink);
    font-size: .12rem;
    line-height: .18rem;
    color: var(--c-white);
}
.skd-sample span {
    padding: .01rem .06rem;
    border-radius: 2px;
    background: var(--c-gold);
    color: var(--c-ink);
    font-size: .1rem;
    font-weight: 700;
    text-transform: uppercase;
}
.skd-sample a { font-weight: 700; color: var(--c-gold); text-decoration: underline; }
.skd-langbar {
    padding: .06rem var(--side);
    background: var(--c-warm);
    border-bottom: 1px solid var(--c-line);
    text-align: right;
    font-size: .13rem;
}
.skd-langbar a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--c-gold);
    text-underline-offset: .04rem;
}
.is-my .sk-head_lead,
.is-my .sk-sec_lead,
.is-my .qz-q_sub,
.is-my .qr-profile_desc { line-height: 1.75; }
.is-my .qz-opt_title,
.is-my .qz-q_title { line-height: 1.6; }
.skd-head {
    padding: .16rem 0 .28rem;
    background: var(--c-warm);
}
.skd-nav { margin-top: .12rem; }
.skd-hero {
    display: grid;
    gap: .2rem;
    margin-top: .24rem;
}
.skd-kicker {
    font-size: .11rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.skd-hero_title {
    margin-top: .04rem;
    font-size: .28rem;
    line-height: .36rem;
    font-weight: 700;
    text-transform: uppercase;
}
.skd-hero_intro {
    margin-top: .1rem;
    font-size: .15rem;
    line-height: .24rem;
}
.is-my .skd-hero_intro { line-height: .3rem; }
.skd-hero_btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .12rem;
    margin-top: .18rem;
}
.skd-lang {
    display: flex;
    align-items: center;
    height: .44rem;
    padding: 0 .16rem;
    border: 1px solid var(--c-ink);
    border-radius: .06rem;
    font-size: .14rem;
    font-weight: 600;
}
.skd-lang:hover { background: var(--c-white); }
.skd-hero_img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    min-height: 1.8rem;
    border-radius: .1rem;
    background: var(--tile);
    font-size: .1rem;
    color: var(--c-ink-muted);
}
.skd-hero_icon {
    display: grid;
    place-items: center;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: #fff;
    color: var(--c-ink);
}
.skd-hero_icon .icon { width: .4rem; height: .4rem; }

.skd-signs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .1rem;
}
.skd-signs li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .08rem;
    height: 100%;
    padding: .16rem .1rem;
    border: 1px solid var(--c-line);
    border-radius: .08rem;
    text-align: center;
}
.skd-signs_icon {
    display: grid;
    place-items: center;
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #F6E3DE;
}
.skd-signs_icon .icon { width: .22rem; height: .22rem; }
.skd-signs strong {
    font-size: .13rem;
    line-height: .18rem;
    font-weight: 700;
}
.is-my .skd-signs strong { line-height: .24rem; }
.skd-en {
    font-size: .11rem;
    color: var(--c-ink-muted);
}
.skd-ings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .1rem;
}
.skd-ings li {
    display: flex;
    flex-direction: column;
    gap: .04rem;
    height: 100%;
    padding: .14rem .12rem;
    border-radius: .08rem;
    background: var(--ing);
    font-size: .12rem;
    line-height: .18rem;
}
.is-my .skd-ings li { line-height: .24rem; }
.skd-ings_icon {
    display: grid;
    place-items: center;
    width: .3rem;
    height: .3rem;
    margin-bottom: .04rem;
    border-radius: 50%;
    background: #fff;
}
.skd-ings_icon .icon { width: .16rem; height: .16rem; }
.skd-ings strong { font-size: .14rem; font-weight: 700; }
.skd-ings a {
    margin-top: auto;
    padding-top: .04rem;
    font-weight: 700;
}
.skd-ings a:hover { text-decoration: underline; }

.skd-routines {
    display: grid;
    gap: .16rem;
}
.skd-routine {
    display: flex;
    flex-direction: column;
    padding: .16rem .14rem;
    border: 1px solid var(--c-line);
    border-radius: .1rem;
}
.skd-routine_head {
    display: flex;
    align-items: center;
    gap: .12rem;
    padding-bottom: .12rem;
}
.skd-routine_head h3 { font-size: .18rem; line-height: .24rem; font-weight: 700; }
.skd-routine_head p { font-size: .12rem; color: var(--c-ink-muted); }
.skd-routine_icon {
    display: grid;
    place-items: center;
    width: .36rem;
    height: .36rem;
    border-radius: 50%;
    background: var(--c-warm);
}
.skd-routine_icon .icon { width: .18rem; height: .18rem; }
.skd-steps { display: flex; flex-direction: column; }
.skd-step {
    display: grid;
    grid-template-columns: .5rem .48rem minmax(0, 1fr) .32rem;
    gap: .1rem;
    align-items: center;
    padding: .12rem 0;
    border-top: 1px solid var(--c-line);
}
.skd-step_num {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .02rem;
    font-size: .1rem;
    line-height: .13rem;
    font-weight: 600;
    text-align: center;
    color: var(--c-ink-muted);
}
.skd-step_num b {
    display: grid;
    place-items: center;
    width: .22rem;
    height: .22rem;
    border-radius: 50%;
    background: var(--c-ink);
    font-size: .11rem;
    color: var(--c-white);
}
.skd-step_img {
    display: block;
    width: .48rem;
    height: .48rem;
    overflow: hidden;
    border-radius: .06rem;
    background: var(--c-canvas);
}
.skd-step_img img { width: 100%; height: 100%; object-fit: cover; }
.skd-step_info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: .11rem;
    line-height: .16rem;
}
.skd-step_brand { font-weight: 600; color: var(--c-gold); }
.skd-step_name {
    font-size: .13rem;
    line-height: .18rem;
    font-weight: 700;
}
.skd-step_name:hover { text-decoration: underline; }
.skd-step_note { color: var(--c-ink-muted); }
.is-my .skd-step_note { line-height: .2rem; }
.skd-step_price {
    font-size: .13rem;
    font-weight: 700;
    color: var(--c-coral);
}
.skd-step_price small { font-size: .1rem; font-weight: 500; color: var(--c-ink); }
.skd-step_cart {
    display: grid;
    place-items: center;
    width: .32rem;
    height: .32rem;
    border: 1px solid var(--c-ink);
    border-radius: .04rem;
    transition: background-color var(--dur), border-color var(--dur);
}
.skd-step_cart img { width: .16rem; }
.skd-step_cart:hover { background: var(--c-warm); }
.skd-step_cart.is-added { border-color: var(--c-sage-dark); background: #E6EBE7; }
.skd-routine_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .12rem;
    margin-top: auto;
    padding-top: .14rem;
    border-top: 2px solid var(--c-ink);
}
.skd-routine_foot p {
    display: flex;
    flex-direction: column;
    font-size: .12rem;
    color: var(--c-ink-muted);
}
.skd-routine_foot strong {
    font-size: .2rem;
    line-height: .26rem;
    font-weight: 700;
    color: var(--c-ink);
}
.skd-routine_foot small { font-size: .11rem; font-weight: 500; }

.skd-dd {
    display: grid;
    gap: .12rem;
    margin-top: .16rem;
}
.skd-dd_box {
    padding: .16rem;
    border-radius: .1rem;
    font-size: .13rem;
    line-height: .2rem;
}
.is-my .skd-dd_box { line-height: .26rem; }
.skd-dd_box--do { background: #E8EFE6; }
.skd-dd_box--dont { background: #FBE9E4; }
.skd-dd_title {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-bottom: .1rem;
    font-size: .16rem;
    font-weight: 700;
}
.skd-dd_title span {
    display: grid;
    place-items: center;
    width: .26rem;
    height: .26rem;
    border-radius: 50%;
    color: var(--c-white);
}
.skd-dd_title .icon { width: .14rem; height: .14rem; stroke-width: 2.5; }
.skd-dd_box--do .skd-dd_title span { background: var(--c-sage-dark); }
.skd-dd_box--dont .skd-dd_title span { background: var(--c-coral); }
.skd-dd_box ul {
    display: flex;
    flex-direction: column;
    gap: .06rem;
    padding-left: .16rem;
    list-style: square;
}
.skd-dd_box--do li::marker { color: var(--c-sage-dark); }
.skd-dd_box--dont li::marker { color: var(--c-coral); }

.skd-qa {
    margin-top: .16rem;
    border-top: 2px solid var(--c-ink);
}
.skd-qa_item { border-bottom: 1px solid var(--c-line); }
.skd-qa_q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .12rem;
    width: 100%;
    min-height: .52rem;
    padding: .1rem 0;
    font-size: .15rem;
    line-height: .22rem;
    font-weight: 700;
    text-align: left;
}
.skd-pm {
    position: relative;
    flex-shrink: 0;
    width: .14rem;
    height: .14rem;
}
.skd-pm::before,
.skd-pm::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    margin-top: -.75px;
    background: var(--c-ink);
    transition: transform var(--dur) var(--ease);
}
.skd-pm::after { transform: rotate(90deg); }
[aria-expanded="true"] > .skd-pm::after { transform: rotate(0); }
.skd-qa_a {
    max-width: 6rem;
    padding-bottom: .16rem;
    font-size: .14rem;
    line-height: .22rem;
    color: var(--c-ink-muted);
}
.is-my .skd-qa_a { line-height: .28rem; }

/* ---------- quiz ---------- */
.qz { padding: .2rem 0 .56rem; background: var(--c-warm); }
.qz_inner {
    width: 100%;
    max-width: calc(8rem + var(--side) * 2);
    margin: 0 auto;
    padding: 0 var(--side);
}
.qz-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.qz-top_back {
    display: flex;
    align-items: center;
    gap: .04rem;
    justify-self: start;
    min-height: .44rem;
    font-size: .14rem;
    font-weight: 500;
}
.qz-top_back .icon { width: .18rem; height: .18rem; }
.qz-top_title {
    grid-column: 2;
    font-size: .12rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.qz-top_close {
    display: grid;
    place-items: center;
    justify-self: end;
    width: .44rem;
    height: .44rem;
}
.qz-top_close .icon { width: .22rem; height: .22rem; }
.qz-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .04rem;
    margin-top: .08rem;
}
.qz-bar span {
    height: 4px;
    border-radius: 2px;
    background: var(--c-line);
    transition: background-color .4s var(--ease);
}
.qz-bar .is-done { background: var(--c-ink); }
.qz-bar .is-on { background: var(--c-gold); }
.qz-count {
    margin-top: .12rem;
    font-size: .13rem;
    color: var(--c-ink-muted);
}
.qz-answers {
    display: flex;
    flex-wrap: wrap;
    gap: .04rem .14rem;
    margin-top: .06rem;
    font-size: .12rem;
}
.qz-answers li { display: flex; align-items: center; gap: .06rem; }
.qz-answers strong {
    display: inline-flex;
    align-items: center;
    padding: .02rem .1rem;
    border: 1px solid var(--c-line);
    border-radius: 9999px;
    background: var(--c-white);
}
.qz-answers .icon { width: .14rem; height: .14rem; color: var(--c-sage-dark); }
.qz-answers b { color: var(--c-ink-muted); font-weight: 600; }
.qz-answers strong { font-weight: 700; }
.qz-answers button { font-weight: 600; text-decoration: underline; }
.qz-form { margin-top: .16rem; }
.qz-q {
    min-width: 0;
    margin: 0 0 .16rem;
    padding: .24rem .16rem;
    border: 0;
    border-radius: .12rem;
    background: var(--c-white);
    box-shadow: var(--shadow-card);
}
.js .qz-q:not(.is-current) { display: none; }
.js .qz-q.is-current { animation: qz-in .35s var(--ease); }
.qz-q_title {
    float: left;
    width: 100%;
    font-size: .22rem;
    line-height: .3rem;
    font-weight: 700;
}
.qz-q_sub {
    clear: both;
    padding-top: .06rem;
    font-size: .13rem;
    line-height: .2rem;
    color: var(--c-ink-muted);
}
.qz-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .1rem;
    margin-top: .2rem;
}
.qz-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .04rem;
    padding: .14rem .12rem;
    border: 1px solid var(--c-line);
    border-radius: .1rem;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.qz-opt:hover { border-color: #A8A29E; }
.qz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qz-opt_icon {
    display: grid;
    place-items: center;
    width: .4rem;
    height: .4rem;
    margin-bottom: .06rem;
    border-radius: 50%;
    background: var(--c-warm);
}
.qz-opt_icon .icon { width: .2rem; height: .2rem; }
.qz-opt_title { font-size: .14rem; line-height: .2rem; font-weight: 700; }
.qz-opt_sub { font-size: .12rem; color: var(--c-ink-muted); }
.qz-opt_check {
    position: absolute;
    right: .1rem;
    top: .1rem;
    display: grid;
    place-items: center;
    width: .22rem;
    height: .22rem;
    border-radius: 50%;
    background: var(--c-ink);
    color: var(--c-white);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s, transform .25s var(--ease);
}
.qz-opt_check .icon { width: .13rem; height: .13rem; stroke-width: 2.6; }
.qz-opt:has(input:checked) {
    padding: .13rem .11rem;
    border: 2px solid var(--c-ink);
    background: #FFFDF8;
}
.qz-opt:has(input:checked) .qz-opt_icon { background: #FBF3DC; }
.qz-opt:has(input:checked) .qz-opt_check { opacity: 1; transform: none; }
.qz-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.qz-q_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .12rem;
    margin-top: .2rem;
}
.qz-skip {
    min-height: .44rem;
    font-size: .13rem;
    color: var(--c-ink-muted);
    text-decoration: underline;
    text-underline-offset: .03rem;
}
.qz-next {
    height: .48rem;
    padding: 0 .24rem;
    border-radius: .06rem;
    background: var(--c-ink);
    font-size: .15rem;
    font-weight: 600;
    color: var(--c-white);
    transition: opacity var(--dur), background-color var(--dur);
}
.qz-next:disabled { opacity: .3; cursor: default; }
.qz-next:not(:disabled):hover { background: #3A3531; }
.js .qz-nojs { display: none; }
html:not(.js) .js-qz-skip,
html:not(.js) .js-qz-next { display: none; }
.qz-note {
    margin-top: .12rem;
    font-size: .12rem;
    line-height: .18rem;
    text-align: center;
    color: var(--c-ink-muted);
}
.qz-talk {
    margin-top: .16rem;
    font-size: .13rem;
    text-align: center;
    color: var(--c-ink-muted);
}
.qz-talk a {
    font-weight: 700;
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: var(--c-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: .04rem;
}
@keyframes qz-in {
    from { opacity: 0; transform: translateX(.16rem); }
    to   { opacity: 1; transform: none; }
}

/* ---------- result ---------- */
.qr { padding-top: .16rem; }
.qr-profile {
    display: grid;
    gap: .2rem;
    margin-top: .12rem;
    padding: .24rem .18rem;
    border-radius: .14rem;
    background: var(--c-ink);
    color: var(--c-white);
}
.qr-kicker {
    font-size: .11rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-gold);
}
.qr-profile_title {
    margin-top: .06rem;
    font-size: .26rem;
    line-height: .34rem;
    font-weight: 700;
}
.qr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .06rem;
    margin-top: .12rem;
}
.qr-tags span {
    padding: .03rem .12rem;
    border-radius: 9999px;
    background: var(--c-white);
    font-size: .12rem;
    font-weight: 700;
    color: var(--c-ink);
}
.qr-tags span:nth-child(2) { background: #F6E3DE; }
.qr-tags span:nth-child(3) { background: #E6EBE7; }
.qr-profile_desc {
    margin-top: .12rem;
    font-size: .14rem;
    line-height: .22rem;
    color: var(--c-on-ink);
}
.qr-profile_btns {
    display: flex;
    flex-direction: column;
    gap: .08rem;
}
.qr-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    height: .48rem;
    border-radius: .06rem;
    background: var(--c-gold);
    font-size: .15rem;
    font-weight: 700;
    color: var(--c-ink);
}
.qr-save .icon { width: .16rem; height: .16rem; }
.qr-retake {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: .44rem;
    font-size: .13rem;
    color: var(--c-on-ink);
    text-decoration: underline;
}
.qr-look {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .06rem;
    font-size: .13rem;
}
.qr-look > span:first-child { font-weight: 700; margin-right: .04rem; }
.qr-look_item {
    padding: .04rem .1rem;
    border: 1px solid var(--c-line);
    border-radius: 9999px;
    color: var(--c-ink-muted);
}
.qr-look_item strong { color: var(--c-ink); font-weight: 700; }
.qr-steps {
    margin-top: .16rem;
    border-top: 1px solid var(--c-line);
}
/* SP: compact rows / PC: cards */
.qr-step {
    padding: .14rem 0;
    border-bottom: 1px solid var(--c-line);
}
.qr-step_head {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-bottom: .1rem;
    font-size: .12rem;
    color: var(--c-ink-muted);
}
.qr-step_head strong {
    flex: 1;
    font-size: .15rem;
    font-weight: 700;
    color: var(--c-ink);
}
.qr-step_num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: .28rem;
    height: .28rem;
    border-radius: 50%;
    background: var(--c-ink);
    font-size: .13rem;
    font-weight: 700;
    color: var(--c-white);
}
.qr-step_when { text-align: right; }
.qr-prod {
    display: grid;
    grid-template-columns: .72rem minmax(0, 1fr) .44rem;
    gap: .12rem;
    align-items: center;
}
.qr-prod_img {
    display: block;
    width: .72rem;
    height: .72rem;
    overflow: hidden;
    border-radius: .06rem;
    background: var(--c-canvas);
}
.qr-prod_img img { width: 100%; height: 100%; object-fit: cover; }
.qr-prod_info { display: flex; flex-direction: column; min-width: 0; }
.qr-prod_brand { font-size: .12rem; font-weight: 600; color: var(--c-gold); }
.qr-prod_name { font-size: .14rem; line-height: .2rem; font-weight: 700; }
.qr-prod_name:hover { text-decoration: underline; }
.qr-prod_price { margin-top: .02rem; font-size: .16rem; font-weight: 700; color: var(--c-coral); }
.qr-prod_price small { font-size: .11rem; font-weight: 500; color: var(--c-ink); }
.qr-prod_cart {
    display: grid;
    place-items: center;
    width: .44rem;
    height: .44rem;
    border: 1px solid var(--c-ink);
    border-radius: .06rem;
    transition: background-color var(--dur), border-color var(--dur);
}
.qr-prod_cart span { display: none; }
.qr-prod_cart img { width: .18rem; }
.qr-prod_cart:hover { background: var(--c-warm); }
.qr-prod_cart.is-added { border-color: var(--c-sage-dark); background: #E6EBE7; }
.qr-total {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    margin-top: .24rem;
    padding: .16rem;
    border: 2px solid var(--c-ink);
    border-radius: .1rem;
}
.qr-total p:first-child {
    display: flex;
    flex-direction: column;
    font-size: .12rem;
    color: var(--c-ink-muted);
}
.qr-total strong { font-size: .24rem; line-height: .3rem; font-weight: 700; color: var(--c-ink); }
.qr-total small { font-size: .12rem; font-weight: 500; }
.qr-total_btns { display: flex; flex-direction: column; gap: .08rem; }
.qr-total_btns .skd-btn { height: .48rem; }
.qr-viber {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    height: .48rem;
    padding: 0 .2rem;
    border: 1px solid var(--c-ink);
    border-radius: .06rem;
    font-size: .14rem;
    font-weight: 600;
}
.qr-over {
    font-size: .12rem;
    color: #7A5F0E;
}
.qr-learn {
    display: flex;
    align-items: center;
    gap: .12rem;
    margin-top: .24rem;
    padding: .14rem .16rem;
    border: 1px solid var(--c-line);
    border-radius: .1rem;
    transition: border-color .2s;
}
.qr-learn:hover { border-color: var(--c-ink); }
.qr-learn_icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    background: #F6E3DE;
}
.qr-learn_icon .icon { width: .22rem; height: .22rem; }
.qr-learn > span:nth-child(2) {
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: .12rem;
    color: var(--c-ink-muted);
}
.qr-learn strong { font-size: .15rem; font-weight: 700; color: var(--c-ink); }
.qr-learn > .icon { width: .18rem; height: .18rem; }

/* ==========================================================================
   Tablet  768px -
   ========================================================================== */
@media (min-width: 768px) {
    .sk, .skd, .qr { padding-bottom: .8rem; }
    .sk-head { padding: .4rem 0; }
    .sk-head_title { font-size: .4rem; line-height: .52rem; }
    .sk-head_lead { font-size: .16rem; line-height: .24rem; }
    .sk-sec, .skd-sec, .qr-sec { margin-top: .64rem; }
    .sk-sec_lead { margin-bottom: .24rem; font-size: .14rem; }
    .sk-notice { margin-top: .56rem; }
    .sk-notice_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .04rem .24rem; font-size: .13rem; }
    .sk .c-ask, .skd .c-ask, .qr .c-ask { margin-top: .48rem; }
    .sk-quizband { flex-wrap: nowrap; margin-top: .32rem; padding: .24rem .28rem; gap: .2rem; }
    .sk-quizband_icon { width: .56rem; height: .56rem; font-size: .26rem; }
    .sk-quizband_title { font-size: .22rem; line-height: .3rem; }
    .sk-quizband_sub { font-size: .13rem; }
    .sk-quizband_btn { width: auto; padding: 0 .22rem; flex-shrink: 0; }
    .sk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .16rem; }
    .sk-tile_img { height: 1.6rem; }
    .sk-tile_icon { width: .72rem; height: .72rem; }
    .sk-tile_icon .icon { width: .32rem; height: .32rem; }
    .sk-tile_body { padding: .12rem .14rem .14rem; }
    .sk-tile_name { font-size: .16rem; line-height: .22rem; }
    .sk-tile_text { font-size: .12rem; }
    .sk-ings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .12rem; }
    .sk-ing { padding: .12rem .14rem; font-size: .12rem; }
    .sk-ing strong { font-size: .14rem; }

    .skd-sample { font-size: .13rem; }
    .skd-head { padding: .24rem 0 .4rem; }
    .skd-hero {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: center;
        gap: .4rem;
        margin-top: .32rem;
    }
    .skd-hero_title { font-size: .4rem; line-height: .5rem; }
    .skd-hero_intro { font-size: .16rem; line-height: .26rem; }
    .is-my .skd-hero_intro { line-height: .34rem; }
    .skd-hero_img { min-height: 2.6rem; }
    .skd-signs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .16rem; }
    .skd-signs li { padding: .24rem .14rem; }
    .skd-signs_icon { width: .56rem; height: .56rem; }
    .skd-signs strong { font-size: .14rem; }
    .skd-ings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .16rem; }
    .skd-ings li { padding: .16rem; font-size: .13rem; }
    .skd-routines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; }
    .skd-routine { padding: .2rem; }
    .skd-step { grid-template-columns: .56rem .56rem minmax(0, 1fr) .36rem; }
    .skd-step_img { width: .56rem; height: .56rem; }
    .skd-step_name { font-size: .14rem; line-height: .2rem; }
    .skd-step_cart { width: .36rem; height: .36rem; }
    .skd-dd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; margin-top: .24rem; }
    .skd-dd_box { padding: .2rem .24rem; font-size: .14rem; }
    .skd-qa { margin-top: .24rem; }
    .skd-qa_q { font-size: .16rem; min-height: .6rem; }

    .qz { padding: .32rem 0 .8rem; }
    .qz-q { padding: .32rem .32rem .28rem; }
    .qz-q_title { font-size: .28rem; line-height: .36rem; }
    .qz-q_sub { font-size: .14rem; }
    .qz-opts { gap: .14rem; }
    .qz-opts--many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qz-opt { padding: .18rem .16rem; }
    .qz-opt:has(input:checked) { padding: .17rem .15rem; }
    .qz-opt_title { font-size: .16rem; line-height: .22rem; }
    .qz-opt_sub { font-size: .13rem; }

    .qr-profile {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: .32rem;
        align-items: center;
        padding: .36rem .44rem;
    }
    .qr-profile_title { font-size: .36rem; line-height: .44rem; }
    .qr-profile_desc { max-width: 5.6rem; font-size: .15rem; }
    .qr-profile_btns { align-items: center; }
    .qr-save { padding: 0 .22rem; }
    .qr-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .2rem;
        border-top: 0;
    }
    .qr-step { padding: 0; border-bottom: 0; }
    .qr-step_head { flex-wrap: wrap; row-gap: 0; }
    .qr-step_head strong { flex: none; }
    .qr-step_when { width: 100%; padding-left: .38rem; text-align: left; }
    .qr-prod {
        grid-template-columns: 1fr;
        gap: 0;
        overflow: hidden;
        border-radius: .08rem;
        background: var(--c-white);
        box-shadow: var(--shadow-card);
    }
    .qr-prod_img { width: 100%; height: 2.6rem; border-radius: 0; }
    .qr-prod_info { padding: .14rem .16rem .08rem; }
    .qr-prod_name { min-height: .4rem; font-size: .15rem; }
    .qr-prod_price { font-size: .18rem; }
    .qr-prod_cart {
        display: flex;
        justify-content: center;
        gap: .08rem;
        width: auto;
        margin: .06rem .16rem .16rem;
        font-size: .14rem;
        font-weight: 500;
    }
    .qr-prod_cart span { display: inline; }
    .qr-total {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: .16rem .2rem;
    }
    .qr-total_btns { flex-direction: row; }
    .qr-over { width: 100%; }
    .qr-learn { padding: .16rem .2rem; }
}