/* 일하는방식연구원 WorkStyleAI 홈페이지 기본 양식
   색·글꼴은 기존 앱(일하는방식연구원.html 2026-07)에서 옮김 */
:root{
  --ink:#3D4453; --head:#1E232C; --sub:#6B7382; --muted:#9AA1AE;
  --paper:#F6F7F9; --card:#FFFFFF;
  --line:#2563EB; --line-soft:#1D4ED8; --sea:#2563EB; --sea-soft:#EDF3FE;
  --warn:#B4452F; --warn-soft:#F8ECE8; --mist:#E4E7EC; --rail:#D3D8DF;
  --ok:#0a7a4b; --amber:#9a5b00;
  --maxw:960px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--paper); color:var(--ink); font-size:16px; line-height:1.7;
  display:flex; flex-direction:column; min-height:100vh;
}
body[data-font="big"]{font-size:18px}
a{color:var(--sea);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--head);line-height:1.35;font-weight:700}
h1{font-size:1.6rem} h2{font-size:1.3rem;margin:32px 0 12px} h3{font-size:1.1rem;margin:20px 0 8px}
p{margin:0 0 12px}

/* 머리글·메뉴 */
.topbar{background:var(--card);border-bottom:1px solid var(--mist);position:sticky;top:0;z-index:10}
.topbar .inner{max-width:var(--maxw);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1.2}
.brand .ko{font-weight:800;color:var(--head);font-size:1.05rem}
.brand .en{font-size:.78rem;color:var(--sub);letter-spacing:.04em}
.nav{margin-left:auto;display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:8px;color:var(--ink);font-size:.95rem}
.nav a:hover{background:var(--sea-soft);text-decoration:none}
.nav a[aria-current="page"]{background:var(--sea);color:#fff;font-weight:600}

/* 본문 */
main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:24px 16px 96px}
.pagetitle{font-size:1.5rem;margin:8px 0 20px}
.card{background:var(--card);border:1px solid var(--mist);border-radius:14px;padding:20px;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.hero{background:var(--card);border:1px solid var(--mist);border-radius:18px;padding:32px 24px;margin-bottom:24px}
.hero h1{font-size:1.9rem;margin-bottom:8px}
.hero .lead{font-size:1.1rem;color:var(--sub)}
.series{display:inline-block;background:var(--sea-soft);color:var(--line-soft);font-size:.8rem;padding:2px 10px;border-radius:999px;margin-bottom:12px}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;border:1px solid var(--sea);color:var(--sea);font-weight:600;margin:6px 8px 6px 0}
.btn:hover{background:var(--sea-soft);text-decoration:none}
.btn.primary{background:var(--sea);color:#fff}
.btn.primary:hover{background:var(--line-soft)}
.note{background:var(--sea-soft);border-left:4px solid var(--sea);padding:12px 16px;border-radius:8px;color:var(--ink);font-size:.95rem;margin:16px 0}
.pending{color:var(--muted);font-style:normal}
.list{list-style:none}
.list li{padding:10px 0;border-bottom:1px solid var(--mist);display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.list .date{color:var(--muted);font-size:.85rem;min-width:88px}
.list .cat{color:var(--sub);font-size:.85rem}
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.95rem}
th,td{border:1px solid var(--mist);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--paper)}

/* 2주차 본문용 */
.hero-split{display:flex;gap:28px;align-items:flex-start}
.hero-split>div{flex:1;min-width:0}
.hero-split .cover{flex:0 0 auto}
.hero-split .cover img,img.cover{width:240px;max-width:38vw;border-radius:8px;box-shadow:0 6px 20px rgba(30,35,44,.18);display:block}
.card ul{padding-left:20px;margin:6px 0}
.card li{margin:4px 0}
.card .sub{color:var(--sub);font-size:.92rem;margin-top:-4px}
.quote p:first-child{color:var(--head);font-size:.97rem}
.quote .who{color:var(--sub);font-size:.85rem;margin:0}
.toc p{margin-bottom:12px;font-size:.95rem}
.toc strong{color:var(--head)}
.profile{display:flex;gap:20px;align-items:flex-start}
.profile .avatar{flex:0 0 auto;width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 4px 14px rgba(30,35,44,.15)}
.profile img.avatar[width="96"]{width:96px;height:96px}
.profile>div{flex:1;min-width:0}
@media (max-width:720px){
  .hero-split{flex-direction:column-reverse;align-items:center}
  .hero-split .cover img,img.cover{width:200px;max-width:60vw;margin:0 auto 8px}
  .profile{flex-direction:column;align-items:center;text-align:left}
}

/* 0.3.1 실측 리뷰 반영 */
[hidden]{display:none !important}                       /* 1-1 숨김이 버튼 양식에 밀리지 않게 */
th{white-space:nowrap;min-width:3.5em}                   /* 1-2 표 머리글 세로 깨짐 방지 */
.filter a.btn{padding:8px 14px;font-size:.92rem}
.filter a.btn[aria-pressed="true"]{background:var(--sea);color:#fff}   /* 2-1 선택된 필터 */
.list li{padding:14px 0}                                  /* 2-3 터치 높이 */
.list li>a{display:inline-block;padding:4px 0;min-height:24px}
.card>a{display:inline-block;padding:10px 0;font-weight:600}
.badge-new{display:inline-block;background:var(--warn-soft);color:var(--warn);font-size:.72rem;padding:1px 7px;border-radius:999px;margin-left:4px}
.totop{position:fixed;right:16px;bottom:24px;width:44px;height:44px;border-radius:50%;border:1px solid var(--rail);background:var(--card);color:var(--sea);font-size:1.3rem;cursor:pointer;box-shadow:0 4px 14px rgba(30,35,44,.18);opacity:0;pointer-events:none;transition:opacity .2s;z-index:9}
.totop.show{opacity:1;pointer-events:auto}
.quick{margin-top:8px;font-size:.95rem;color:var(--sub)}
.quick a{display:inline-block;padding:10px 12px 10px 0;font-weight:600}
.scroll-hint{display:none;color:var(--muted);font-size:.8rem;margin:-8px 0 12px}
@media (max-width:720px){.scroll-hint{display:block}}
@media (max-width:720px){
  .totop{bottom:76px}
  .scroll-m{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}   /* 2-4 세 역량 가로 넘김 */
  .scroll-m .card{flex:0 0 78%;scroll-snap-align:start;margin-bottom:0}
  .quote-m .card:not(:first-child){display:none}          /* 2-4 휴대폰 추천사 1편 */
  .card table,.card tbody,.card tr,.card th,.card td{display:block;width:100%;min-width:0}   /* 1-2 375px에서 표를 목록형으로 */
  .card tr{border:1px solid var(--mist);border-radius:8px;margin-bottom:8px;overflow:hidden}
  .card th{background:var(--paper);border:0;border-bottom:1px solid var(--mist);white-space:normal;font-size:.9rem}
  .card td{border:0}
  .card table.keep-table,.card table.keep-table tbody,.card table.keep-table tr,.card table.keep-table th,.card table.keep-table td{display:revert;width:auto}
  .card table.keep-table tr{border:0;margin:0}
  .card table.keep-table th,.card table.keep-table td{border:1px solid var(--mist)}
}

/* 0.4.0 다음 판 개선 */
.skip{position:absolute;left:-9999px;top:8px;background:var(--sea);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:16px;outline:2px solid var(--head)}
@media (min-width:721px) and (max-width:960px){.cards{grid-template-columns:repeat(3,1fr)}.cards .card{padding:16px}}   /* 3-1 태블릿 고아 카드 */
.search{width:100%;max-width:420px;padding:10px 14px;border:1px solid var(--rail);border-radius:10px;font:inherit;background:var(--card);color:var(--ink);margin-bottom:12px}
.search:focus{outline:2px solid var(--sea);border-color:var(--sea)}
.btn.copied{background:var(--ok);border-color:var(--ok);color:#fff}
@media (prefers-color-scheme: dark){                     /* 3-6 다크 모드 */
  :root{--ink:#D5D9E2;--head:#F3F5F8;--sub:#A3AAB8;--muted:#7C8494;--paper:#12151B;--card:#1B1F27;--mist:#2A2F3A;--rail:#3A4150;--sea:#6FA0FF;--sea-soft:#1E2A44;--line:#6FA0FF;--line-soft:#8FB5FF;--warn:#F0907A;--warn-soft:#3A2521;--ok:#5CC08E;--amber:#E0B25C}
  .btn.primary{color:#0E1424}
  .nav a[aria-current="page"]{color:#0E1424}
  .filter a.btn[aria-pressed="true"]{color:#0E1424}
  img.cover,.hero-split .cover img{box-shadow:0 6px 20px rgba(0,0,0,.5)}
}
@media print{                                            /* 3-7 인쇄 */
  .topbar,.bottomnav,.btn,.totop,.quick,.filter,.search,.skip,.scroll-hint,[data-bigfont]{display:none !important}
  body{background:#fff;color:#000}
  .card,table,tr{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  a{color:#000;text-decoration:none}
  main{padding:0;max-width:none}
  details:not([open])>*:not(summary){display:block}
}

/* 접기·큰 글자 버튼 */
details.card>summary{cursor:pointer;color:var(--sea);font-weight:600;list-style:none}
details.card>summary::before{content:"▸ ";color:var(--sub)}
details.card[open]>summary::before{content:"▾ "}
details.card>summary::-webkit-details-marker{display:none}
details.card[open]>summary{margin-bottom:12px}
.linkbtn{background:none;border:0;padding:0;color:var(--sea);font:inherit;cursor:pointer;text-decoration:underline}

/* 바닥글 */
footer{background:var(--card);border-top:1px solid var(--mist);color:var(--sub);font-size:.85rem}
footer .inner{max-width:var(--maxw);margin:0 auto;padding:20px 16px}
footer .ver{color:var(--muted);font-size:.78rem}

/* 휴대폰: 아래 고정 메뉴 */
.bottomnav{display:none}
@media (max-width:720px){
  .nav{display:none}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--mist);z-index:10}
  .bottomnav a{flex:1;text-align:center;padding:10px 2px 12px;font-size:.72rem;color:var(--sub);line-height:1.2}
  .bottomnav a[aria-current="page"]{color:var(--sea);font-weight:700}
  .hero{padding:24px 18px} .hero h1{font-size:1.5rem}
  footer{padding-bottom:64px}
}
@media print{.topbar,.bottomnav,.btn{display:none}}

/* 강의·컨설팅: 세 카드의 제목·설명·안내 시작과 끝을 맞춘다. */
.course-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:12px;margin-bottom:16px}
.course-grid .course-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:12px;min-width:0;margin-bottom:0}
.course-heading h3{margin:0}
.course-card .course-heading .sub{margin:8px 0 0}
.course-summary{margin:0}
.course-details{display:grid;grid-template-rows:repeat(4,1fr);margin:0}
.course-details>div{border-top:1px solid var(--mist);padding:12px 0}
.course-details>div:last-child{padding-bottom:0}
.course-details dt{font-size:.88rem;font-weight:600;color:var(--head);margin-bottom:4px}
.course-details dd{font-size:.92rem;margin:0}
.contact-line{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:0}
.contact-line>span{white-space:nowrap}
@media(max-width:720px){
  .course-grid{grid-template-columns:minmax(0,1fr)}
  .course-grid .course-card{grid-row:auto;grid-template-rows:auto;display:block}
  .course-summary{margin:12px 0}
  .course-details{grid-template-rows:none}
}