지만 여기는 다 —
열 사진이 없으니 hover 로 「눌러 보라」는 신호를 주지 않는다. */
.actvty-sec .cs-list li{ padding:0; }
.actvty-sec .cs-link{ display:flex; align-items:center; gap:12px; padding:14px 20px;
flex:1 1 0; min-width:0; }
.actvty-sec .cs-ico{ flex:0 0 auto; font-size:20px; line-height:1; }
.actvty-sec .cs-co{ flex:0 0 auto; margin-left:auto; white-space:nowrap; }
.actvty-sec .cs-co .dot{ margin:0 5px; color:var(--line-strong); }
/* 오른쪽 상자의 «둘째» 단추 — 협회 회원 되기. 주 동작(로그인)보다 조용하다. */
.cs-sub{ display:inline-flex; align-items:center; justify-content:center;
height:38px; padding:0 14px; border-radius:8px;
border:1px solid var(--kmsia-brand); background:#fff;
color:var(--kmsia-brand); font-size:13.5px; font-weight:700; }
.cs-sub:hover{ background:var(--kmsia-brand); color:#fff; }
@media(max-width:767px){
.actvty-sec .cs-link{ flex-wrap:wrap; gap:6px 10px; padding:13px 16px; }
.actvty-sec .cs-co{ margin-left:0; }
}
/* ★★ 2026-08-25 : 세 칸이다 — 아이콘 · 글(폭을 채운다) · 단추(오른쪽 끝).
그 전에는 글과 단추가 한 덩어리로 왼쪽에 몰려, 상자는 1152px 인데
안쪽 내용이 654px 에서 끊기고 오른쪽 615px 이 비어 있었다.
★ .an-txt 에 min-width:0 을 «반드시» 준다. flex 아이템 기본값이 auto 라
긴 글이 단추를 오른쪽으로 밀어낸다(8.28절에서 되풀이 겪었다). */
.actvty-note{
display:flex; gap:14px; align-items:center;
margin:0 0 22px; padding:16px 18px;
background:#f2f6fb; border:1px solid #d6e0ec; border-left:4px solid #1f6feb;
border-radius:0 10px 10px 0; line-height:1.6;
}
.actvty-note .an-ic{ font-size:22px; line-height:1.2; flex:0 0 auto; align-self:flex-start; }
.actvty-note .an-txt{ flex:1 1 auto; min-width:0; }
.actvty-note b{ display:block; color:#111; margin-bottom:2px; }
.actvty-note p{ margin:0; color:#4a5568; font-size:14px; }
.actvty-note .an-btns{ display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; margin:0; }
/* ★ KRDS 버튼은 height 가 고정이고 가운데를 flex 가 잡는다.
display 만 덮으면 글자가 위로 붙는다(8.44절). height 도 함께 푼다. */
.actvty-note .an-btns .krds-btn{
display:inline-flex; align-items:center; justify-content:center;
height:auto; padding:9px 18px; font-size:14px;
}
/* 잠긴 카드 — 사진 자리에 «장식 커버». ★ 눌리지 않는다(button 이 아니라 div)
★★ 커버는 실제 사진이 아니다. 8종을 두고 활동 번호로 «늘 같은» 것을 고른다
(coverOf()). 매번 무작위면 새로고침마다 그림이 바뀌어 고장으로 보인다.
★ hover 확대를 «걸지 않는다» — 눌러도 열리는 것이 없어 「눌러 보라」는 신호를
주면 안 된다(회원 카드와 다른 점이다). */
.actvty-card.is-locked{ cursor:default; }
.actvty-card.is-locked:hover .ac-thumb img{ transform:none; }
.ac-thumb-cover img{ opacity:.96; }
@media (max-width:640px){
.actvty-note{ flex-direction:column; gap:8px; align-items:stretch; }
/* 세로로 쌓이면 단추가 글 아래에 온다 — 그때는 사이 여백이 필요하다 */
.actvty-note .an-btns{ margin-top:4px; }
}
/* ============================================================
고정 갈림길 (hero-paths) 2026-08-25
------------------------------------------------------------
캐러셀이 넘어가기를 기다리지 않아도 네 갈래가 «동시에» 보이게 한다.
★ 배너가 0건이어도 나오는 자리라 hero 에 겹치는 음수 여백을 쓰지 않는다.
★ 다국어 대비 — 폭을 고정하지 않고 줄바꿈을 허용한다. 러시아어는 한국어의 2~3배다.
============================================================ */
.hero-paths{ margin:18px 0 0; }
.hero-paths .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hero-paths a{
display:block; min-width:0; padding:15px 17px; border-radius:12px;
background:#fff; border:1px solid var(--line); box-shadow:var(--kmsia-shadow);
text-decoration:none; color:var(--ink);
transition:border-color .15s, transform .15s;
}
.hero-paths a b{ display:block; font-size:15.5px; font-weight:700; word-break:keep-all; }
.hero-paths a span{
display:block; margin-top:3px; font-size:13px; color:var(--ink-sub);
word-break:keep-all; white-space:normal;
}
.hero-paths a:hover{ border-color:var(--kmsia-brand); transform:translateY(-2px); }
.hero-paths a:focus-visible{ outline:3px solid var(--kmsia-brand); outline-offset:2px; }
@media (max-width:900px){ .hero-paths .wrap{ grid-template-columns:1fr 1fr; } }
@media(max-width:767px){ .hero-paths .wrap{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){
.hero-paths a{ transition:none; }
.hero-paths a:hover{ transform:none; }
}
/* ------------------------------------------------------------
캐러셀 정지 버튼 WCAG 2.2.2
자동으로 움직이는 것은 «멈출 수단»이 있어야 한다.
4초마다 넘어가던 것을 저시력·인지 장애 이용자가 멈출 수 없었다.
------------------------------------------------------------ */
.pager-inline #heroPause{ font-size:10px; letter-spacing:1px; line-height:1; }
.pager-inline #heroPause[aria-pressed="true"]{ font-size:12px; letter-spacing:0; }
/* ============================================================
비자 · 체류자격 단계 (visa-journey) 2026-08-25
------------------------------------------------------------
★ 1·2·3 은 «실제 순서» 다. 지금 자격 → 목표 → 길.
★ 아래 진열창(.visa-showcase)과 한 덩어리로 읽히도록 사이 여백을 줄인다.
★ 다국어 대비 — 폭을 고정하지 않고 줄바꿈을 허용한다.
============================================================ */
.visa-journey{ padding-bottom:8px; }
.visa-journey + .visa-showcase{ padding-top:8px; }
.vj-steps{
display:grid; grid-template-columns:repeat(3,1fr); gap:0;
list-style:none; margin:16px 0 0; padding:0;
}
.vj-steps li{
position:relative; min-width:0; padding:16px 18px 16px 54px;
background:var(--bg-soft); border:1px solid var(--line);
}
.vj-steps li:first-child{ border-radius:12px 0 0 12px; }
.vj-steps li:last-child { border-radius:0 12px 12px 0; }
.vj-steps li + li{ border-left:0; }
/* 단계 사이 화살표 — 순서가 «정보»라서 넣는다 */
.vj-steps li + li::before{
content:""; position:absolute; left:-9px; top:50%;
width:16px; height:16px; margin-top:-8px; background:var(--bg-soft);
border-top:1px solid var(--line); border-right:1px solid var(--line);
transform:rotate(45deg);
}
.vj-n{
position:absolute; left:16px; top:16px; width:26px; height:26px;
border-radius:50%; background:var(--kmsia-brand); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700; line-height:1;
}
.vj-steps b{ display:block; font-size:15px; font-weight:700; word-break:keep-all; }
.vj-d{ display:block; margin-top:2px; font-size:13px; color:var(--ink-sub);
word-break:keep-all; white-space:normal; }
.vj-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media(max-width:767px){
.vj-steps{ grid-template-columns:1fr; }
.vj-steps li{ border-radius:0; border-left:1px solid var(--line); border-top:0; }
.vj-steps li:first-child{ border-radius:12px 12px 0 0; border-top:1px solid var(--line); }
.vj-steps li:last-child { border-radius:0 0 12px 12px; }
.vj-steps li + li::before{ left:50%; top:-9px; margin:0 0 0 -8px; transform:rotate(135deg); }
.vj-cta .krds-btn{ flex:1 1 100%; }
}
/* ============================================================
주제별 안내 — 주제로 묶어 보이기 (.tc-*) 2026-08-25
------------------------------------------------------------
★ 무엇이 문제였나
6장이 이미 «비자 2 · 교육 2 · 문화 2» 로 묶여 있는데 그 묶임이 안 보였다.
썸네일 색이 t1(회청) t4(회색) t2(골드) t2(골드) t3(제이드) t5(분홍) 이라
교육 둘만 같고, 비자 둘은 서로 구분이 안 되고, 문화 둘은 색이 갈려 있었다.
★★ t1~t5 를 «재정의하지 않는다».
culture-experience.jsp 가 그 다섯을 «서로 다른 색 다섯 가지»로 쓴다.
뜻을 바꾸면 그 화면이 통째로 한 색이 된다. 그래서 주제 클래스를 따로 만든다.
★★ 색만으로 뜻을 전하지 않는다 (WCAG 1.4.1).
카드마다 「비자 · 교육 · 문화·생활」 라벨을 «글자로» 함께 둔다.
색을 못 보는 분에게도 묶임이 전해져야 한다.
============================================================ */
.theme-card.tc-visa .thumb{ background:linear-gradient(135deg,#e7edf2,#b9cde0); }
.theme-card.tc-edu .thumb{ background:linear-gradient(135deg,var(--kmsia-gold-bg),#ffe1a3); }
.theme-card.tc-life .thumb{ background:linear-gradient(135deg,var(--kmsia-jade-bg),#c4e6d7); }
/* 카드 위쪽에 주제 띠 — 썸네일을 못 보는 상황에서도 묶임이 남는다 */
.theme-card.tc-visa{ border-top:3px solid var(--kmsia-brand); }
.theme-card.tc-edu { border-top:3px solid var(--kmsia-gold); }
.theme-card.tc-life{ border-top:3px solid var(--kmsia-jade); }
.tc-tag{
display:block; margin-bottom:4px; font-size:12px; font-weight:600;
letter-spacing:.02em; word-break:keep-all;
}
/* ★★ 라벨을 «주제색으로 칠하지 않는다». 흰 바탕 대비를 재 보면 —
--kmsia-gold-ink #b57d00 3.6:1 ★ 불합격
--kmsia-jade #1f8a5f 4.3:1 ★ 불합격 (아슬하게)
--ink-sub #5c6b76 5.5:1 ○
12px 굵은 글자는 «작은 글자»라 4.5:1 이 필요하다(WCAG 1.4.3).
색은 위 테두리와 썸네일이 나르고, 라벨은 «글자로» 주제를 말한다 —
그것이 1.4.1 이 요구하는 것이다. 색을 한 겹 더 얹을 이유가 없다. */
.tc-tag{ color:var(--ink-sub); }
/* ★ 골드 테두리만 3:1 에 못 미친다(2.0:1). 다만 이 띠는 «장식»이고
주제는 라벨 글자가 이미 말하고 있어 1.4.11 대상이 아니다.
띠 하나로만 뜻을 전하게 되면 그때는 더 진한 골드가 필요하다. */
.theme-card:focus-visible{ outline:3px solid var(--kmsia-brand); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){
.theme-card{ transition:none; }
.theme-card:hover{ transform:none; }
}
/* ============================================================
함께한 순간들 — 비회원 «글 카드» 2026-08-25
------------------------------------------------------------
★ 무엇이 문제였나
비회원은 사진을 못 보는데도 4:3 장식 커버가 카드의 3분의 2를 차지했다.
커버는 추상 도형이라 아무 정보도 주지 않는데, 정작 알려야 할
«무슨 활동이었나»(제목·날짜)가 그 아래로 밀려 있었다.
★ 정보는 «줄지 않았다» — 구분·사진 장수·제목·날짜가 그대로 나온다.
자리만 줄고 읽는 순서가 바로잡혔다.
★ 회원 카드는 «그대로» 다. 그쪽은 사진이 요점이다.
★ /actvty(전체보기)도 그대로다. 거기는 화면 전체가 사진 격자라
커버가 자리를 채우는 뜻이 있다.
============================================================ */
/* ★★ 2026-08-25 : 비회원 활동 카드를 «도움이 되는 기관»(.org-card) 과 같게 맞췄다.
그 전에는 .ac-textcard 라는 전용 골격 + 격자였는데, 바로 아래 구역이
.org-card 레일이라 두 카드가 딴 부품처럼 보였다.
★ 이제 카드 모양은 .org-card 한 곳에서 정해진다. 여기서는
«눌리지 않는다» 는 것과 날짜 한 줄만 보탠다.
★ .ac-textcard · .rail.actvty-textrail 규칙은 지웠다 — 쓰는 화면이 없어졌다.
남겨 두면 다음 사람이 «어느 쪽이 진짜인지» 헤맨다. */
/* ★ FAQ 더보기 — 탭 줄 오른쪽 끝. 바로 아래가 그 결과다. */
.faq-tabs .faq-more{ margin-left:auto; align-self:center; }
/* ============================================================
질문 남기기 — 태그 라벨 2026-08-25
------------------------------------------------------------
★ 칩 7개가 아무 설명 없이 서 있어, 거르개인지 예시인지 알 수 없었다.
누르면 «입력칸이 채워진다» — 그것이 예시라는 뜻이다.
============================================================ */
.qt-label{
margin:14px 0 0; font-size:13px; color:var(--ink-sub); word-break:keep-all;
}
.qt-label + .quick-tags{ margin-top:8px; }
@media (max-width:767px){ .qt-label{ margin-top:10px; font-size:12.5px; } }
/* ============================================================
회원이 되시면 무엇이 열리나 (.member-compare) 2026-08-25
------------------------------------------------------------
★ 두 칸을 «같은 무게»로 둔다. 왼쪽(지금 보시는 것)을 흐리게 만들면
「가입해야 제대로 본다」로 읽혀, 사실과 다르고 압박이 된다.
실제로는 사증 발급 안내까지 누구나 본문을 본다(8.28절).
★ 오른쪽만 왼쪽 테두리로 표시한다 — 색 하나로 「여기가 더해지는 쪽」임을 알린다.
============================================================ */
.mc-grid{
display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px;
}
.mc-col{
min-width:0; padding:20px 22px; border:1px solid var(--line);
border-radius:var(--radius); background:#fff;
}
.mc-col.is-member{ border-left:3px solid var(--kmsia-brand); }
.mc-tit{
margin:0 0 12px; font-size:15.5px; font-weight:700; color:var(--ink);
word-break:keep-all;
}
.mc-col.is-member .mc-tit{ color:var(--kmsia-brand); }
.mc-list{ margin:0; padding:0; list-style:none; }
.mc-list li{
position:relative; padding:0 0 0 20px; margin:0 0 9px;
font-size:14.5px; line-height:1.6; color:var(--ink-sub); word-break:keep-all;
}
.mc-list li:last-child{ margin-bottom:0; }
.mc-list li::before{
content:""; position:absolute; left:4px; top:9px;
width:6px; height:6px; border-radius:50%; background:var(--line-strong);
}
.mc-col.is-member .mc-list li{ color:var(--ink); }
.mc-col.is-member .mc-list li::before{ background:var(--kmsia-brand); }
.mc-list b{ color:var(--ink); font-weight:700; }
.mc-note{
margin:14px 0 0; font-size:13.5px; color:var(--ink-sub); word-break:keep-all;
}
.mc-note a{ color:var(--kmsia-brand); font-weight:600; text-decoration:underline; }
@media(max-width:767px){
.mc-grid{ grid-template-columns:1fr; }
.mc-col{ padding:16px 18px; }
.mc-list li{ font-size:14px; }
}
/* ==========================================================================
검색 노출 2차 Phase 2 (2026-09-19 · DOCS/seo/SEO_PLAN)
★ 전역 a{color:inherit;text-decoration:none} 라 그대로 두면 링크가 «본문과 똑같이» 보인다 — 여기서 덮는다.
========================================================================== */
/* 타이틀 바가 없는 화면(머리 안에 h1 을 둔 화면)의 브레드크럼 */
.pt-crumb.pt-crumb-in{margin:0 0 12px;}
/* 정보 카드 안 「… 자격 안내 ›」 */
.info-card .ic-more{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--kmsia-brand);}
.info-card .ic-more:hover{text-decoration:underline;}
/* ═══════════════════════════════════════════════════════════════════
커뮤니티 — 보류 알림 · 신고 (2026-09-24, 40-회원인증 §8.198)
★ 보류된 글·댓글은 «글쓴이 본인» 에게만 보인다. 왜 안 보이는지 그 자리에서 알린다.
★★ 아래에 @media print 규칙을 덧붙이지 말 것(80-설문 §8.96).
═══════════════════════════════════════════════════════════════════ */
.cmnty-hold { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
background: #fff5e5; border: 1px solid #ffe0b2; color: #99610a;
font-size: 12px; font-weight: 700; vertical-align: middle; }
.cmnty-hold-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 6px;
background: #fff8ec; border: 1px solid #ffe0b2; border-left: 3px solid #d98324;
color: #7a4a06; font-size: 14px; line-height: 1.65; }
.cmnty-hold-box b { color: #8a4b00; }
.cmnty-report { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cmnty-report select { padding: 5px 8px; border: 1px solid #dbe0e6; border-radius: 4px;
font-size: 13px; color: #4b5563; background: #fff; }
.cmnty-report button { padding: 5px 12px; border: 1px solid #dbe0e6; border-radius: 4px;
background: #fff; color: #6b7280; font-size: 13px; cursor: pointer; }
.cmnty-report button:hover, .cmnty-report button:focus { border-color: #b91c1c; color: #b91c1c; }
.cmnty-report-sm { margin: 6px 0 0; }
.cmnty-report-sm button { padding: 2px 8px; font-size: 12px; }