/*
 * 이명훈의 홈페이지
 * 미색 바탕(솔라라이즈드 라이트 계열)에 나눔명조.
 * 나눔명조는 index.html에서 구글 폰트로 불러옵니다.
 * 색은 아래 :root에서만 고치면 됩니다.
 */

:root {
    color-scheme: light;

    --paper: #fdf6e3;
    --paper-deep: #eee8d5;
    --paper-row: #f5efdc;
    --paper-light: #fffdf6;

    --ink: #3b4d53;
    --ink-strong: #073642;
    --ink-muted: #586e75;

    --rule: #cfc5a9;
    --rule-strong: #586e75;
    --rule-soft: #93a1a1;

    /* 솔라라이즈드의 파랑·보라·주황은 미색 위 글자로 쓰기엔 흐려서 한 단계 진하게 */
    --link: #1d6ca8;
    --link-visited: #5a5fb0;
    --link-hover: #b8410f;
    --accent: #b8410f;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Nanum Myeongjo", "나눔명조", "NanumMyeongjo", "AppleMyungjo", "Batang", "바탕", serif;
    font-size: 17px;
    line-height: 1.8;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover, a:focus-visible { color: var(--link-hover); }

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 20px 48px;
}

p { margin: 0 0 12px; }

hr {
    margin: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid #fffbf0;
}

h1 {
    margin: 0 0 2px;
    font-size: 32px;
    line-height: 1.35;
    color: var(--ink-strong);
}

h2 {
    margin: 40px 0 12px;
    font-size: 22px;
    color: var(--ink-strong);
}

h2 .num { color: var(--accent); }

b { color: var(--ink-strong); }

code {
    font-family: "Courier New", monospace;
    background: var(--paper-deep);
    padding: 0 4px;
}

address { font-style: normal; }

/* 머리 — 이름과 사진 */

.intro {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.intro__text {
    flex: 1 1 340px;
    min-width: 0;
}

.intro__text p:last-child { margin: 0; }

.subtitle {
    margin: 0 0 22px;
    font-style: italic;
    color: var(--ink-muted);
}

.portrait {
    margin: 0;
    flex: 0 0 auto;
}

.portrait__frame {
    background: var(--paper-light);
    border: 1px solid var(--rule-soft);
    padding: 3px;
}

.portrait img {
    display: block;
    width: 150px;
    height: 200px;
    object-fit: cover;
}

.portrait figcaption {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-muted);
    text-align: center;
}

.nav {
    margin: 28px 0 0;
    line-height: 2.6;
}

/* 게시판 모양의 표 */

.table-wrap { overflow-x: auto; }

.board {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-soft);
    font-size: 15px;
    line-height: 1.65;
}

.board th,
.board td {
    padding: 12px 10px;
    border-bottom: 1px dotted var(--rule);
    text-align: left;
    vertical-align: top;
}

.board thead th {
    padding: 8px 10px;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--rule);
    color: var(--ink-strong);
}

.board tbody tr:last-child th,
.board tbody tr:last-child td { border-bottom: 0; }

.board .group th {
    padding: 7px 10px;
    background: var(--paper-row);
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-strong);
}

.sub {
    font-size: 13px;
    color: var(--ink-muted);
}

/* 만든 것들 */

.works .name { width: 9.5em; }

.desc p { margin: 0; }

.desc .stack {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-muted);
}

.desc .links {
    margin-top: 4px;
    font-size: 14px;
}

.badge {
    display: inline-block;
    margin: 4px 4px 0 0;
    padding: 0 6px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
}

.badge--live { border-color: #859900; color: #4d5c00; }
.badge--dev { border-color: #cb4b16; color: #a33a0c; }
.badge--personal { border-color: #6c71c4; color: #5a5fb0; }
.badge--private { border-color: var(--rule-soft); color: var(--ink-muted); }
.badge--video { border-color: #dc322f; color: #b52a26; }

.videos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 0 8px;
}

.video {
    flex: 1 1 220px;
    max-width: 280px;
    min-width: 0;
    text-decoration: none;
}

.video img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--rule-soft);
}

.video__title {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.video:hover .video__title { text-decoration: underline; }

.video__date {
    display: block;
    font-size: 12px;
    color: var(--ink-muted);
}

.video__summary {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink);
}

.note {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--ink-muted);
}

/* 다루는 것 */

.facts th {
    width: 8.5em;
    padding: 9px 10px;
    background: var(--paper-deep);
    color: var(--ink-strong);
}

.facts td { padding: 9px 10px; }

/* 새 소식 */

.news { line-height: 1.6; }

.news th,
.news td { padding: 8px 6px; }

.news .no,
.news .date {
    text-align: center;
    color: var(--ink-muted);
    white-space: nowrap;
}

.news th.no { width: 3.2em; }
.news th.date { width: 6.6em; }
.news thead th.no,
.news thead th.date { color: var(--ink-strong); }

.new {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 4px;
    background: var(--accent);
    color: var(--paper);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: 1px;
}

/* 바닥 — 88×31 단추와 판권 */

.footer hr { margin: 48px 0 16px; }

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.button88 {
    display: flex;
    width: 88px;
    height: 31px;
    box-sizing: border-box;
    border: 1px solid var(--ink-muted);
    background: var(--paper-light);
    font-size: 11px;
    line-height: 1.2;
}

.button88 span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button88 .l {
    flex: 0 0 36px;
    font-weight: 700;
}

.button88 .r {
    flex: 1 1 auto;
    color: var(--ink-strong);
    white-space: nowrap;
}

.l--ink { background: var(--ink-strong); color: var(--paper); }
.l--yellow { background: #b58900; color: #002b36; }
.l--blue { background: var(--link); color: var(--paper); }

.colophon {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--ink-muted);
}

/* 휴대폰 — 표의 칸을 위아래로 쌓는다 */

@media (max-width: 560px) {
    .page { padding-top: 36px; }

    /* 열 제목은 화면에서만 숨기고 화면 읽기 프로그램에는 남긴다 */
    .works thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .works tr,
    .works th,
    .works td,
    .facts tr,
    .facts th,
    .facts td { display: block; }

    .works .name {
        width: auto;
        padding-bottom: 4px;
        border-bottom: 0;
    }

    .works .name br { display: none; }
    .works .name .sub,
    .works .name .badge { margin: 4px 0 0 6px; }

    .works .desc { padding-top: 4px; }

    .videos .video { max-width: none; }

    .facts th {
        width: auto;
        padding: 6px 10px;
        border-bottom: 0;
    }

    .news .no { display: none; }
}