/* /_app/kit.css — 기본 디자인 (3-9). 스킨에 {{hero}} 또는 <body class="aml-kit"> 가 있으면 사이트가 base.css 뒤에 넣는다. 스킨은 :root 의 --aml-* 색 변수만 정하면 된다. */
/* 5 머리 영역 {{hero}} — 프로필 동그라미 + 이름·아티스트·곡 수·소개·SNS·[전체 재생][섞어 재생] */
.aml-hero{--_hink:color-mix(in srgb,var(--_ink) 15%,var(--_ink2));position:relative;padding:32px 32px 28px;background:linear-gradient(to bottom,color-mix(in srgb,var(--aml-hero-c,var(--_bg)) var(--aml-hero-a,8%),var(--_bg)),var(--_bg));color:var(--_ink)}
.aml-hero-in{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-areas:"pic name" "pic meta" "pic desc" "pic soc" "pic act";column-gap:24px;row-gap:4px;align-items:center;max-width:calc(var(--aml-max,1100px) - 64px);margin:0 auto}
.aml-hero-in>*{min-width:0}
.aml-hero .aml-profile{grid-area:pic;width:128px;height:128px;align-self:center}
.aml-profile.is-letter{display:grid;place-items:center;border-radius:50%;background:var(--aml-letter-c,#5b5f73);color:#fff;font-weight:700;font-size:48px;line-height:1;user-select:none}
.aml-hero-name{grid-area:name;margin:0;font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.015em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aml-hero-meta{grid-area:meta;margin:0;min-height:1.4em;font-size:13px;color:var(--_hink)}
.aml-hero-meta>span+span::before{content:" · "}
.aml-hero-desc{grid-area:desc;position:relative;margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--_hink);max-width:640px}
.aml-hero-desc p{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere}
.aml-hero-desc.is-open p{display:block}
.aml-hero-more{position:absolute;right:0;bottom:0;padding:0 0 0 2.2em;border:0;background:linear-gradient(90deg,transparent,var(--_bg) 1.6em);color:var(--_ink);font:700 13px/1.4 var(--aml-font,inherit);cursor:pointer}
.aml-hero-desc:not(.has-more) .aml-hero-more,.aml-hero-desc.is-open .aml-hero-more{display:none}
.aml-hero .aml-socials{grid-area:soc;display:flex;flex-wrap:nowrap;gap:14px;margin:8px 0 0;overflow-x:auto;scrollbar-width:none}
.aml-hero .aml-socials::-webkit-scrollbar{display:none}
.aml-hero .aml-social-icon{width:22px;height:22px}
.aml-hero-actions{grid-area:act;display:flex;gap:8px;min-height:36px;margin-top:12px}
.aml-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 18px;border:0;border-radius:999px;font:600 15px/1 var(--aml-font,inherit);white-space:nowrap;cursor:pointer;background:var(--_pn);color:var(--_ink);text-decoration:none}
.aml-btn .aml-ic{width:16px;height:16px;fill:currentColor}
.aml-btn-primary{background:var(--_acf);color:var(--_aci)}
.aml-btn:active{transform:scale(.97)}
@media (max-width:733px){.aml-hero{padding:16px}.aml-banner+.aml-hero,.aml-banner~.aml-hero{padding-top:10px;padding-bottom:10px}
.aml-hero-in{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"pic name" "pic meta" "pic soc" "desc desc" "act act";column-gap:14px;row-gap:2px}
.aml-hero .aml-profile{width:72px;height:72px;grid-row:1/4}.aml-profile.is-letter{font-size:30px}
.aml-hero-name{font-size:20px;line-height:1.2;align-self:end}.aml-hero-meta{align-self:start}
.aml-hero .aml-socials{margin:4px 0 0;gap:16px}.aml-hero .aml-social-icon{width:24px;height:24px}
.aml-hero-desc{margin-top:6px;line-height:1.35}.aml-hero-actions{margin-top:8px}.aml-hero-actions .aml-btn{flex:1;max-width:220px}}
/* 7 .aml-kit — 기본 디자인 (스킨은 :root 의 --aml-* 색 변수만 정하면 된다) */
.aml-kit{margin:0;background:var(--_bg);color:var(--_ink);font:400 15px/1.47 var(--aml-font,system-ui,sans-serif);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.aml-kit *,.aml-kit *::before,.aml-kit *::after{box-sizing:border-box}
html:lang(ko) .aml-kit,html:lang(ja) .aml-kit,html:lang(zh) .aml-kit{line-height:1.55}
:where(.aml-kit) a{color:var(--_ac)}
.aml-kit :focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--_ac) 40%,transparent);border-radius:8px}
.aml-kit .aml-banner-img{height:min(28vw,220px)}
.aml-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;padding:8px max(16px,calc((100% - var(--aml-max,1100px))/2 + 32px));background:var(--_gl);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.aml-kit .aml-menu{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0}
.aml-kit .aml-menu::-webkit-scrollbar{display:none}
.aml-kit .aml-menu-item{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--_pn);color:var(--_ink);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.aml-kit .aml-menu-item:hover{background:var(--_p3)}
.aml-kit .aml-menu-item.is-active{background:var(--_ink);color:var(--_bg)}
.aml-kit .aml-lang{flex:none}.aml-lang[hidden]{display:none}
.aml-kit .aml-lang-select{height:32px;max-width:120px;padding:0 10px;border:0;border-radius:999px;background:var(--_pn);color:var(--_ink);font:500 13px var(--aml-font,inherit)}
.aml-kit .aml-content:empty{min-height:100vh}
.aml-kit .aml-content{display:block;max-width:var(--aml-max,1100px);margin:0 auto;padding:12px 32px 40px}
.aml-kit .aml-section{margin:0 0 32px}
.aml-kit .aml-section-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 0 12px;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.aml-kit .aml-empty{display:block;text-align:center;color:var(--_ink2);padding:40px 16px}
.aml-kit .aml-empty-ic{display:block;width:48px;height:48px;margin:0 auto 12px;opacity:.55;color:var(--_ink2)}
.aml-kit .aml-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.aml-kit .aml-track{display:grid;grid-template-columns:56px minmax(0,max-content) minmax(0,1fr) auto auto;grid-template-areas:"art title title tools time" "art who tags tools time";align-items:center;height:72px;padding:0 8px;border-radius:12px;background:var(--_pn);cursor:pointer;overflow:hidden}
.aml-kit .aml-track:hover{background:color-mix(in srgb,var(--_ink) 4%,var(--_pn))}
.aml-kit .aml-track.is-playing{background:color-mix(in srgb,var(--_ac) 9%,var(--_pn))}
.aml-kit .aml-track:hover,.aml-kit .aml-track.is-playing{--_ink2:color-mix(in srgb,var(--_ink) 35%,var(--aml-muted,#6e6e73))}
.aml-kit .aml-track-main{display:contents}
.aml-kit .aml-play{grid-area:art;width:56px;height:56px;border:0;border-radius:8px;background:var(--_p3);cursor:pointer}
.aml-kit .aml-play::after{content:"";position:absolute;inset:0;background:rgb(0 0 0/.38);opacity:0;transition:opacity .15s}
.aml-kit .aml-play::before{content:"";position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;opacity:0;z-index:2;transition:opacity .15s}
.aml-kit .aml-track:hover .aml-play::after,.aml-kit .aml-track:hover .aml-play::before,.aml-kit .aml-play:focus-visible::after,.aml-kit .aml-play:focus-visible::before{opacity:1}
.aml-kit .aml-track-title{grid-area:title;align-self:end;margin-left:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aml-kit .aml-track-artist{grid-area:who;align-self:start;margin-left:12px;font-size:13px;color:var(--_ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aml-kit .aml-genres{grid-area:tags;align-self:start;font-size:13px;color:var(--_ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aml-kit .aml-genres::before,.aml-kit .aml-genre+.aml-genre::before,.aml-kit .aml-genres .aml-ext::before{content:"\00a0·\00a0"}
.aml-kit .aml-genre{display:inline}
.aml-kit .aml-genres .aml-ext{display:inline;border:0;padding:0;font-size:inherit;color:inherit;opacity:1;max-width:none;vertical-align:baseline}
.aml-kit .aml-track-tools{grid-area:tools;position:static;transform:none;margin-left:8px;color:var(--_ink2)}
.aml-kit .aml-track-time{grid-area:time;min-width:40px;margin:0 6px 0 4px;text-align:right;font-size:13px;color:var(--_ink2);font-variant-numeric:tabular-nums}
.aml-kit .aml-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px 16px}
.aml-kit .aml-view-home-albums .aml-albums{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:168px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.aml-kit .aml-album{display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;scroll-snap-align:start;min-width:0}
.aml-kit .aml-album-cover{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--_p3);box-shadow:var(--aml-art-shadow,0 2px 8px rgb(0 0 0/.12))}
.aml-kit .aml-album-cover.is-empty{background:linear-gradient(135deg,color-mix(in srgb,var(--_ac) 35%,var(--_p3)),var(--_p3))}
.aml-kit .aml-album-title{margin-top:8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aml-kit .aml-album-artist{margin:0;font-size:13px;color:var(--_ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aml-kit .aml-album-head{display:flex;gap:28px;align-items:flex-end;margin:12px 0 24px}
.aml-kit .aml-album-head .aml-album-cover{width:240px;flex:none;border-radius:12px}
.aml-kit .aml-album-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.aml-kit .aml-album-info .aml-section-title{margin:0;font-size:34px;line-height:1.15;letter-spacing:-.015em}
.aml-kit .aml-album-head .aml-album-artist{font-size:17px;color:var(--_ac);font-weight:600}
.aml-kit .aml-album-count{margin:0 0 8px;font-size:13px;color:var(--_ink2)}
.aml-kit .aml-play-all{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:36px;padding:0 18px;border:0;border-radius:999px;background:var(--_acf);color:var(--_aci);font:600 15px/1 var(--aml-font,inherit);cursor:pointer}
.aml-kit .aml-play-all .aml-ic{width:16px;height:16px;fill:currentColor}
.aml-kit .aml-gb-form{padding:16px;border-radius:12px;background:var(--_pn)}
.aml-kit .aml-gb-form input,.aml-kit .aml-gb-form textarea{border:0;background:var(--_bg);padding:10px 12px;border-radius:10px}
.aml-kit .aml-gb-submit{border:0;background:var(--_acf);color:var(--_aci);height:36px;padding:0 18px}
.aml-kit .aml-gb-msg.is-err{color:var(--aml-error,#d70015)}
.aml-kit .aml-gb-post{padding:14px 16px;border:0;border-radius:12px;background:var(--_pn)}
.aml-kit .aml-gb-name{font-weight:600}
.aml-kit .aml-gb-time,.aml-kit .aml-gb-count,.aml-kit .aml-gb-pageno{color:var(--_ink2);opacity:1}
.aml-kit .aml-song-card{border:0;background:var(--_bg)}
.aml-kit .aml-gb-pager button{border:0;background:var(--_pn)}
.aml-kit .aml-view-links .aml-social{border:0;background:var(--_pn);border-radius:12px}
.aml-kit .aml-social.is-highlight{box-shadow:0 0 0 2px var(--_ac)}
.aml-kit .aml-footer{padding:24px 16px 32px;color:var(--_ink2);opacity:1}
@media (max-width:733px){.aml-kit .aml-content{padding:8px 16px 32px}.aml-kit .aml-section-title{font-size:20px;margin:8px 0 10px}
.aml-kit .aml-track{height:68px;padding:0 4px 0 8px;grid-template-columns:52px minmax(0,max-content) minmax(0,1fr) auto auto}.aml-kit .aml-play{width:52px;height:52px}
.aml-kit .aml-track-time{min-width:34px;margin:0 4px 0 0}.aml-kit .aml-track-tools{margin-left:4px}
.aml-kit .aml-albums{grid-template-columns:1fr 1fr;gap:20px 12px}.aml-kit .aml-view-home-albums .aml-albums{grid-auto-columns:144px}
.aml-kit .aml-album-head{flex-direction:column;align-items:center;text-align:center;gap:16px}.aml-kit .aml-album-head .aml-album-cover{width:60%}
.aml-kit .aml-album-info{align-items:center}.aml-kit .aml-album-info .aml-section-title{font-size:28px}.aml-kit .aml-play-all{align-self:center}}
@media (prefers-reduced-motion:reduce){.aml-kit *{transition:none!important;animation:none!important}}