:root { --ink:#0c2937; --deep:#071d28; --sea:#174e5d; --foam:#edf1eb; --paper:#f8f5ee; --gold:#c4a46a; --line:rgba(12,41,55,.18); --sans:'IBM Plex Sans KR',sans-serif; --serif:'Gowun Batang',serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.7; word-break:keep-all; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .shell { width:min(1160px, calc(100% - 48px)); margin-inline:auto; }
.hero { min-height:780px; height:100svh; max-height:980px; color:#fff; background-color:var(--deep); background-image:linear-gradient(90deg,rgba(4,25,37,.76) 0%,rgba(4,25,37,.4) 52%,rgba(4,25,37,.16) 100%),url('/public/introduce/bg.png'); background-position:center; background-size:cover; position:relative; overflow:hidden; transition:background-image .5s ease; } .hero::after { content:''; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(transparent,rgba(4,25,37,.32)); pointer-events:none; }
.nav { height:112px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.25); position:relative; z-index:2; } .brand { display:flex; align-items:center; gap:13px; } .brand-mark { width:45px; height:45px; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold); font-family:var(--serif); font-size:22px; transform:rotate(45deg); } .brand-mark i { font-style:normal; transform:rotate(-45deg); } .brand>span:last-child { display:flex; flex-direction:column; line-height:1.15; } .brand b { font-family:var(--serif); font-size:18px; letter-spacing:.08em; } .brand small { font-size:8px; letter-spacing:.25em; margin-top:6px; opacity:.7; }
.nav-links { display:flex; gap:48px; font-size:14px; } .nav-links a { transition:color .2s; } .nav-links a:hover { color:var(--gold); } .nav-contact { border:1px solid rgba(255,255,255,.6); padding:12px 22px; font-size:13px; }
.hero-content { position:relative; z-index:1; top:44%; transform:translateY(-50%); } .eyebrow { color:var(--gold); letter-spacing:.24em; font-size:12px; font-weight:600; } .vessel-name { display:flex; align-items:center; gap:14px; color:var(--gold); } .vessel-name::before { content:''; width:42px; height:1px; background:var(--gold); } .vessel-name span { font-size:9px; letter-spacing:.22em; } .vessel-name strong { color:#fff; font:700 20px var(--serif); letter-spacing:.12em; } .vessel-name i { color:rgba(255,255,255,.55); font:normal 10px var(--serif); letter-spacing:.15em; } .hero h1 { font-family:var(--serif); font-size:clamp(54px,6.5vw,92px); line-height:1.18; font-weight:400; letter-spacing:-.055em; margin:24px 0 30px; animation:rise .9s ease both; text-shadow:0 3px 24px rgba(0,0,0,.22); } em { color:var(--gold); font-style:normal; } .hero-copy { color:rgba(255,255,255,.88); font-size:17px; font-weight:300; margin-bottom:42px; text-shadow:0 2px 12px rgba(0,0,0,.35); } .text-link { display:inline-flex; gap:45px; align-items:center; border-bottom:1px solid currentColor; padding:0 0 8px; font-size:13px; font-weight:600; letter-spacing:.04em; } .text-link.light { color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.3); }
.hero-index { position:absolute; z-index:2; right:max(24px,calc((100% - 1160px)/2)); bottom:50px; display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.15em; } .hero-index i { width:88px; height:1px; background:rgba(255,255,255,.7); } .scroll-label { position:absolute; z-index:2; left:24px; bottom:52px; font-size:9px; letter-spacing:.2em; writing-mode:vertical-rl; }
.intro,.album-section { padding-block:130px; } .section-label { font-size:11px; letter-spacing:.22em; font-weight:600; display:flex; gap:20px; align-items:center; margin-bottom:70px; } .section-label span { color:var(--gold); } .section-label.light { color:#fff; } .intro-heading,.album-head { display:grid; grid-template-columns:1.15fr .85fr; gap:100px; align-items:end; } h2 { font-family:var(--serif); font-weight:400; font-size:clamp(38px,4.3vw,60px); line-height:1.35; letter-spacing:-.05em; margin:0; } .heading-vessel { display:block; color:var(--sea); font:600 12px var(--sans); letter-spacing:.18em; margin-bottom:12px; } .intro-heading>div { max-width:450px; } .intro-heading p,.album-head p { color:#53646b; font-size:15px; margin:0 0 32px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); margin-top:100px; border-top:1px solid var(--line); } .principles article { padding:42px 42px 20px 0; border-right:1px solid var(--line); } .principles article+article { padding-left:42px; } .principles article:last-child { border:0; } .principles strong { color:var(--gold); font-size:11px; letter-spacing:.15em; } .principles h3 { font-family:var(--serif); font-size:22px; margin:18px 0 12px; } .principles p { color:#6e797d; font-size:13px; margin:0; }
.notice-section { background:var(--deep); color:#fff; padding-block:120px; position:relative; overflow:hidden; } .notice-section::after { content:'潮'; position:absolute; right:-40px; bottom:-160px; color:rgba(255,255,255,.025); font:440px/1 var(--serif); } .notice-head { display:grid; grid-template-columns:1fr 1fr; align-items:end; margin-bottom:65px; } .notice-head p { color:rgba(255,255,255,.55); margin:0 0 13px; } .notice-list { position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.22); } .notice-item { display:grid; grid-template-columns:90px 1fr; border-bottom:1px solid rgba(255,255,255,.16); padding:32px 0; } .notice-number { color:var(--gold); font:14px var(--serif); padding-top:5px; } .notice-item time { color:rgba(255,255,255,.45); font-size:11px; letter-spacing:.1em; } .notice-item h3 { font:700 21px var(--serif); margin:4px 0 5px; } .notice-item p { color:rgba(255,255,255,.63); font-size:13px; margin:0; white-space:pre-line; }
.album-head { margin-bottom:65px; } .album-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; align-items:start; } .album-card { grid-column:span 4; margin:0 0 22px; } .album-card--wide { grid-column:span 8; } .album-card img { width:100%; aspect-ratio:1/1.05; object-fit:cover; filter:saturate(.82); transition:filter .4s,transform .4s; } .album-card--wide img { aspect-ratio:1.7/1; } .album-card:hover img { filter:saturate(1); transform:translateY(-4px); } .album-card figcaption { display:flex; justify-content:space-between; gap:20px; padding-top:14px; font-family:var(--serif); } .album-card time { color:#879094; font:10px var(--sans); white-space:nowrap; } .empty { grid-column:1/-1; color:#718087; } .empty.light { color:rgba(255,255,255,.6); }
.quote-band { min-height:440px; display:grid; place-items:center; text-align:center; padding:80px 24px; background:linear-gradient(rgba(7,29,40,.4),rgba(7,29,40,.4)),url('/public/introduce/bg.png') center 65%/cover fixed; color:white; } .quote-band p { font:400 clamp(30px,4vw,52px)/1.55 var(--serif); margin:0; text-shadow:0 2px 16px rgba(0,0,0,.45); } .contact { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-block:120px; align-items:end; } .contact-copy { max-width:430px; } .contact-copy>p { color:#66777e; } .contact-number { margin-top:26px; } .contact-number small { display:block; color:#9aa2a4; margin-bottom:5px; font-size:13px; } .contact-number a { color:var(--ink); font:700 24px var(--serif); letter-spacing:.04em; } .contact-actions { display:grid; gap:10px; margin-top:24px; } .contact-button { display:flex; justify-content:space-between; background:var(--ink); color:white; padding:20px 24px; font-size:14px; transition:background .2s; } .contact-button:hover { background:var(--sea); } .contact-button.kakao { background:#fee500; color:#191919; } .contact-button.kakao:hover { background:#f4dc00; } .contact-copy small { display:block; color:#9aa2a4; font-size:10px; }
footer { background:var(--deep); color:white; padding:55px 0; } .footer-inner { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; } .footer-info { text-align:right; color:rgba(255,255,255,.55); } .footer-info p { margin:0; font-size:14px; } .footer-info p+p { margin-top:5px; font-size:11px; letter-spacing:.08em; } .footer-info span { color:rgba(255,255,255,.78); } .footer-info i { display:inline-block; width:1px; height:10px; margin:0 10px; background:rgba(255,255,255,.25); } .footer-info a { transition:color .2s; } .footer-info a:hover { color:white; } .footer-brand .brand-mark { transform:rotate(45deg) scale(.8); } .reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease; } .reveal.is-visible { opacity:1; transform:translateY(0); } @keyframes rise { from { opacity:0; transform:translateY(25px); } }
body { font-size:17px; } .brand b { font-size:19px; } .nav-links { font-size:16px; } .nav-contact { font-size:16px; } .hero-copy { font-size:20px; line-height:1.8; } .text-link { font-size:16px; } .intro-heading p,.album-head p { font-size:20px; line-height:1.85; } .principles h3 { font-size:24px; } .principles p { font-size:20px; line-height:1.85; } .notice-head p { font-size:20px; } .notice-item time { font-size:14px; } .notice-item h3 { font-size:23px; } .notice-item p { font-size:20px; line-height:1.85; } .album-card figcaption { font-size:20px; } .album-card time { font-size:14px; } .contact-button { font-size:16px; } .contact-copy small { font-size:14px; } .footer-inner>p { font-size:14px; }
body,.brand b,.brand small,.nav-links,.nav-contact,.eyebrow,.vessel-name span,.vessel-name strong,.vessel-name i,.hero-copy,.text-link,.hero-index,.scroll-label,.section-label,.heading-vessel,.intro-heading p,.album-head p,.principles strong,.principles p,.notice-head p,.notice-number,.notice-item time,.notice-item p,.album-card figcaption,.album-card time,.contact-button,.contact-copy small,.footer-inner>p { font-size:20px; }
@media (max-width:800px) { .shell { width:min(100% - 32px,620px); } .hero { min-height:700px; } .nav { height:88px; } .nav-links { display:none; } .nav-contact { padding:9px 13px; } .hero-content { top:42%; } .hero-copy br,.scroll-label { display:none; } .intro,.album-section { padding-block:88px; } .section-label { margin-bottom:45px; } .intro-heading,.album-head,.notice-head,.contact { grid-template-columns:1fr; gap:35px; } .principles { grid-template-columns:1fr; margin-top:65px; } .principles article,.principles article+article { border-right:0; border-bottom:1px solid var(--line); padding:30px 0; } .notice-section { padding-block:88px; } .notice-item { grid-template-columns:45px 1fr; } .album-card,.album-card--wide { grid-column:span 6; } .album-card img,.album-card--wide img { aspect-ratio:1/1.1; } .quote-band { min-height:340px; background-attachment:scroll; } .contact { padding-block:90px; } .footer-inner { grid-template-columns:1fr; gap:22px; } .footer-info { text-align:left; } }
@media (max-width:500px) { .brand b { font-size:20px; } .brand-mark { width:38px; height:38px; } .nav-contact { font-size:20px; } .hero h1 { font-size:48px; } .hero-index { left:16px; right:auto; } .album-grid { gap:12px; } .album-card figcaption { display:block; font-size:20px; } .album-card time { display:block; margin-top:5px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }

/* Recent notice and album previews */
.section-summary { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.section-summary p { margin:0; }
.section-more { display:inline-flex; align-items:center; justify-content:space-between; gap:42px; border:0; border-bottom:1px solid currentColor; padding:0 0 8px; background:transparent; color:var(--ink); font:600 15px var(--sans); cursor:pointer; }
.section-more.light { color:#fff; }
.notice-item { display:block; padding:0; }
.notice-item button { width:100%; display:grid; grid-template-columns:70px minmax(0,1fr) 150px 24px; align-items:center; gap:20px; padding:28px 0; border:0; background:transparent; color:#fff; text-align:left; cursor:pointer; }
.notice-item button:hover h3 { color:var(--gold); }
.notice-item h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 21px var(--serif); transition:color .2s; }
.notice-item time { color:rgba(255,255,255,.5); font-size:14px; text-align:right; }
.notice-item i { color:var(--gold); font-style:normal; text-align:right; }
.album-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.album-card { grid-column:auto; min-width:0; margin:0; }
.album-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.album-card figcaption { align-items:flex-start; font-size:16px; }
.album-card time { font-size:12px; }

/* Full-list modals */
body.modal-open { overflow:hidden; }
.site-modal { width:min(1040px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:0; border:0; overflow:auto; background:var(--paper); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.35); }
.site-modal::backdrop { background:rgba(3,18,25,.78); backdrop-filter:blur(4px); }
.modal-frame { padding:clamp(28px,5vw,64px); }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.modal-header p { margin:0 0 5px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.2em; }
.modal-header h2 { font-size:clamp(32px,4vw,48px); }
.modal-close { width:44px; height:44px; flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--ink); font:300 29px/1 var(--sans); cursor:pointer; }
.notice-board { border-bottom:1px solid var(--line); }
.board-row { width:100%; display:grid; grid-template-columns:60px minmax(0,1fr) 130px 24px; align-items:center; gap:18px; padding:23px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.board-row:last-child { border-bottom:0; }
.board-row>span { color:var(--gold); font:14px var(--serif); }
.board-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 18px var(--serif); }
.board-row time { color:#7a878c; font-size:13px; text-align:right; }
.board-row i { color:var(--gold); font-style:normal; text-align:right; }
.board-row:hover strong { color:var(--sea); }
.notice-detail { padding-top:34px; }
.detail-back { margin-bottom:32px; padding:0 0 6px; border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--sea); font-weight:600; cursor:pointer; }
.notice-detail time { color:#8a969a; font-size:13px; }
.notice-detail h3 { margin:8px 0 24px; padding-bottom:24px; border-bottom:1px solid var(--line); font:700 clamp(25px,3vw,36px) var(--serif); }
.notice-detail p { min-height:160px; margin:0; color:#52636a; white-space:pre-line; font-size:17px; line-height:1.9; }
.modal-album-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 18px; padding-top:34px; }
.modal-album-grid figure { min-width:0; margin:0; }
.modal-album-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; background:#e4e5df; }
.modal-album-grid figcaption { display:flex; justify-content:space-between; gap:14px; padding-top:11px; }
.modal-album-grid strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 15px var(--serif); }
.modal-album-grid time { flex:0 0 auto; color:#879094; font-size:11px; }
.modal-empty { grid-column:1/-1; margin:40px 0 0; color:#718087; }

@media (max-width:800px) {
    .notice-item button { grid-template-columns:42px minmax(0,1fr) 110px; gap:12px; }
    .notice-item i { display:none; }
    .album-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .modal-album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px) {
    .notice-item button { grid-template-columns:34px minmax(0,1fr); }
    .notice-item time { grid-column:2; text-align:left; font-size:12px; }
    .album-grid { grid-template-columns:1fr; }
    .album-card img { aspect-ratio:4/3; }
    .site-modal { width:100%; max-width:none; max-height:100dvh; height:100dvh; margin:0; }
    .modal-frame { min-height:100%; padding:24px 18px 40px; }
    .board-row { grid-template-columns:34px minmax(0,1fr); gap:10px; }
    .board-row time { grid-column:2; text-align:left; }
    .board-row i { display:none; }
    .modal-album-grid { grid-template-columns:1fr; }
}