/* ============================================================
   LINKSALAD 게시판 스킨 — 독립형 CSS (sample 디자인 경량 재현)
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

.ls_root{
	--ls-bg:#fff;--ls-card:#fff;--ls-surf:#f6f7f8;--ls-line:#eaeaea;
	--ls-text:#1d1d1f;--ls-muted:#848484;--ls-accent:#2C74F4;
	font-family:'Pretendard Variable','Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
	font-size:14px;line-height:1.5;color:var(--ls-text);
}

/* --- 격리 리셋 (코어·UA 침범 차단) --- */
.ls_root *,.ls_root *::before,.ls_root *::after{box-sizing:border-box;}
.ls_root :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd){margin:0;padding:0;font-size:inherit;font-weight:inherit;}
.ls_root :where(ul,ol){margin:0;padding:0;list-style:none;}
.ls_root :where(img){max-width:100%;height:auto;border:0;vertical-align:middle;}
.ls_root :where(button,input,select,textarea){font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;}
.ls_root :where(button){background:none;border:0;cursor:pointer;}
.ls_root a,.ls_root a:link,.ls_root a:visited,.ls_root a:hover,.ls_root a:focus,.ls_root a:any-link{text-decoration:none;color:inherit;}

/* ============================================================
   헤더 (sample: max-width 1200, height 89)
   목록 페이지는 사이트 레이아웃 CSS가 같이 살아있어 read(layout=none)와
   미묘하게 달라지는 일이 잦다 → 모든 핵심 속성은 .ls_root 안에서 명시 + !important 로 고정
   ============================================================ */
.ls_root .ls_header{max-width:1200px !important;margin:0 auto !important;display:flex !important;
	align-items:center !important;justify-content:space-between !important;
	height:89px !important;padding:0 24px !important;background:transparent !important;border:0 !important;}
.ls_root .ls_brand{display:flex !important;align-items:center !important;gap:12px !important;margin:0 !important;padding:0 !important;}
.ls_root .ls_brand-link{display:inline-flex !important;align-items:center !important;text-decoration:none !important;color:inherit !important;}
.ls_root .ls_logo{height:32px !important;width:auto !important;display:block !important;border:0 !important;box-shadow:none !important;}
.ls_root .ls_logo-text{display:inline-block !important;font-size:22px !important;font-weight:900 !important;
	letter-spacing:-0.5px !important;line-height:1 !important;color:var(--ls-text) !important;
	text-shadow:none !important;background:none !important;-webkit-text-fill-color:currentColor !important;}
.ls_root .ls_chart-btn{display:inline-flex !important;align-items:center !important;
	padding:4px 12px !important;border-radius:4px !important;background:#000 !important;
	color:#fff !important;font-size:12px !important;font-weight:500 !important;line-height:20px !important;
	border:0 !important;text-shadow:none !important;box-shadow:none !important;position:relative !important;
	text-decoration:none !important;}
.ls_root .ls_chart-btn::before{content:"" !important;display:block !important;position:absolute !important;
	left:-5px !important;top:50% !important;transform:translateY(-50%) !important;width:0 !important;height:0 !important;
	border:6px solid transparent !important;border-right-color:#000 !important;border-left:0 !important;}
.ls_root .ls_actions{display:flex !important;align-items:center !important;gap:8px !important;}
.ls_btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 21px;
	border-radius:18.5px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;
	transition:.15s;background:transparent;}
.ls_btn-line{border:1px solid var(--ls-accent);color:var(--ls-accent) !important;}
.ls_btn-line:hover{background:var(--ls-accent);color:#fff !important;}
.ls_btn-primary{background:var(--ls-accent);color:#fff !important;border:1px solid var(--ls-accent);}
.ls_btn-primary:hover{opacity:.9;}

/* ============================================================
   글 보기 — content 1200px, albumInfo 400px / sharelinks 1fr
   ============================================================ */
.ls_view{width:100%;max-width:1200px;margin:30px auto;padding:0 24px;
	display:flex;gap:80px;align-items:flex-start;}
.ls_view-left{width:400px;flex-shrink:0;flex-grow:0;}
.ls_view-right{flex:1;min-width:0;}

/* 커버 (400x400, 22px radius, 큰 그림자) */
.ls_cover{width:100%;aspect-ratio:1/1;border-radius:22px;overflow:hidden;
	box-shadow:0 0 40px rgba(0,0,0,.16);background:var(--ls-surf);}
.ls_cover img{width:100%;height:100%;object-fit:cover;display:block;}
.ls_cover-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
	color:var(--ls-muted);font-size:13px;}

/* 제목 / 아티스트 */
.ls_title{font-size:25px;font-weight:900;line-height:32px;margin:15px 0 12px !important;
	color:var(--ls-text);}
.ls_subtitle{font-size:18px;font-weight:500;color:var(--ls-muted);line-height:27px;
	margin-top:5px;}
.ls_info{font-size:14px;color:var(--ls-muted);margin-top:6px;line-height:1.6;}

/* 툴바 (heart, share, related) */
.ls_toolbar-wrap{margin-top:15px;border-top:1px solid #eee;padding-top:5px;min-height:50px;}
.ls_toolbar{display:flex;align-items:center;gap:4px;}
.ls_meta-btn{display:inline-flex;align-items:center;gap:3px;font-size:14px;color:#888;
	padding:6px 6px;}
.ls_meta-btn:hover{color:var(--ls-text);}
.ls_meta-heart{font-size:18px;line-height:1;}
.ls_meta-heart.is-on{color:#e74c3c;}
.ls_meta-num{margin-right:10px;}
.ls_meta-arrow{font-size:14px;line-height:1;transform:scaleX(-1);display:inline-block;}
.ls_meta-label{font-size:14px;}

/* 관련 앨범 */
.ls_related{margin-top:10px;}
.ls_related-label{float:left;padding-top:10px;font-size:14px;color:var(--ls-muted);
	margin-right:14px;}
.ls_related-list{clear:both;padding-top:10px;display:flex;gap:6px;flex-wrap:wrap;}
.ls_related-item{display:block;width:54px;height:54px;border-radius:4px;overflow:hidden;
	background:var(--ls-surf);}
.ls_related-item img{width:100%;height:100%;object-fit:cover;display:block;}
.ls_related-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
	font-size:11px;font-weight:700;color:var(--ls-muted);}

/* 날짜 / 카피라이트 — 화면 폭에 끌려가지 않도록 max-width 잠그고 구분선·간격 정돈 */
.ls_info-meta{margin:0 auto;padding-top:18px;max-width:400px;
	border-top:1px solid var(--ls-line);font-size:13px;line-height:1.6;letter-spacing:-0.1px;
	color:var(--ls-muted);}
.ls_info-date{font-size:13px;font-weight:600;color:#7d7d7d;letter-spacing:0.2px;}
.ls_info-copy{margin-top:6px;font-size:12.5px;color:#9e9e9e;line-height:1.55;
	word-break:keep-all;}

/* --- 우측 플랫폼 그리드 (sample: shareLinksWrap, 2 cols, gap 16, height 88) --- */
.ls_platforms{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.ls_platform{display:flex;align-items:center;justify-content:space-between;gap:10px;
	height:88px;padding:0 24px;border-radius:9px;background:#fff;
	box-shadow:0 0 50px rgba(0,0,0,.09);transition:.3s;}
.ls_platform:hover{transform:translateY(-1px);box-shadow:0 4px 50px rgba(0,0,0,.14);}
.ls_platform-name{font-size:16px;font-weight:700;color:var(--ls-brand,var(--ls-text)) !important;
	letter-spacing:-0.2px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
	white-space:nowrap;}
/* 플랫폼 로고 이미지 (있는 경우 텍스트 대신 이미지) */
.ls_platform-logo{flex:1;min-width:0;max-width:120px;max-height:40px;width:auto;height:auto;
	object-fit:contain;object-position:left center;display:block;}

/* ============================================================
   플랫폼별 로고 미세 조정 — 시각 균형 맞춤
   기준: YouTube 뮤직 = 상한 (가장 큼), YouTube/Facebook = 중간, 카카오/Spotify 등 = 작은 편
   아이콘형(home, x)은 너비를 늘리고 object-position:center 로 가운데 정렬
   ============================================================ */
/* 공식사이트 (home 픽토그램) — 작은 사이즈, 다른 로고처럼 좌측 정렬 */
.ls_platform--web .ls_platform-logo{flex:0 0 auto;max-width:24px;max-height:24px;
	object-position:left center;}
/* X (트위터) — 정사각 아이콘, 좌측 정렬 */
.ls_platform--twitter .ls_platform-logo{flex:0 0 auto;max-width:22px;max-height:22px;
	object-position:left center;}
/* Instagram — 로고 + 워드마크 합쳐진 가로 긴 이미지 */
.ls_platform--instagram .ls_platform-logo{max-width:120px;max-height:28px;}
/* Facebook — 너무 크다 → 줄임 */
.ls_platform--facebook .ls_platform-logo{max-width:95px;max-height:22px;}
/* TikTok — Facebook 다음으로 컸음 → 줄임 */
.ls_platform--tiktok .ls_platform-logo{max-width:95px;max-height:24px;}
/* YouTube — 너무 컸음 → 줄임 */
.ls_platform--youtube .ls_platform-logo{max-width:100px;max-height:22px;}
/* YouTube Music — 너무 작았음 → 키움 (가장 큰 편) */
.ls_platform--youtube_music .ls_platform-logo{max-width:155px;max-height:34px;}
/* Apple Music — Vibe/Flo 와 비슷한 사이즈 목표 → 키움 */
.ls_platform--applemusic .ls_platform-logo{max-width:130px;max-height:32px;}
/* Spotify — 원형 로고 + 워드마크 */
.ls_platform--spotify .ls_platform-logo{max-width:115px;max-height:30px;}
/* Amazon — 워드마크 (smile 곡선 포함) */
.ls_platform--amazon .ls_platform-logo{max-width:115px;max-height:30px;}
/* Melon */
.ls_platform--melon .ls_platform-logo{max-width:100px;max-height:32px;}
/* Genie — 사이즈 더 키움 */
.ls_platform--genie .ls_platform-logo{max-width:115px;max-height:34px;}
/* Bugs! — 키움 */
.ls_platform--bugs .ls_platform-logo{max-width:95px;max-height:36px;}
/* Vibe — 더 키움 */
.ls_platform--vibe .ls_platform-logo{max-width:130px;max-height:32px;}
/* Flo — 키움 */
.ls_platform--flo .ls_platform-logo{max-width:95px;max-height:34px;}
/* Kakao 톡 / 채널 — 약간 줄임 */
.ls_platform--kakao .ls_platform-logo{max-width:80px;max-height:26px;}
.ls_platform--kakaoch .ls_platform-logo{max-width:80px;max-height:26px;}
.ls_platform-play{display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;border-radius:50%;background:#4f4f4f;color:#fff;
	font-size:12px;line-height:1;flex-shrink:0;}
.ls_platform:hover .ls_platform-play{background:var(--ls-brand,#4f4f4f);}

/* ============================================================
   하단 배너 (응원 메시지 = 댓글)
   ============================================================ */
.ls_cheers{max-width:1200px;margin:60px auto;padding:0 24px;}
.ls_cheers-head{display:flex;align-items:center;gap:14px;padding:18px 22px;
	background:var(--ls-surf);border-radius:9px;}
.ls_cheers-icon{display:inline-flex;align-items:center;justify-content:center;
	width:32px;height:32px;border-radius:50%;background:var(--ls-accent);color:#fff;
	font-size:10px;flex-shrink:0;}
.ls_cheers-text{font-size:14px;font-weight:500;color:var(--ls-text);line-height:1.5;}

/* 댓글 — 내용·익명·날짜 모두 한 줄. 좁아지면 자연 줄바꿈 */
.ls_cmt-wrap{margin-top:20px;}
.ls_cmt-list{display:flex;flex-direction:column;gap:8px;margin-top:18px;text-align:left;}
.ls_cmt{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
	padding:12px 16px;background:#fff;border:1px solid var(--ls-line);
	border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.03);
	transition:.18s;text-align:left;font-size:14px;line-height:1.5;}
.ls_cmt:hover{border-color:#dcdfe3;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.ls_cmt-reply{margin-left:24px;background:var(--ls-surf);}
.ls_cmt-text{flex:1 1 200px;min-width:0;color:var(--ls-text);
	white-space:pre-wrap;word-break:break-word;}
.ls_cmt-text-sys{color:var(--ls-muted);font-style:italic;}
.ls_cmt-author{display:inline-flex;align-items:center;height:20px;padding:0 8px;
	border-radius:10px;background:var(--ls-surf);
	font-weight:600;font-size:11.5px;color:#5a5f66;letter-spacing:-0.1px;
	flex-shrink:0;}
.ls_cmt-date{font-size:12px;color:var(--ls-muted);font-variant-numeric:tabular-nums;flex-shrink:0;}
.ls_cmt-tool{padding:0 6px;color:var(--ls-muted) !important;
	font-size:12px;border-radius:6px;flex-shrink:0;}
.ls_cmt-tool:hover{color:var(--ls-accent) !important;background:var(--ls-surf);}
.ls_cmt-empty{font-size:13px;color:var(--ls-muted);text-align:center;
	padding:28px 0;margin-top:18px;border:1px dashed var(--ls-line);border-radius:12px;
	background:#fff;}

/* align-items:stretch 로 버튼이 textarea(rows=2) 의 실측 높이를 따라가게 */
.ls_cmt-form{margin-top:18px;display:flex;gap:8px;align-items:stretch;}
.ls_cmt-form-input{flex:1;min-height:42px;padding:12px 14px;border-radius:9px;
	border:1px solid var(--ls-line);background:#fff;font-size:14px;resize:vertical;
	font-family:inherit;color:var(--ls-text);line-height:1.5;}
.ls_cmt-form-input:focus{outline:0;border-color:var(--ls-accent);}
.ls_cmt-form-submit{padding:0 26px;align-self:stretch;border-radius:9px;
	background:var(--ls-text);color:#fff !important;font-weight:700;font-size:13px;
	white-space:nowrap;flex-shrink:0;}
.ls_cmt-form-submit:hover{opacity:.9;}
.ls_cmt-form-guest{font-size:13px;color:var(--ls-muted);padding:10px 14px;
	background:var(--ls-surf);border:1px solid var(--ls-line);border-radius:9px;margin-top:18px;}

/* ============================================================
   목록 페이지 — 카드 갤러리
   ============================================================ */
.ls_list{max-width:1200px;margin:30px auto 0;padding:0 24px;}
.ls_list-head{display:flex;justify-content:space-between;align-items:center;
	flex-wrap:wrap;gap:14px;margin-bottom:24px;padding-bottom:18px;
	border-bottom:1px solid var(--ls-line);}
.ls_list-title{font-size:22px;font-weight:900;letter-spacing:-0.4px;color:var(--ls-text);}
.ls_list-search{display:flex;gap:6px;}
.ls_list-search-input{min-height:36px;padding:7px 14px;border-radius:18px;
	border:1px solid var(--ls-line);background:#fff;font-size:13px;min-width:220px;}
.ls_list-search-input:focus{outline:0;border-color:var(--ls-accent);}

.ls_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.ls_card{display:block;background:#fff;border-radius:14px;overflow:hidden;
	box-shadow:0 0 30px rgba(0,0,0,.06);transition:.3s;}
.ls_card:hover{transform:translateY(-3px);box-shadow:0 8px 40px rgba(0,0,0,.12);}
.ls_card-img{width:100%;aspect-ratio:1/1;background:var(--ls-surf);overflow:hidden;}
.ls_card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ls_card-img-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
	font-size:32px;font-weight:900;color:var(--ls-muted);}
.ls_card-body{padding:14px 16px 16px;}
.ls_card-title{font-size:15px;font-weight:700;color:var(--ls-text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ls_card-sub{font-size:13px;color:var(--ls-muted);margin-top:4px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ls_card-meta{font-size:12px;color:var(--ls-muted);margin-top:8px;}

.ls_empty{padding:60px 20px;text-align:center;font-size:14px;color:var(--ls-muted);
	background:#fff;border-radius:14px;box-shadow:0 0 30px rgba(0,0,0,.06);}

.ls_pager{display:flex;justify-content:center;gap:6px;margin-top:30px;flex-wrap:wrap;}
.ls_pager-link{display:inline-flex;align-items:center;justify-content:center;
	min-width:36px;height:36px;padding:0 12px;border-radius:18px;background:#fff;
	border:1px solid var(--ls-line);font-size:13px;color:var(--ls-text) !important;}
.ls_pager-link:hover{border-color:var(--ls-text);}
.ls_pager-link.ls_is-on{background:var(--ls-text);color:#fff !important;border-color:var(--ls-text);}

/* ============================================================
   글쓰기 / 메시지 / 확인 폼
   ============================================================ */
.ls_form{max-width:760px;margin:30px auto;padding:0 24px;}
.ls_form-field{margin-bottom:18px;}
.ls_form-label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;color:var(--ls-text);}
.ls_form-help{font-size:12.5px;color:var(--ls-muted);margin-top:6px;line-height:1.55;}
.ls_form input[type=text],.ls_form input[type=password],.ls_form input[type=email],
.ls_form input[type=url],.ls_form input[type=number],.ls_form input[type=search],
.ls_form textarea,.ls_form select{
	width:100%;padding:10px 14px;border-radius:9px;border:1px solid var(--ls-line);
	background:#fff;font-size:14px;color:var(--ls-text);font-family:inherit;}
.ls_form input:focus,.ls_form textarea:focus,.ls_form select:focus{
	outline:0;border-color:var(--ls-accent);}
.ls_form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px;
	padding-top:18px;border-top:1px solid var(--ls-line);}

.ls_msg{max-width:520px;margin:60px auto;padding:36px;text-align:center;
	background:#fff;border-radius:14px;box-shadow:0 0 30px rgba(0,0,0,.06);}
.ls_msg-title{font-size:18px;font-weight:900;color:var(--ls-text);margin-bottom:10px;}
.ls_msg-body{font-size:14px;color:var(--ls-muted);line-height:1.7;margin-bottom:22px;}

/* ============================================================
   반응형 (sample: 768px 기준 모바일)
   ============================================================ */
@media(max-width:980px){
	.ls_view{flex-direction:column;gap:32px;padding:0 20px;align-items:stretch;}
	.ls_view-left{width:100%;text-align:center;}
	.ls_view-right{width:100%;flex:none;}   /* 컬럼 모드에서 우측이 전체 폭 */
	.ls_cover{width:min(400px,60%);margin:0 auto;}
	.ls_title,.ls_subtitle,.ls_info{text-align:center;}
	.ls_toolbar{justify-content:center;}
	.ls_related-label{float:none;text-align:center;padding-top:0;}
	.ls_related-list{justify-content:center;}
	.ls_info-meta{text-align:center;}
}
@media(max-width:768px){
	.ls_header{padding:26px 23px;height:auto;}
	/* .ls_platforms 는 2열 고정 (사용자 지시) — 폭에 맞춰 타일만 축소 */
	.ls_platforms{gap:10px;}
	.ls_platform{height:62px;padding:0 14px;gap:8px;}
	.ls_platform-logo{max-height:28px;max-width:90px;}
	.ls_platform-name{font-size:13.5px;}
	.ls_platform-play{width:30px;height:30px;}
	.ls_list-search-input{min-width:0;width:100%;}
	.ls_list-search{flex:1;}
	/* 응원 메시지 폼: 좁은 화면에서는 textarea / 버튼 세로 스택 */
	.ls_cmt-form{flex-direction:column;align-items:stretch;}
	.ls_cmt-form-submit{height:44px;}
}